Skip to content

Commit

Permalink
make testing builds for React/ReactDOM
Browse files Browse the repository at this point in the history
This PR introduces UMD_TESTING, NODE_TESTING, and FB_WWW_TESTING build types for `react` and `react-dom`.
- changes infra to generate these builds
- exports act on ReactDOM in these testing builds
- uses the new test builds in fixtures/dom

In the next PR -

- I'll use the new builds for all our own tests
- I'll replace usages of TestUtils.act with ReactDOM.act.
  • Loading branch information
threepointone committed Feb 3, 2020
1 parent 434770c commit dcfd7c0
Showing 18 changed files with 466 additions and 501 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -168,6 +168,7 @@ module.exports = {
__PROFILE__: true,
__UMD__: true,
__EXPERIMENTAL__: true,
__TEST__: true,
trustedTypes: true,
},
};
20 changes: 13 additions & 7 deletions fixtures/dom/src/__tests__/nested-act-test.js
Original file line number Diff line number Diff line change
@@ -8,18 +8,24 @@
*/

let React;
let TestUtils;
let ReactDOM;
let TestRenderer;

global.__DEV__ = process.env.NODE_ENV !== 'production';

jest.mock('react', () => require.requireActual('react/cjs/react.testing.js'));
jest.mock('react-dom', () =>
require.requireActual('react-dom/cjs/react-dom.testing.js')
);
// we'll replace the above with react/testing and react-dom/testing right before the next minor

expect.extend(require('../toWarnDev'));

describe('unmocked scheduler', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
TestUtils = require('react-dom/test-utils');
ReactDOM = require('react-dom');
TestRenderer = require('react-test-renderer');
});

