OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Support disabling spurious act warnings with a global environment flag (#22561)

Browse Source 
* Extract `act` environment check into function

`act` checks the environment to determine whether to fire a warning.
We're changing how this check works in React 18. As a first step, this
refactors the logic into a single function. No behavior changes yet.

* Use IS_REACT_ACT_ENVIRONMENT to disable warnings

If `IS_REACT_ACT_ENVIRONMENT` is set to `false`, we will suppress
any `act` warnings. Otherwise, the behavior of `act` is the same as in
React 17: if `jest` is defined, it warns.

In concurrent mode, the plan is to remove the `jest` check and only warn
if `IS_REACT_ACT_ENVIRONMENT` is true. I have not implemented that
part yet.
This commit is contained in:
Andrew Clark 2021-10-18 11:27:26 -04:00 committed by GitHub
parent b72dc8e930
commit 163e81c1f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 142 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -279,5 +279,6 @@ module.exports = {
__VARIANT__: true,
gate: true,
trustedTypes: true,
IS_REACT_ACT_ENVIRONMENT: true,
},
};

9
packages/jest-react/src/internalAct.js
View File

@ -18,9 +18,7 @@ import type {Thenable} from 'shared/ReactTypes';
import * as Scheduler from 'scheduler/unstable_mock';
import ReactSharedInternals from 'shared/ReactSharedInternals';
import enqueueTask from 'shared/enqueueTask';
const {ReactCurrentActQueue} = ReactSharedInternals;
let actingUpdatesScopeDepth = 0;
@ -37,15 +35,18 @@ export function act(scope: () => Thenable<mixed> | void) {
);
}
const previousIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
actingUpdatesScopeDepth++;
if (__DEV__ && actingUpdatesScopeDepth === 1) {
ReactCurrentActQueue.disableActWarning = true;
// Because this is not the "real" `act`, we set this to `false` so React
// knows not to fire `act` warnings.
global.IS_REACT_ACT_ENVIRONMENT = false;
}
const unwind = () => {
if (__DEV__ && actingUpdatesScopeDepth === 1) {
ReactCurrentActQueue.disableActWarning = false;
global.IS_REACT_ACT_ENVIRONMENT = previousIsActEnvironment;
}
actingUpdatesScopeDepth--;

34
packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js vendored
View File

@ -273,6 +273,40 @@ function runActTests(label, render, unmount, rerender) {
]);
});
// @gate __DEV__
it('does not warn if IS_REACT_ACT_ENVIRONMENT is set to false', () => {
let setState;
function App() {
const [state, _setState] = React.useState(0);
setState = _setState;
return state;
}
act(() => {
render(<App />, container);
});
// First show that it does warn
expect(() => setState(1)).toErrorDev(
'An update to App inside a test was not wrapped in act(...)',
);
// Now do the same thing again, but disable with the environment flag
const prevIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
global.IS_REACT_ACT_ENVIRONMENT = false;
try {
setState(2);
} finally {
global.IS_REACT_ACT_ENVIRONMENT = prevIsActEnvironment;
}
// When the flag is restored to its previous value, it should start
// warning again. This shows that React reads the flag each time.
expect(() => setState(3)).toErrorDev(
'An update to App inside a test was not wrapped in act(...)',
);
});
describe('fake timers', () => {
beforeEach(() => {
jest.useFakeTimers();

35
packages/react-reconciler/src/ReactFiberAct.new.js Normal file
View File

@ -0,0 +1,35 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type {Fiber} from './ReactFiber.new';
import {warnsIfNotActing} from './ReactFiberHostConfig';
export function isActEnvironment(fiber: Fiber) {
if (__DEV__) {
const isReactActEnvironmentGlobal =
// $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
? IS_REACT_ACT_ENVIRONMENT
: undefined;
// TODO: Only check `jest` in legacy mode. In concurrent mode, this
// heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
// $FlowExpectedError - Flow doesn't know about jest
const jestIsDefined = typeof jest !== 'undefined';
return (
warnsIfNotActing &&
jestIsDefined &&
// Legacy mode assumes an act environment whenever `jest` is defined, but
// you can still turn off spurious warnings by setting
// IS_REACT_ACT_ENVIRONMENT explicitly to false.
isReactActEnvironmentGlobal !== false
);
}
return false;
}

35
packages/react-reconciler/src/ReactFiberAct.old.js Normal file
View File

@ -0,0 +1,35 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type {Fiber} from './ReactFiber.old';
import {warnsIfNotActing} from './ReactFiberHostConfig';
export function isActEnvironment(fiber: Fiber) {
if (__DEV__) {
const isReactActEnvironmentGlobal =
// $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
? IS_REACT_ACT_ENVIRONMENT
: undefined;
// TODO: Only check `jest` in legacy mode. In concurrent mode, this
// heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
// $FlowExpectedError - Flow doesn't know about jest
const jestIsDefined = typeof jest !== 'undefined';
return (
warnsIfNotActing &&
jestIsDefined &&
// Legacy mode assumes an act environment whenever `jest` is defined, but
// you can still turn off spurious warnings by setting
// IS_REACT_ACT_ENVIRONMENT explicitly to false.
isReactActEnvironmentGlobal !== false
);
}
return false;
}

13
packages/react-reconciler/src/ReactFiberHooks.new.js
View File

@ -118,6 +118,7 @@ import {
} from './ReactUpdateQueue.new';
import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
import {isActEnvironment} from './ReactFiberAct.new';
const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@ -1678,8 +1679,7 @@ function mountEffect(
deps: Array<mixed> | void | null,
): void {
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(currentlyRenderingFiber)) {
warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
}
}
@ -1709,8 +1709,7 @@ function updateEffect(
deps: Array<mixed> | void | null,
): void {
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(currentlyRenderingFiber)) {
warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
}
}
@ -2193,8 +2192,7 @@ function dispatchReducerAction<S, A>(
enqueueUpdate(fiber, queue, update, lane);
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(fiber)) {
warnIfNotCurrentlyActingUpdatesInDev(fiber);
}
}
@ -2279,8 +2277,7 @@ function dispatchSetState<S, A>(
}
}
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(fiber)) {
warnIfNotCurrentlyActingUpdatesInDev(fiber);
}
}

