Add test selectors to experimental build #22760

bvaughn · 2021-11-15T13:52:43Z

I'd like to investigate what it might look like to write DevTools e2e tests using these selectors.

This change adds a new react-dom/unstable_testing entry point but I believe its contents will exactly match react-dom/index for the stable build. (The experimental build will have the added new selector APIs.) See below on testing/verification of this assumption.

If we think it's important to not even include this file, I can look into that– not sure if our current build script supports this functionality at the moment though.

To test the result of this change on the built bundles, I ran:

yarn build-combined react-dom/testing  --type=NODE

Then compared build/oss-experimental/react-dom and build/oss-stable/react-dom.

The experimental build contains the following exports:

exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
exports.createComponentSelector = createComponentSelector;
exports.createHasPseudoClassSelector = createHasPseudoClassSelector;
exports.createPortal = createPortal$1;
exports.createRoleSelector = createRoleSelector;
exports.createRoot = createRoot;
exports.createTestNameSelector = createTestNameSelector;
exports.createTextSelector = createTextSelector;
exports.findAllNodes = findAllNodes;
exports.findBoundingRects = findBoundingRects;
exports.findDOMNode = findDOMNode;
exports.flushSync = flushSync$1;
exports.focusWithin = focusWithin;
exports.getFindAllNodesFailureDescription = getFindAllNodesFailureDescription;
exports.hydrate = hydrate;
exports.hydrateRoot = hydrateRoot;
exports.observeVisibleRects = observeVisibleRects;
exports.render = render;
exports.unmountComponentAtNode = unmountComponentAtNode;
exports.unstable_batchedUpdates = batchedUpdates$1;
exports.unstable_flushControlled = flushControlled;
exports.unstable_renderSubtreeIntoContainer = renderSubtreeIntoContainer;
exports.unstable_runWithPriority = runWithPriority;
exports.version = ReactVersion;

And the stable build has the following:

exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
exports.createPortal = createPortal$1;
exports.createRoot = createRoot;
exports.findDOMNode = findDOMNode;
exports.flushSync = flushSync$1;
exports.hydrate = hydrate;
exports.hydrateRoot = hydrateRoot;
exports.render = render;
exports.unmountComponentAtNode = unmountComponentAtNode;
exports.unstable_batchedUpdates = batchedUpdates$1;
exports.unstable_renderSubtreeIntoContainer = renderSubtreeIntoContainer;
exports.version = ReactVersion;

Note to self, after building this...

yarn build-for-devtools

I played around with this a bit in the test shell like so:

// react-devtools-shell/src/app/index.js

import * as Testing from 'react-dom';
window.Testing = Testing;

// In the console

const iframe = document.getElementById('target');
const testBody = iframe.contentWindow.document.body;
const Testing = iframe.contentWindow.Testing;

const firstToDoItem = Testing.findAllNodes(
  testBody,
  [Testing.createTextSelector('First')]
);

sizebot · 2021-11-15T13:56:52Z

Comparing: 4ff5f57...a4d4e2f

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	129.98 kB	129.98 kB	=	41.56 kB	41.56 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	134.74 kB	134.74 kB	=	42.96 kB	42.96 kB
facebook-www/ReactDOM-prod.classic.js	=	424.31 kB	424.31 kB	=	78.20 kB	78.20 kB
facebook-www/ReactDOM-prod.modern.js	=	412.87 kB	412.87 kB	=	76.47 kB	76.47 kB
facebook-www/ReactDOMForked-prod.classic.js	=	424.31 kB	424.31 kB	=	78.20 kB	78.20 kB
oss-experimental/react-dom/cjs/react-dom-testing.development.js	+∞%	0.00 kB	974.23 kB	+∞%	0.00 kB	221.75 kB
oss-experimental/react-dom/cjs/react-dom-testing.production.min.js	+∞%	0.00 kB	135.24 kB	+∞%	0.00 kB	43.54 kB
oss-experimental/react-dom/unstable_testing.js	+∞%	0.00 kB	1.38 kB	+∞%	0.00 kB	0.67 kB
oss-stable-semver/react-dom/cjs/react-dom-testing.development.js	+∞%	0.00 kB	928.96 kB	+∞%	0.00 kB	211.63 kB
oss-stable-semver/react-dom/cjs/react-dom-testing.production.min.js	+∞%	0.00 kB	124.45 kB	+∞%	0.00 kB	39.83 kB
oss-stable-semver/react-dom/unstable_testing.js	+∞%	0.00 kB	1.38 kB	+∞%	0.00 kB	0.67 kB
oss-stable/react-dom/cjs/react-dom-testing.development.js	+∞%	0.00 kB	928.96 kB	+∞%	0.00 kB	211.63 kB
oss-stable/react-dom/cjs/react-dom-testing.production.min.js	+∞%	0.00 kB	124.45 kB	+∞%	0.00 kB	39.83 kB
oss-stable/react-dom/unstable_testing.js	+∞%	0.00 kB	1.38 kB	+∞%	0.00 kB	0.67 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Current	+/- gzip	Current gzip
oss-experimental/react-dom/cjs/react-dom-testing.development.js	+∞%	974.23 kB	+∞%	221.75 kB
oss-experimental/react-dom/cjs/react-dom-testing.production.min.js	+∞%	135.24 kB	+∞%	43.54 kB
oss-experimental/react-dom/unstable_testing.js	+∞%	1.38 kB	+∞%	0.67 kB
oss-stable-semver/react-dom/cjs/react-dom-testing.development.js	+∞%	928.96 kB	+∞%	211.63 kB
oss-stable-semver/react-dom/cjs/react-dom-testing.production.min.js	+∞%	124.45 kB	+∞%	39.83 kB
oss-stable-semver/react-dom/unstable_testing.js	+∞%	1.38 kB	+∞%	0.67 kB
oss-stable/react-dom/cjs/react-dom-testing.development.js	+∞%	928.96 kB	+∞%	211.63 kB
oss-stable/react-dom/cjs/react-dom-testing.production.min.js	+∞%	124.45 kB	+∞%	39.83 kB
oss-stable/react-dom/unstable_testing.js	+∞%	1.38 kB	+∞%	0.67 kB