@@ -33,7 +39,7 @@ describe('unmocked scheduler', () => {
}
// in legacy mode, this tests whether an act only flushes its own effects
TestRenderer.act(() => {
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.create(<Effecty />);
});
expect(log).toEqual([]);
@@ -42,7 +48,7 @@ describe('unmocked scheduler', () => {

log = [];
// for doublechecking, we flip it inside out, and assert on the outermost
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.act(() => {
TestRenderer.create(<Effecty />);
});
@@ -59,7 +65,7 @@ describe('mocked scheduler', () => {
require.requireActual('scheduler/unstable_mock')
);
React = require('react');
TestUtils = require('react-dom/test-utils');
ReactDOM = require('react-dom');
TestRenderer = require('react-test-renderer');
});

@@ -77,7 +83,7 @@ describe('mocked scheduler', () => {
}
// with a mocked scheduler, this tests whether it flushes all work only on the outermost act
TestRenderer.act(() => {
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.create(<Effecty />);
});
expect(log).toEqual([]);
@@ -86,7 +92,7 @@ describe('mocked scheduler', () => {

log = [];
// for doublechecking, we flip it inside out, and assert on the outermost
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.act(() => {
TestRenderer.create(<Effecty />);
});
30 changes: 17 additions & 13 deletions fixtures/dom/src/__tests__/wrong-act-test.js
Original file line number Diff line number Diff line change
@@ -12,13 +12,18 @@ let ReactDOM;
let ReactART;
let ARTSVGMode;
let ARTCurrentMode;
let TestUtils;
let TestRenderer;
let ARTTest;

global.__DEV__ = process.env.NODE_ENV !== 'production';
global.__EXPERIMENTAL__ = process.env.RELEASE_CHANNEL === 'experimental';

jest.mock('react', () => require.requireActual('react/cjs/react.testing.js'));
jest.mock('react-dom', () =>
require.requireActual('react-dom/cjs/react-dom.testing.js')
);
// we'll replace the above with react/testing and react-dom/testing right before the next minor

expect.extend(require('../toWarnDev'));

function App(props) {
@@ -32,7 +37,6 @@ beforeEach(() => {
ReactART = require('react-art');
ARTSVGMode = require('art/modes/svg');
ARTCurrentMode = require('art/modes/current');
TestUtils = require('react-dom/test-utils');
TestRenderer = require('react-test-renderer');

ARTCurrentMode.setCurrent(ARTSVGMode);
@@ -70,8 +74,8 @@ beforeEach(() => {
});

it("doesn't warn when you use the right act + renderer: dom", () => {
TestUtils.act(() => {
TestUtils.renderIntoDocument(<App />);
ReactDOM.act(() => {
ReactDOM.render(<App />, document.createElement('div'));
});
});

@@ -86,7 +90,7 @@ it('resets correctly across renderers', () => {
React.useEffect(() => {}, []);
return null;
}
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.act(() => {});
expect(() => {
TestRenderer.create(<Effecty />);
@@ -99,7 +103,7 @@ it('resets correctly across renderers', () => {
it('warns when using the wrong act version - test + dom: render', () => {
expect(() => {
TestRenderer.act(() => {
TestUtils.renderIntoDocument(<App />);
ReactDOM.render(<App />, document.createElement('div'));
});
}).toWarnDev(["It looks like you're using the wrong act()"], {
withoutStack: true,
@@ -113,7 +117,7 @@ it('warns when using the wrong act version - test + dom: updates', () => {
setCtr = _setCtr;
return ctr;
}
TestUtils.renderIntoDocument(<Counter />);
ReactDOM.render(<Counter />, document.createElement('div'));
expect(() => {
TestRenderer.act(() => {
setCtr(1);
@@ -123,7 +127,7 @@ it('warns when using the wrong act version - test + dom: updates', () => {

it('warns when using the wrong act version - dom + test: .create()', () => {
expect(() => {
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.create(<App />);
});
}).toWarnDev(["It looks like you're using the wrong act()"], {
@@ -134,7 +138,7 @@ it('warns when using the wrong act version - dom + test: .create()', () => {
it('warns when using the wrong act version - dom + test: .update()', () => {
const root = TestRenderer.create(<App key="one" />);
expect(() => {
TestUtils.act(() => {
ReactDOM.act(() => {
root.update(<App key="two" />);
});
}).toWarnDev(["It looks like you're using the wrong act()"], {
@@ -151,15 +155,15 @@ it('warns when using the wrong act version - dom + test: updates', () => {
}
TestRenderer.create(<Counter />);
expect(() => {
TestUtils.act(() => {
ReactDOM.act(() => {
setCtr(1);
});
}).toWarnDev(["It looks like you're using the wrong act()"]);
});

it('does not warn when nesting react-act inside react-dom', () => {
TestUtils.act(() => {
TestUtils.renderIntoDocument(<ARTTest />);
ReactDOM.act(() => {
ReactDOM.render(<ARTTest />, document.createElement('div'));
});
});

@@ -171,7 +175,7 @@ it('does not warn when nesting react-act inside react-test-renderer', () => {

it("doesn't warn if you use nested acts from different renderers", () => {
TestRenderer.act(() => {
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.create(<App />);
});
});
1 change: 1 addition & 0 deletions packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
Original file line number Diff line number Diff line change
@@ -722,6 +722,7 @@ function runActTests(label, render, unmount, rerender) {

describe('suspense', () => {
if (__DEV__ && __EXPERIMENTAL__) {
// todo - remove __DEV__ check once we start using testing builds
it('triggers fallbacks if available', async () => {
let resolved = false;
let resolve;
5 changes: 5 additions & 0 deletions packages/react-dom/src/client/ReactDOM.js
Original file line number Diff line number Diff line change
@@ -35,6 +35,7 @@ import {
attemptUserBlockingHydration,
attemptContinuousHydration,
attemptHydrationAtCurrentPriority,
act,
} from 'react-reconciler/inline.dom';
import {createPortal as createPortalImpl} from 'shared/ReactPortal';
import {canUseDOM} from 'shared/ExecutionEnvironment';
@@ -249,4 +250,8 @@ if (__DEV__) {
}
}

if (__TEST__) {
ReactDOM.act = act;
}

export default ReactDOM;
Loading

0 comments on commit dcfd7c0

Please sign in to comment.