13
packages/react-reconciler/src/ReactFiberHooks.old.js
View File

@ -118,6 +118,7 @@ import {
} from './ReactUpdateQueue.old';
import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
import {isActEnvironment} from './ReactFiberAct.old';
const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@ -1678,8 +1679,7 @@ function mountEffect(
deps: Array<mixed> | void | null,
): void {
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(currentlyRenderingFiber)) {
warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
}
}
@ -1709,8 +1709,7 @@ function updateEffect(
deps: Array<mixed> | void | null,
): void {
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(currentlyRenderingFiber)) {
warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
}
}
@ -2193,8 +2192,7 @@ function dispatchReducerAction<S, A>(
enqueueUpdate(fiber, queue, update, lane);
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(fiber)) {
warnIfNotCurrentlyActingUpdatesInDev(fiber);
}
}
@ -2279,8 +2277,7 @@ function dispatchSetState<S, A>(
}
}
if (__DEV__) {
// $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
if ('undefined' !== typeof jest) {
if (isActEnvironment(fiber)) {
warnIfNotCurrentlyActingUpdatesInDev(fiber);
}
}

19
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View File

@ -84,7 +84,6 @@ import {
scheduleTimeout,
cancelTimeout,
noTimeout,
warnsIfNotActing,
afterActiveInstanceBlur,
clearContainer,
getCurrentEventPriority,
@ -2816,15 +2815,8 @@ function shouldForceFlushFallbacksInDEV() {
export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
if (__DEV__) {
if (
warnsIfNotActing === true &&
(fiber.mode & StrictLegacyMode) !== NoMode &&
ReactCurrentActQueue.current === null &&
// Our internal tests use a custom implementation of `act` that works by
// mocking the Scheduler package. Disable the `act` warning.
// TODO: Maybe the warning should be disabled by default, and then turned
// on at the testing frameworks layer? Instead of what we do now, which
// is check if a `jest` global is defined.
ReactCurrentActQueue.disableActWarning === false
ReactCurrentActQueue.current === null
) {
console.error(
'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@ -2846,15 +2838,8 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
if (__DEV__) {
if (
warnsIfNotActing === true &&
executionContext === NoContext &&
ReactCurrentActQueue.current === null &&
// Our internal tests use a custom implementation of `act` that works by
// mocking the Scheduler package. Disable the `act` warning.
// TODO: Maybe the warning should be disabled by default, and then turned
// on at the testing frameworks layer? Instead of what we do now, which
// is check if a `jest` global is defined.
ReactCurrentActQueue.disableActWarning === false
ReactCurrentActQueue.current === null
) {
const previousFiber = ReactCurrentFiberCurrent;
try {

19
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
View File

@ -84,7 +84,6 @@ import {
scheduleTimeout,
cancelTimeout,
noTimeout,
warnsIfNotActing,
afterActiveInstanceBlur,
clearContainer,
getCurrentEventPriority,
@ -2816,15 +2815,8 @@ function shouldForceFlushFallbacksInDEV() {
export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
if (__DEV__) {
if (
warnsIfNotActing === true &&
(fiber.mode & StrictLegacyMode) !== NoMode &&
ReactCurrentActQueue.current === null &&
// Our internal tests use a custom implementation of `act` that works by
// mocking the Scheduler package. Disable the `act` warning.
// TODO: Maybe the warning should be disabled by default, and then turned
// on at the testing frameworks layer? Instead of what we do now, which
// is check if a `jest` global is defined.
ReactCurrentActQueue.disableActWarning === false
ReactCurrentActQueue.current === null
) {
console.error(
'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@ -2846,15 +2838,8 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
if (__DEV__) {
if (
warnsIfNotActing === true &&
executionContext === NoContext &&
ReactCurrentActQueue.current === null &&
// Our internal tests use a custom implementation of `act` that works by
// mocking the Scheduler package. Disable the `act` warning.
// TODO: Maybe the warning should be disabled by default, and then turned
// on at the testing frameworks layer? Instead of what we do now, which
// is check if a `jest` global is defined.
ReactCurrentActQueue.disableActWarning === false
ReactCurrentActQueue.current === null
) {
const previousFiber = ReactCurrentFiberCurrent;
try {

6
packages/react/src/ReactCurrentActQueue.js
View File

@ -11,12 +11,6 @@ type RendererTask = boolean => RendererTask | null;
const ReactCurrentActQueue = {
current: (null: null | Array<RendererTask>),
// Our internal tests use a custom implementation of `act` that works by
// mocking the Scheduler package. Use this field to disable the `act` warning.
// TODO: Maybe the warning should be disabled by default, and then turned
// on at the testing frameworks layer? Instead of what we do now, which
// is check if a `jest` global is defined.
disableActWarning: (false: boolean),
// Used to reproduce behavior of `batchedUpdates` in legacy mode.
isBatchingLegacy: false,

3
scripts/rollup/validate/eslintrc.cjs.js
View File

@ -42,6 +42,9 @@ module.exports = {
// jest
expect: true,
jest: true,
// act
IS_REACT_ACT_ENVIRONMENT: true,
},
parserOptions: {
ecmaVersion: 5,

3
scripts/rollup/validate/eslintrc.cjs2015.js
View File

@ -42,6 +42,9 @@ module.exports = {
// jest
expect: true,
jest: true,
// act
IS_REACT_ACT_ENVIRONMENT: true,
},
parserOptions: {
ecmaVersion: 2015,

3
scripts/rollup/validate/eslintrc.esm.js
View File

@ -42,6 +42,9 @@ module.exports = {
// jest
expect: true,
jest: true,
// act
IS_REACT_ACT_ENVIRONMENT: true,
},
parserOptions: {
ecmaVersion: 2017,

3
scripts/rollup/validate/eslintrc.fb.js
View File

@ -38,6 +38,9 @@ module.exports = {
// jest
jest: true,
// act
IS_REACT_ACT_ENVIRONMENT: true,
},
parserOptions: {
ecmaVersion: 5,

3
scripts/rollup/validate/eslintrc.rn.js
View File

@ -34,6 +34,9 @@ module.exports = {
// jest
jest: true,
// act
IS_REACT_ACT_ENVIRONMENT: true,
},
parserOptions: {
ecmaVersion: 5,

3
scripts/rollup/validate/eslintrc.umd.js
View File

@ -47,6 +47,9 @@ module.exports = {
// jest
jest: true,
// act
IS_REACT_ACT_ENVIRONMENT: true,
},
parserOptions: {
ecmaVersion: 5,