Generated by 🚫 dangerJS against a4d4e2f

bvaughn · 2021-11-15T21:32:07Z

package.json

@@ -109,7 +109,7 @@
  "scripts": {
    "build": "node ./scripts/rollup/build.js",
    "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",


This change makes yarn build-for-devtools build a tiny bit faster, since we don't need e.g. server rendering stuff.

bvaughn · 2021-11-15T21:32:30Z

packages/react-devtools-shell/webpack.config.js

@@ -55,7 +55,7 @@ const config = {
      react: resolve(builtModulesDir, 'react'),
      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
      'react-devtools-feature-flags': resolveFeatureFlags('shell'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-dom': resolve(builtModulesDir, 'react-dom/testing'),


This makes sure we're building the test shell with the version of react-dom that has the extra test selector APIs.

bvaughn · 2021-11-15T21:33:07Z

packages/react-dom/testing.experimental.js

+  findBoundingRects,
+  focusWithin,
+  observeVisibleRects,
+} from 'react-reconciler/src/ReactFiberReconciler';


This change adds the new APIs to the experimental NPM release.

bvaughn · 2021-11-15T21:33:20Z

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = true;


Probably should have turned this on earlier but didn't matter before.

Should this be set to __EXPERIMENTAL__?

bvaughn · 2021-11-15T21:33:59Z

scripts/rollup/bundles.js

@@ -249,7 +249,7 @@ const bundles = [
  /******* React DOM - www - Testing *******/
  {
    moduleType: RENDERER,
-    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, NODE_DEV, NODE_PROD],


This adds the react-dom/testing entry point to the NPM build. I wish we could only do this for the __EXPERIMENTAL__ release channel but I don't think that's possible with our current Rollup configuration?

As it stands, this would add a /testing.jsentrypoint to the react-dom stable release but its exports would exactly match react-dom/index.

Let's rename to unstable_testing in this case? We shouldn't ship it in a way that seems usable.

Good suggestion.

Little weird that source paths/tests will refer to react-dom/testing but built stuff will need to refer to react-dom/unstable_testing but it's still an improvement.

bvaughn · 2021-11-16T19:57:03Z

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = __EXPERIMENTAL__;


This probably should have been flipped on before.

Summary: This sync includes the following changes: - **[c1220ebdd](facebook/react@c1220ebdd )**: treat empty string as null ([#22807](facebook/react#22807)) //<salazarm>// - **[09d9b1775](facebook/react@09d9b1775 )**: Update deprecated features in ESLint configuration files. ([#22767](facebook/react#22767)) //<Esteban>// - **[bddbfb86d](facebook/react@bddbfb86d )**: Revert "Fix Node package.json ./ exports deprecation warning ([#22783](facebook/react#22783))" ([#22792](facebook/react#22792)) //<Sebastian Silbermann>// - **[b831aec48](facebook/react@b831aec48 )**: chore(fast-refresh): double check wasMounted ([#22740](facebook/react#22740)) //<anc95>// - **[8edeb787b](facebook/react@8edeb787b )**: Fix Node package.json ./ exports deprecation warning ([#22783](facebook/react#22783)) //<Rin Arakaki>// - **[fdc1d617a](facebook/react@fdc1d617a )**: Flag for client render fallback behavior on hydration mismatch ([#22787](facebook/react#22787)) //<salazarm>// - **[aa19d569b](facebook/react@aa19d569b )**: Add test selectors to experimental build ([#22760](facebook/react#22760)) //<Brian Vaughn>// - **[520ffc77a](facebook/react@520ffc77a )**: Use globalThis if possible for native fetch in browser build ([#22777](facebook/react#22777)) //<Jiachi Liu>// - **[afbc2d08f](facebook/react@afbc2d08f )**: Remove unused react-internal/invariant-args ESLint rule. ([#22778](facebook/react#22778)) //<Esteban>// - **[ca94e2680](facebook/react@ca94e2680 )**: Remove 'packages/shared/invariant.js' ([#22779](facebook/react#22779)) //<Esteban>// - **[83564712b](facebook/react@83564712b )**: Move SuspenseList to experimental channel ([#22765](facebook/react#22765)) //<Andrew Clark>// - **[d4144e6e5](facebook/react@d4144e6e5 )**: fix : grammatical typo for test description ([#22764](facebook/react#22764)) //<Brijesh Prasad>// - **[0b329511b](facebook/react@0b329511b )**: chore: fix comment typo ([#22657](facebook/react#22657)) //<Han Han>// - **[e6f60d2ad](facebook/react@e6f60d2ad )**: fix typos ([#22715](facebook/react#22715)) //<180909>// Changelog: [General][Changed] - React Native sync for revisions c0c71a8...c1220eb jest_e2e[run_all_tests] Reviewed By: yungsters Differential Revision: D32646433 fbshipit-source-id: c534ee7a17141634700c90fc2c7b34bfbe17887a

Summary: This sync includes the following changes: - **[c1220ebdd](facebook/react@c1220ebdd )**: treat empty string as null ([facebook#22807](facebook/react#22807)) //<salazarm>// - **[09d9b1775](facebook/react@09d9b1775 )**: Update deprecated features in ESLint configuration files. ([facebook#22767](facebook/react#22767)) //<Esteban>// - **[bddbfb86d](facebook/react@bddbfb86d )**: Revert "Fix Node package.json ./ exports deprecation warning ([facebook#22783](facebook/react#22783))" ([facebook#22792](facebook/react#22792)) //<Sebastian Silbermann>// - **[b831aec48](facebook/react@b831aec48 )**: chore(fast-refresh): double check wasMounted ([facebook#22740](facebook/react#22740)) //<anc95>// - **[8edeb787b](facebook/react@8edeb787b )**: Fix Node package.json ./ exports deprecation warning ([facebook#22783](facebook/react#22783)) //<Rin Arakaki>// - **[fdc1d617a](facebook/react@fdc1d617a )**: Flag for client render fallback behavior on hydration mismatch ([facebook#22787](facebook/react#22787)) //<salazarm>// - **[aa19d569b](facebook/react@aa19d569b )**: Add test selectors to experimental build ([facebook#22760](facebook/react#22760)) //<Brian Vaughn>// - **[520ffc77a](facebook/react@520ffc77a )**: Use globalThis if possible for native fetch in browser build ([facebook#22777](facebook/react#22777)) //<Jiachi Liu>// - **[afbc2d08f](facebook/react@afbc2d08f )**: Remove unused react-internal/invariant-args ESLint rule. ([facebook#22778](facebook/react#22778)) //<Esteban>// - **[ca94e2680](facebook/react@ca94e2680 )**: Remove 'packages/shared/invariant.js' ([facebook#22779](facebook/react#22779)) //<Esteban>// - **[83564712b](facebook/react@83564712b )**: Move SuspenseList to experimental channel ([facebook#22765](facebook/react#22765)) //<Andrew Clark>// - **[d4144e6e5](facebook/react@d4144e6e5 )**: fix : grammatical typo for test description ([facebook#22764](facebook/react#22764)) //<Brijesh Prasad>// - **[0b329511b](facebook/react@0b329511b )**: chore: fix comment typo ([facebook#22657](facebook/react#22657)) //<Han Han>// - **[e6f60d2ad](facebook/react@e6f60d2ad )**: fix typos ([facebook#22715](facebook/react#22715)) //<180909>// Changelog: [General][Changed] - React Native sync for revisions c0c71a8...c1220eb jest_e2e[run_all_tests] Reviewed By: yungsters Differential Revision: D32646433 fbshipit-source-id: c534ee7a17141634700c90fc2c7b34bfbe17887a

…ok#22760

…#22961)

…ok#22760 (facebook#22961)

This change adds a new "react-dom/unstable_testing" entry point but I believe its contents will exactly match "react-dom/index" for the stable build. (The experimental build will have the added new selector APIs.)

…ok#22760 (facebook#22961)

bvaughn requested review from sebmarkbage, gaearon, jstejada, rickhanlonii, lunaruan and acdlite November 15, 2021 13:52

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Nov 15, 2021

bvaughn marked this pull request as draft November 15, 2021 14:16

This was referenced Nov 15, 2021

Add e2e tests for inline package #22646

Closed

[RFC] Codemod invariant -> throw new Error #22435

Merged

bvaughn force-pushed the react-dom/testing branch 2 times, most recently from 32622ae to 50f6211 Compare November 15, 2021 21:29

bvaughn commented Nov 15, 2021

View reviewed changes

bvaughn force-pushed the react-dom/testing branch from 50f6211 to 2b840f2 Compare November 16, 2021 19:37

bvaughn marked this pull request as ready for review November 16, 2021 19:42

bvaughn force-pushed the react-dom/testing branch from 2b840f2 to cd2f004 Compare November 16, 2021 19:46

Add test selectors to experimental build

a4d4e2f

bvaughn force-pushed the react-dom/testing branch from cd2f004 to a4d4e2f Compare November 16, 2021 19:52

bvaughn commented Nov 16, 2021

View reviewed changes

gaearon approved these changes Nov 16, 2021

View reviewed changes

bvaughn merged commit aa19d56 into facebook:main Nov 16, 2021

bvaughn deleted the react-dom/testing branch November 16, 2021 21:27

bvaughn mentioned this pull request Dec 15, 2021

[react-devtools-inline][4.22.0]: broken published package #22958

Closed

bvaughn pushed a commit to bvaughn/react that referenced this pull request Dec 15, 2021

Revert changes to react-devtools-inline Webpack config from PR facebo…

b92d747

…ok#22760

bvaughn pushed a commit that referenced this pull request Dec 15, 2021

Revert changes to react-devtools-inline Webpack config from PR #22760 (…

b10c378

…#22961)

nevilm-lt pushed a commit to nevilm-lt/react that referenced this pull request Mar 14, 2022

Revert changes to react-devtools-inline Webpack config from PR facebo…

738f999

…ok#22760 (facebook#22961)

zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022

Revert changes to react-devtools-inline Webpack config from PR facebo…

d3d90f7

…ok#22760 (facebook#22961)

nevilm-lt pushed a commit to nevilm-lt/react that referenced this pull request Apr 22, 2022

Revert changes to react-devtools-inline Webpack config from PR facebo…

2b567b9

…ok#22760 (facebook#22961)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add test selectors to experimental build #22760

Add test selectors to experimental build #22760

bvaughn commented Nov 15, 2021 •

edited

Loading

sizebot commented Nov 15, 2021 •

edited

Loading

bvaughn Nov 15, 2021

bvaughn Nov 15, 2021

bvaughn Nov 15, 2021

bvaughn Nov 15, 2021

gaearon Nov 16, 2021

bvaughn Nov 15, 2021 •

edited

Loading

gaearon Nov 16, 2021

bvaughn Nov 16, 2021 •

edited

Loading

bvaughn Nov 16, 2021

Add test selectors to experimental build #22760

Add test selectors to experimental build #22760

Conversation

bvaughn commented Nov 15, 2021 • edited Loading

sizebot commented Nov 15, 2021 • edited Loading

Critical size changes

Significant size changes

bvaughn Nov 15, 2021

Choose a reason for hiding this comment

bvaughn Nov 15, 2021

Choose a reason for hiding this comment

bvaughn Nov 15, 2021

Choose a reason for hiding this comment

bvaughn Nov 15, 2021

Choose a reason for hiding this comment

gaearon Nov 16, 2021

Choose a reason for hiding this comment

bvaughn Nov 15, 2021 • edited Loading

Choose a reason for hiding this comment

gaearon Nov 16, 2021

Choose a reason for hiding this comment

bvaughn Nov 16, 2021 • edited Loading

Choose a reason for hiding this comment

bvaughn Nov 16, 2021

Choose a reason for hiding this comment

bvaughn commented Nov 15, 2021 •

edited

Loading

sizebot commented Nov 15, 2021 •

edited

Loading

bvaughn Nov 15, 2021 •

edited

Loading

bvaughn Nov 16, 2021 •

edited

Loading