{"body":"","files":[{"status":"M","path":"packages\/react\/src\/__tests__\/ReactContextValidator-test.js"}],"commit":{"shortRevision":"0745e6bee9","subject":"Remove usage of ReactTestUtils from ReactContextValidator (#28329)","authorEmail":"silbermann.sebastian@gmail.com","authoredAt":"2024-02-15T19:14:35+01:00","authorName":"Sebastian Silbermann","revision":"0745e6bee9edb9842dfa7efa6f9835e5be6d8b98"},"parents":["710d5137e27db578dfec723b2c006821a1a61973"],"patch":"diff --git a\/packages\/react\/src\/__tests__\/ReactContextValidator-test.js b\/packages\/react\/src\/__tests__\/ReactContextValidator-test.js\nindex f8edacb25a..5e79635a68 100644\n--- a\/packages\/react\/src\/__tests__\/ReactContextValidator-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactContextValidator-test.js\n@@ -18,7 +18,6 @@\n let PropTypes;\n let React;\n let ReactDOMClient;\n-let ReactTestUtils;\n let act;\n \n describe('ReactContextValidator', () => {\n@@ -28,7 +27,6 @@ describe('ReactContextValidator', () => {\n PropTypes = require('prop-types');\n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n- ReactTestUtils = require('react-dom\/test-utils');\n act = require('internal-test-utils').act;\n });\n \n@@ -36,7 +34,7 @@ describe('ReactContextValidator', () => {\n \/\/ ensure that this is not required for ES6 classes with Flow.\n \n \/\/ @gate !disableLegacyContext\n- it('should filter out context not in contextTypes', () => {\n+ it('should filter out context not in contextTypes', async () => {\n class Component extends React.Component {\n render() {\n return

;\n@@ -65,9 +63,14 @@ describe('ReactContextValidator', () => {\n bar: PropTypes.number,\n };\n \n- const instance = ReactTestUtils.renderIntoDocument(\n- ,\n- );\n+ let instance;\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ (instance = current)} \/>,\n+ );\n+ });\n expect(instance.childRef.current.context).toEqual({foo: 'abc'});\n });\n \n@@ -160,7 +163,7 @@ describe('ReactContextValidator', () => {\n \/\/ TODO (bvaughn) Remove this test and the associated behavior in the future.\n \/\/ It has only been added in Fiber to match the (unintentional) behavior in Stack.\n \/\/ @gate !disableLegacyContext || !__DEV__\n- it('should warn (but not error) if getChildContext method is missing', () => {\n+ it('should warn (but not error) if getChildContext method is missing', async () => {\n class ComponentA extends React.Component {\n static childContextTypes = {\n foo: PropTypes.string.isRequired,\n@@ -178,16 +181,32 @@ describe('ReactContextValidator', () => {\n }\n }\n \n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: ComponentA.childContextTypes is specified but there is no ' +\n 'getChildContext() method on the instance. You can either define ' +\n 'getChildContext() on ComponentA or remove childContextTypes from it.',\n );\n \n \/\/ Warnings should be deduped by component type\n- ReactTestUtils.renderIntoDocument();\n+ let container = document.createElement('div');\n+ let root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n \n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n+ await expect(async () => {\n+ container = document.createElement('div');\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: ComponentB.childContextTypes is specified but there is no ' +\n 'getChildContext() method on the instance. You can either define ' +\n 'getChildContext() on ComponentB or remove childContextTypes from it.',\n@@ -197,7 +216,7 @@ describe('ReactContextValidator', () => {\n \/\/ TODO (bvaughn) Remove this test and the associated behavior in the future.\n \/\/ It has only been added in Fiber to match the (unintentional) behavior in Stack.\n \/\/ @gate !disableLegacyContext\n- it('should pass parent context if getChildContext method is missing', () => {\n+ it('should pass parent context if getChildContext method is missing', async () => {\n class ParentContextProvider extends React.Component {\n static childContextTypes = {\n foo: PropTypes.string,\n@@ -233,9 +252,13 @@ describe('ReactContextValidator', () => {\n foo: PropTypes.string.isRequired,\n };\n \n- expect(() =>\n- ReactTestUtils.renderIntoDocument(),\n- ).toErrorDev([\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev([\n 'Warning: MiddleMissingContext.childContextTypes is specified but there is no ' +\n 'getChildContext() method on the instance. You can either define getChildContext() ' +\n 'on MiddleMissingContext or remove childContextTypes from it.',\n@@ -366,7 +389,7 @@ describe('ReactContextValidator', () => {\n });\n \n \/\/ @gate !disableLegacyContext || !__DEV__\n- it('should warn if both contextType and contextTypes are defined', () => {\n+ it('should warn if both contextType and contextTypes are defined', async () => {\n const Context = React.createContext();\n \n class ParentContextProvider extends React.Component {\n@@ -402,38 +425,50 @@ describe('ReactContextValidator', () => {\n }\n }\n \n- expect(() =>\n- ReactTestUtils.renderIntoDocument(\n- \n- \n- <\/ParentContextProvider>,\n- ),\n- ).toErrorDev(\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/ParentContextProvider>,\n+ );\n+ });\n+ }).toErrorDev(\n 'Warning: ComponentA declares both contextTypes and contextType static properties. ' +\n 'The legacy contextTypes property will be ignored.',\n );\n \n \/\/ Warnings should be deduped by component type\n- ReactTestUtils.renderIntoDocument(\n- \n- \n- <\/ParentContextProvider>,\n- );\n-\n- expect(() =>\n- ReactTestUtils.renderIntoDocument(\n+ let container = document.createElement('div');\n+ let root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n \n- \n+ \n <\/ParentContextProvider>,\n- ),\n- ).toErrorDev(\n+ );\n+ });\n+\n+ await expect(async () => {\n+ container = document.createElement('div');\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render(\n+ \n+ \n+ <\/ParentContextProvider>,\n+ );\n+ });\n+ }).toErrorDev(\n 'Warning: ComponentB declares both contextTypes and contextType static properties. ' +\n 'The legacy contextTypes property will be ignored.',\n );\n });\n \n \/\/ @gate enableRenderableContext || !__DEV__\n- it('should warn if an invalid contextType is defined', () => {\n+ it('should warn if an invalid contextType is defined', async () => {\n const Context = React.createContext();\n class ComponentA extends React.Component {\n static contextType = Context.Consumer;\n@@ -442,16 +477,23 @@ describe('ReactContextValidator', () => {\n }\n }\n \n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n }).toErrorDev(\n 'Warning: ComponentA defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext(). ' +\n 'Did you accidentally pass the Context.Consumer instead?',\n );\n \n- \/\/ Warnings should be deduped by component type\n- ReactTestUtils.renderIntoDocument();\n+ let container = document.createElement('div');\n+ let root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n \n class ComponentB extends React.Component {\n static contextType = Context.Provider;\n@@ -459,23 +501,30 @@ describe('ReactContextValidator', () => {\n return

;\n }\n }\n- \/\/ This doesn't warn since Context.Provider === Context now.\n- ReactTestUtils.renderIntoDocument();\n+ container = document.createElement('div');\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n });\n \n- it('should not warn when class contextType is null', () => {\n+ it('should not warn when class contextType is null', async () => {\n class Foo extends React.Component {\n static contextType = null; \/\/ Handy for conditional declaration\n render() {\n return this.context.hello.world;\n }\n }\n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n- }).toThrow(\"Cannot read property 'world' of undefined\");\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).rejects.toThrow(\"Cannot read properties of undefined (reading 'world')\");\n });\n \n- it('should warn when class contextType is undefined', () => {\n+ it('should warn when class contextType is undefined', async () => {\n class Foo extends React.Component {\n \/\/ This commonly happens with circular deps\n \/\/ https:\/\/github.com\/facebook\/react\/issues\/13969\n@@ -485,10 +534,16 @@ describe('ReactContextValidator', () => {\n }\n }\n \n- expect(() => {\n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n- }).toThrow(\"Cannot read property 'world' of undefined\");\n+ await expect(async () => {\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).rejects.toThrow(\n+ \"Cannot read properties of undefined (reading 'world')\",\n+ );\n }).toErrorDev(\n 'Foo defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext(). ' +\n@@ -499,7 +554,7 @@ describe('ReactContextValidator', () => {\n );\n });\n \n- it('should warn when class contextType is an object', () => {\n+ it('should warn when class contextType is an object', async () => {\n class Foo extends React.Component {\n \/\/ Can happen due to a typo\n static contextType = {\n@@ -511,10 +566,16 @@ describe('ReactContextValidator', () => {\n }\n }\n \n- expect(() => {\n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n- }).toThrow(\"Cannot read property 'hello' of undefined\");\n+ await expect(async () => {\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).rejects.toThrow(\n+ \"Cannot read properties of undefined (reading 'hello')\",\n+ );\n }).toErrorDev(\n 'Foo defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext(). ' +\n@@ -522,7 +583,7 @@ describe('ReactContextValidator', () => {\n );\n });\n \n- it('should warn when class contextType is a primitive', () => {\n+ it('should warn when class contextType is a primitive', async () => {\n class Foo extends React.Component {\n static contextType = 'foo';\n render() {\n@@ -530,10 +591,16 @@ describe('ReactContextValidator', () => {\n }\n }\n \n- expect(() => {\n- expect(() => {\n- ReactTestUtils.renderIntoDocument();\n- }).toThrow(\"Cannot read property 'world' of undefined\");\n+ await expect(async () => {\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).rejects.toThrow(\n+ \"Cannot read properties of undefined (reading 'world')\",\n+ );\n }).toErrorDev(\n 'Foo defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext(). ' +\n@@ -541,7 +608,7 @@ describe('ReactContextValidator', () => {\n );\n });\n \n- it('should warn if you define contextType on a function component', () => {\n+ it('should warn if you define contextType on a function component', async () => {\n const Context = React.createContext();\n \n function ComponentA() {\n@@ -554,14 +621,30 @@ describe('ReactContextValidator', () => {\n }\n ComponentB.contextType = Context;\n \n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n+ await expect(async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: ComponentA: Function components do not support contextType.',\n );\n \n \/\/ Warnings should be deduped by component type\n- ReactTestUtils.renderIntoDocument();\n+ let container = document.createElement('div');\n+ let root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n \n- expect(() => ReactTestUtils.renderIntoDocument()).toErrorDev(\n+ await expect(async () => {\n+ container = document.createElement('div');\n+ root = ReactDOMClient.createRoot(container);\n+ await act(() => {\n+ root.render();\n+ });\n+ }).toErrorDev(\n 'Warning: ComponentB: Function components do not support contextType.',\n );\n });\n"}

dillon1000/react

Files changed