Files
react/scripts/jest/devtools/setupEnv.js
Sebastian Markbåge 491a4eacce [DevTools] Print component stacks as error objects to get source mapping (#30289)
Before:

<img width="844" alt="Screenshot 2024-07-04 at 3 20 34 PM"
src="https://github.com/facebook/react/assets/63648/0fd8a53f-538a-4429-a4cf-c22f85a09aa8">

After:

<img width="845" alt="Screenshot 2024-07-05 at 6 08 28 PM"
src="https://github.com/facebook/react/assets/63648/7b9da13a-fa97-4581-9899-06de6fface65">

Firefox:

<img width="1338" alt="Screenshot 2024-07-05 at 6 09 50 PM"
src="https://github.com/facebook/react/assets/63648/f2eb9f2a-2251-408f-86d0-b081279ba378">

The first log doesn't get a stack because it's logged before DevTools
boots up and connects which is unfortunate.

The second log already has a stack printed by React (this is on stable)
it gets replaced by our object now.

The third and following logs don't have a stack and get one appended.

I only turn the stack into an error object if it matches what we would
emit from DevTools anyway. Otherwise we assume it's not React. Since I
had to change the format slightly to make this work, I first normalize
the stack slightly before doing a comparison since it won't be 1:1.
2024-07-08 18:42:58 -04:00

83 lines
2.8 KiB
JavaScript

'use strict';
const semver = require('semver');
const {ReactVersion} = require('../../../ReactVersions');
// DevTools stores preferences between sessions in localStorage
if (!global.hasOwnProperty('localStorage')) {
global.localStorage = require('local-storage-fallback').default;
}
// Mimic the global we set with Webpack's DefinePlugin
global.__DEV__ = process.env.NODE_ENV !== 'production';
global.__TEST__ = true;
global.__IS_FIREFOX__ = false;
global.__IS_CHROME__ = false;
global.__IS_EDGE__ = false;
const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
global._test_react_version = (range, testName, callback) => {
const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
if (shouldPass) {
test(testName, callback);
} else {
test.skip(testName, callback);
}
};
global._test_react_version_focus = (range, testName, callback) => {
const shouldPass = semver.satisfies(ReactVersionTestingAgainst, range);
if (shouldPass) {
test.only(testName, callback);
} else {
test.skip(testName, callback);
}
};
global._test_ignore_for_react_version = (testName, callback) => {
test.skip(testName, callback);
};
// Most of our tests call jest.resetModules in a beforeEach and the
// re-require all the React modules. However, the JSX runtime is injected by
// the compiler, so those bindings don't get updated. This causes warnings
// logged by the JSX runtime to not have a component stack, because component
// stack relies on the the secret internals object that lives on the React
// module, which because of the resetModules call is longer the same one.
//
// To workaround this issue, we use a proxy that re-requires the latest
// JSX Runtime from the require cache on every function invocation.
//
// Longer term we should migrate all our tests away from using require() and
// resetModules, and use import syntax instead so this kind of thing doesn't
// happen.
if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
lazyRequireFunctionExports('react/jsx-dev-runtime');
// TODO: We shouldn't need to do this in the production runtime, but until
// we remove string refs they also depend on the shared state object. Remove
// once we remove string refs.
lazyRequireFunctionExports('react/jsx-runtime');
}
function lazyRequireFunctionExports(moduleName) {
jest.mock(moduleName, () => {
return new Proxy(jest.requireActual(moduleName), {
get(originalModule, prop) {
// If this export is a function, return a wrapper function that lazily
// requires the implementation from the current module cache.
if (typeof originalModule[prop] === 'function') {
return function () {
return jest.requireActual(moduleName)[prop].apply(this, arguments);
};
} else {
return originalModule[prop];
}
},
});
});
}