Skip to content

Commit fa7a97f

Browse files
authored
Run 90% of tests on compiled bundles (both development and production) (#11633)
* Extract Jest config into a separate file * Refactor Jest scripts directory structure Introduces a more consistent naming scheme. * Add yarn test-bundles and yarn test-prod-bundles Only files ending with -test.public.js are opted in (so far we don't have any). * Fix error decoding for production bundles GCC seems to remove `new` from `new Error()` which broke our proxy. * Build production version of react-noop-renderer This lets us test more bundles. * Switch to blacklist (exclude .private.js tests) * Rename tests that are currently broken against bundles to *-test.internal.js Some of these are using private APIs. Some have other issues. * Add bundle tests to CI * Split private and public ReactJSXElementValidator tests * Remove internal deps from ReactServerRendering-test and make it public * Only run tests directly in __tests__ This lets us share code between test files by placing them in __tests__/utils. * Remove ExecutionEnvironment dependency from DOMServerIntegrationTest It's not necessary since Stack. * Split up ReactDOMServerIntegration into test suite and utilities This enables us to further split it down. Good both for parallelization and extracting public parts. * Split Fragment tests from other DOMServerIntegration tests This enables them to opt other DOMServerIntegration tests into bundle testing. * Split ReactDOMServerIntegration into different test files It was way too slow to run all these in sequence. * Don't reset the cache twice in DOMServerIntegration tests We used to do this to simulate testing separate bundles. But now we actually *do* test bundles. So there is no need for this, as it makes tests slower. * Rename test-bundles* commands to test-build* Also add test-prod-build as alias for test-build-prod because I keep messing them up. * Use regenerator polyfill for react-noop This fixes other issues and finally lets us run ReactNoop tests against a prod bundle. * Run most Incremental tests against bundles Now that GCC generator issue is fixed, we can do this. I split ErrorLogging test separately because it does mocking. Other error handling tests don't need it. * Update sizes * Fix ReactMount test * Enable ReactDOMComponent test * Fix a warning issue uncovered by flat bundle testing With flat bundles, we couldn't produce a good warning for <div onclick={}> on SSR because it doesn't use the event system. However the issue was not visible in normal Jest runs because the event plugins have been injected by the time the test ran. To solve this, I am explicitly passing whether event system is available as an argument to the hook. This makes the behavior consistent between source and bundle tests. Then I change the tests to document the actual logic and _attempt_ to show a nice message (e.g. we know for sure `onclick` is a bad event but we don't know the right name for it on the server so we just say a generic message about camelCase naming convention).
1 parent e949d57 commit fa7a97f

File tree

65 files changed

+5081
-3681
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+5081
-3681
lines changed

package.json

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"babel-plugin-transform-es3-property-literals": "^6.5.0",
3636
"babel-plugin-transform-object-rest-spread": "^6.6.5",
3737
"babel-plugin-transform-react-jsx-source": "^6.8.0",
38+
"babel-plugin-transform-regenerator": "^6.26.0",
3839
"babel-preset-react": "^6.5.0",
3940
"babel-traverse": "^6.9.0",
4041
"babylon": "6.15.0",
@@ -103,40 +104,14 @@
103104
"linc": "node ./scripts/tasks/linc.js",
104105
"lint": "node ./scripts/tasks/eslint.js",
105106
"postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
106-
"test": "cross-env NODE_ENV=development jest",
107-
"test-prod": "cross-env NODE_ENV=production jest",
107+
"test": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js",
108+
"test-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source.js",
109+
"test-prod-build": "yarn test-build-prod",
110+
"test-build": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build.js",
111+
"test-build-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.build.js",
108112
"flow": "node ./scripts/tasks/flow.js",
109113
"prettier": "node ./scripts/prettier/index.js write-changed",
110114
"prettier-all": "node ./scripts/prettier/index.js write",
111115
"version-check": "node ./scripts/tasks/version-check.js"
112-
},
113-
"jest": {
114-
"modulePathIgnorePatterns": [
115-
"<rootDir>/scripts/rollup/shims/",
116-
"<rootDir>/scripts/bench/"
117-
],
118-
"transform": {
119-
".*": "./scripts/jest/preprocessor.js"
120-
},
121-
"setupFiles": [
122-
"./scripts/jest/environment.js"
123-
],
124-
"setupTestFrameworkScriptFile": "./scripts/jest/test-framework-setup.js",
125-
"testRegex": "/__tests__/.*(\\.js|\\.coffee|[^d]\\.ts)$",
126-
"moduleFileExtensions": [
127-
"js",
128-
"json",
129-
"node",
130-
"coffee",
131-
"ts"
132-
],
133-
"roots": [
134-
"<rootDir>/packages",
135-
"<rootDir>/scripts"
136-
],
137-
"collectCoverageFrom": [
138-
"packages/**/*.js"
139-
],
140-
"timers": "fake"
141116
}
142117
}

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1709,15 +1709,25 @@ describe('ReactDOMComponent', () => {
17091709
it('should warn about incorrect casing on event handlers (ssr)', () => {
17101710
spyOnDev(console, 'error');
17111711
ReactDOMServer.renderToString(
1712-
React.createElement('input', {type: 'text', onclick: '1'}),
1712+
React.createElement('input', {type: 'text', oninput: '1'}),
17131713
);
17141714
ReactDOMServer.renderToString(
17151715
React.createElement('input', {type: 'text', onKeydown: '1'}),
17161716
);
17171717
if (__DEV__) {
1718-
expect(console.error.calls.count()).toBe(2);
1719-
expect(console.error.calls.argsFor(0)[0]).toContain('onClick');
1720-
expect(console.error.calls.argsFor(1)[0]).toContain('onKeyDown');
1718+
expect(console.error.calls.count()).toBe(1);
1719+
expect(console.error.calls.argsFor(0)[0]).toContain(
1720+
'Invalid event handler property `oninput`. ' +
1721+
'React events use the camelCase naming convention, ' +
1722+
// Note: we don't know the right event name so we
1723+
// use a generic one (onClick) as a suggestion.
1724+
// This is because we don't bundle the event system
1725+
// on the server.
1726+
'for example `onClick`.',
1727+
);
1728+
// We can't warn for `onKeydown` on the server because
1729+
// there is no way tell if this is a valid event or not
1730+
// without access to the event system (which we don't bundle).
17211731
}
17221732
});
17231733

@@ -1735,14 +1745,14 @@ describe('ReactDOMComponent', () => {
17351745
it('should warn about incorrect casing on event handlers', () => {
17361746
spyOnDev(console, 'error');
17371747
ReactTestUtils.renderIntoDocument(
1738-
React.createElement('input', {type: 'text', onclick: '1'}),
1748+
React.createElement('input', {type: 'text', oninput: '1'}),
17391749
);
17401750
ReactTestUtils.renderIntoDocument(
17411751
React.createElement('input', {type: 'text', onKeydown: '1'}),
17421752
);
17431753
if (__DEV__) {
17441754
expect(console.error.calls.count()).toBe(2);
1745-
expect(console.error.calls.argsFor(0)[0]).toContain('onClick');
1755+
expect(console.error.calls.argsFor(0)[0]).toContain('onInput');
17461756
expect(console.error.calls.argsFor(1)[0]).toContain('onKeyDown');
17471757
}
17481758
});
@@ -1860,15 +1870,20 @@ describe('ReactDOMComponent', () => {
18601870
it('gives source code refs for unknown prop warning (ssr)', () => {
18611871
spyOnDev(console, 'error');
18621872
ReactDOMServer.renderToString(<div class="paladin" />);
1863-
ReactDOMServer.renderToString(<input type="text" onclick="1" />);
1873+
ReactDOMServer.renderToString(<input type="text" oninput="1" />);
18641874
if (__DEV__) {
18651875
expect(console.error.calls.count()).toBe(2);
18661876
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
18671877
'Warning: Invalid DOM property `class`. Did you mean `className`?\n in div (at **)',
18681878
);
18691879
expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
1870-
'Warning: Invalid event handler property `onclick`. Did you mean ' +
1871-
'`onClick`?\n in input (at **)',
1880+
'Warning: Invalid event handler property `oninput`. ' +
1881+
// Note: we don't know the right event name so we
1882+
// use a generic one (onClick) as a suggestion.
1883+
// This is because we don't bundle the event system
1884+
// on the server.
1885+
'React events use the camelCase naming convention, for example `onClick`.' +
1886+
'\n in input (at **)',
18721887
);
18731888
}
18741889
});

0 commit comments

Comments
 (0)