diff --git a/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js b/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js index 1e972039ee5..29ec5148cb0 100644 --- a/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js +++ b/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js @@ -171,6 +171,21 @@ function transformCode( return result?.code ?? null; } +function transformCodeWithSourceOptimization( + code: string, + options: {[string]: unknown}, +): string | null { + const config = preset.getPreset(code, options); + const result = babel.transformSync(code, { + ...config, + babelrc: false, + configFile: false, + filename: MOCK_FILENAME, + sourceMaps: false, + }); + return result?.code ?? null; +} + function getSnapshotPath(configName: string): string { return path.join(OUTPUT_DIR, `${configName}.js`); } @@ -267,6 +282,16 @@ describe('react-native-babel-preset transform snapshots', () => { ); describe('specific feature transformations', () => { + it('adds display names when React.createClass contains trivia', () => { + const code = ` + const Component = React /* comment */ . createClass({ + render() { return null; } + }); + `; + const result = transformCodeWithSourceOptimization(code, {dev: false}); + expect(result).toContain('displayName:"Component"'); + }); + it('handles async generators', () => { const code = ` async function* gen() { diff --git a/packages/react-native-babel-preset/src/configs/main.js b/packages/react-native-babel-preset/src/configs/main.js index a48b126ca8b..970853f3c01 100644 --- a/packages/react-native-babel-preset/src/configs/main.js +++ b/packages/react-native-babel-preset/src/configs/main.js @@ -190,7 +190,7 @@ const getPreset = (src, options, babel) => { } if ( isNull || - src.indexOf('React.createClass') !== -1 || + src.indexOf('createClass') !== -1 || src.indexOf('createReactClass') !== -1 ) { extraPlugins.push([require('@babel/plugin-transform-react-display-name')]);