Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add test selectors to experimental build #22760

Merged
merged 1 commit into from
Nov 16, 2021

Conversation

bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Nov 15, 2021

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
Copy link

sizebot commented Nov 15, 2021

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 +/- Base Current +/- gzip Base gzip Current gzip
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

Generated by 🚫 dangerJS against a4d4e2f

@bvaughn bvaughn marked this pull request as draft November 15, 2021 14:16
@bvaughn bvaughn force-pushed the react-dom/testing branch 2 times, most recently from 32622ae to 50f6211 Compare November 15, 2021 21:29
@@ -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/",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -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'),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

findBoundingRects,
focusWithin,
observeVisibleRects,
} from 'react-reconciler/src/ReactFiberReconciler';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be set to __EXPERIMENTAL__?

@@ -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],
Copy link
Contributor Author

@bvaughn bvaughn Nov 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@bvaughn bvaughn Nov 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 bvaughn marked this pull request as ready for review November 16, 2021 19:42
@@ -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__;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably should have been flipped on before.

@bvaughn bvaughn merged commit aa19d56 into facebook:main Nov 16, 2021
@bvaughn bvaughn deleted the react-dom/testing branch November 16, 2021 21:27
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Nov 29, 2021
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
nawbc pushed a commit to NawbExplorer/react-native that referenced this pull request Dec 7, 2021
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
bvaughn pushed a commit to bvaughn/react that referenced this pull request Dec 15, 2021
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
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.)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants