mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
Instead of createElement. We should have done this when we initially released jsx-runtime but better late than never. The general principle is that our tests should be written using the most up-to-date idioms that we recommend for users, except when explicitly testing an edge case or legacy behavior, like for backwards compatibility. Most of the diff is related to tweaking test output and isn't very interesting. I did have to workaround an issue related to component stacks. The component stack logic depends on shared state that lives in the React module. The problem is that most of our tests reset the React module state and re-require a fresh instance of React, React DOM, etc. However, the JSX runtime is not re-required because it's injected by the compiler as a static import. This means its copy of the shared state is no longer the same as the one used by React, causing any warning logged by the JSX runtime to not include a component stack. (This same issue also breaks string refs, but since we're removing those soon I'm not so concerned about that.) The solution I went with for now is to mock the JSX runtime with a proxy that re-requires the module on every function invocation. I don't love this but it will have to do for now. What we should really do is migrate our tests away from manually resetting the module state and use import syntax instead.
130 lines
4.0 KiB
JavaScript
130 lines
4.0 KiB
JavaScript
'use strict';
|
|
|
|
const path = require('path');
|
|
|
|
const babel = require('@babel/core');
|
|
const coffee = require('coffee-script');
|
|
const hermesParser = require('hermes-parser');
|
|
|
|
const tsPreprocessor = require('./typescript/preprocessor');
|
|
const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
|
|
|
|
const pathToBabel = path.join(
|
|
require.resolve('@babel/core'),
|
|
'../..',
|
|
'package.json'
|
|
);
|
|
const pathToBabelPluginReplaceConsoleCalls = require.resolve(
|
|
'../babel/transform-replace-console-calls'
|
|
);
|
|
const pathToTransformInfiniteLoops = require.resolve(
|
|
'../babel/transform-prevent-infinite-loops'
|
|
);
|
|
const pathToTransformTestGatePragma = require.resolve(
|
|
'../babel/transform-test-gate-pragma'
|
|
);
|
|
const pathToTransformReactVersionPragma = require.resolve(
|
|
'../babel/transform-react-version-pragma'
|
|
);
|
|
const pathToBabelrc = path.join(__dirname, '..', '..', 'babel.config.js');
|
|
const pathToErrorCodes = require.resolve('../error-codes/codes.json');
|
|
|
|
const babelOptions = {
|
|
plugins: [
|
|
// For Node environment only. For builds, Rollup takes care of ESM.
|
|
require.resolve('@babel/plugin-transform-modules-commonjs'),
|
|
|
|
pathToTransformInfiniteLoops,
|
|
pathToTransformTestGatePragma,
|
|
|
|
// This optimization is important for extremely performance-sensitive (e.g. React source).
|
|
// It's okay to disable it for tests.
|
|
[
|
|
require.resolve('@babel/plugin-transform-block-scoping'),
|
|
{throwIfClosureRequired: false},
|
|
],
|
|
],
|
|
retainLines: true,
|
|
};
|
|
|
|
module.exports = {
|
|
process: function (src, filePath) {
|
|
if (filePath.match(/\.css$/)) {
|
|
// Don't try to parse CSS modules; they aren't needed for tests anyway.
|
|
return {code: ''};
|
|
}
|
|
if (filePath.match(/\.coffee$/)) {
|
|
return {code: coffee.compile(src, {bare: true})};
|
|
}
|
|
if (filePath.match(/\.ts$/) && !filePath.match(/\.d\.ts$/)) {
|
|
return {code: tsPreprocessor.compile(src, filePath)};
|
|
}
|
|
if (filePath.match(/\.json$/)) {
|
|
return {code: src};
|
|
}
|
|
if (!filePath.match(/\/third_party\//)) {
|
|
// for test files, we also apply the async-await transform, but we want to
|
|
// make sure we don't accidentally apply that transform to product code.
|
|
const isTestFile = !!filePath.match(/\/__tests__\//);
|
|
const isInDevToolsPackages = !!filePath.match(
|
|
/\/packages\/react-devtools.*\//
|
|
);
|
|
const testOnlyPlugins = [];
|
|
const sourceOnlyPlugins = [];
|
|
if (process.env.NODE_ENV === 'development' && !isInDevToolsPackages) {
|
|
sourceOnlyPlugins.push(pathToBabelPluginReplaceConsoleCalls);
|
|
}
|
|
const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
|
|
babelOptions.plugins
|
|
);
|
|
if (isTestFile && isInDevToolsPackages) {
|
|
plugins.push(pathToTransformReactVersionPragma);
|
|
}
|
|
|
|
plugins.push([
|
|
process.env.NODE_ENV === 'development'
|
|
? require.resolve('@babel/plugin-transform-react-jsx-development')
|
|
: require.resolve('@babel/plugin-transform-react-jsx'),
|
|
// The "automatic" runtime corresponds to react/jsx-runtime. "classic"
|
|
// would be React.createElement.
|
|
{runtime: 'automatic'},
|
|
]);
|
|
|
|
let sourceAst = hermesParser.parse(src, {babel: true});
|
|
return {
|
|
code: babel.transformFromAstSync(
|
|
sourceAst,
|
|
src,
|
|
Object.assign(
|
|
{filename: path.relative(process.cwd(), filePath)},
|
|
babelOptions,
|
|
{
|
|
plugins,
|
|
sourceMaps: process.env.JEST_ENABLE_SOURCE_MAPS
|
|
? process.env.JEST_ENABLE_SOURCE_MAPS
|
|
: false,
|
|
}
|
|
)
|
|
).code,
|
|
};
|
|
}
|
|
return {code: src};
|
|
},
|
|
|
|
getCacheKey: createCacheKeyFunction(
|
|
[
|
|
__filename,
|
|
pathToBabel,
|
|
pathToBabelrc,
|
|
pathToTransformInfiniteLoops,
|
|
pathToTransformTestGatePragma,
|
|
pathToTransformReactVersionPragma,
|
|
pathToErrorCodes,
|
|
],
|
|
[
|
|
(process.env.REACT_VERSION != null).toString(),
|
|
(process.env.NODE_ENV === 'development').toString(),
|
|
]
|
|
),
|
|
};
|