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
- uses __TEST__ in the work loop for a branch (we can change this, I added it to verify it works)
- exports act on ReactDOM in these testing builds
- uses the new test builds in fixtures/dom

In the next PR, we'll switch out all our own internal tests to use this new testing build
  • Loading branch information
threepointone committed Jan 27, 2020
1 parent cf00812 commit b935ad4
Show file tree
Hide file tree
Showing 16 changed files with 438 additions and 75 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Expand Up @@ -168,6 +168,7 @@ module.exports = {
__PROFILE__: true,
__UMD__: true,
__EXPERIMENTAL__: true,
__TEST__: true,
trustedTypes: true,
},
};
17 changes: 10 additions & 7 deletions fixtures/dom/src/__tests__/nested-act-test.js
Expand Up @@ -8,18 +8,21 @@
*/

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

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

jest.mock('react', () => require.requireActual('react/testing'));
jest.mock('react-dom', () => require.requireActual('react-dom/testing'));

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');
});

Expand All @@ -33,7 +36,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([]);
Expand All @@ -42,7 +45,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 />);
});
Expand All @@ -59,7 +62,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');
});

Expand All @@ -77,7 +80,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([]);
Expand All @@ -86,7 +89,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 />);
});
Expand Down
27 changes: 14 additions & 13 deletions fixtures/dom/src/__tests__/wrong-act-test.js
Expand Up @@ -12,13 +12,15 @@ 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/testing'));
jest.mock('react-dom', () => require.requireActual('react-dom/testing'));

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

function App(props) {
Expand All @@ -32,7 +34,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);
Expand Down Expand Up @@ -70,8 +71,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'));
});
});

Expand All @@ -86,7 +87,7 @@ it('resets correctly across renderers', () => {
React.useEffect(() => {}, []);
return null;
}
TestUtils.act(() => {
ReactDOM.act(() => {
TestRenderer.act(() => {});
expect(() => {
TestRenderer.create(<Effecty />);
Expand All @@ -99,7 +100,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,
Expand All @@ -113,7 +114,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);
Expand All @@ -123,7 +124,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()"], {
Expand All @@ -134,7 +135,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()"], {
Expand All @@ -151,15 +152,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'));
});
});

Expand All @@ -171,7 +172,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 />);
});
});
Expand Down
3 changes: 3 additions & 0 deletions packages/react-dom/npm/testing.js
@@ -0,0 +1,3 @@
'use strict';

module.exports = require('./cjs/react-dom.testing.js');
1 change: 1 addition & 0 deletions packages/react-dom/package.json
Expand Up @@ -34,6 +34,7 @@
"server.js",
"server.browser.js",
"server.node.js",
"testing.js",
"test-utils.js",
"unstable-fire.js",
"unstable-fizz.js",
Expand Down

0 comments on commit b935ad4

Please sign in to comment.