containing any provided children.
- *
- * @param {object} module the mock function object exported from a
- * module that defines the component to be mocked
- * @param {?string} mockTagName optional dummy root tag name to return
- * from render method (overrides
- * module.mockTagName if provided)
- * @return {object} the ReactTestUtils object (for chaining)
- */
- mockComponent: function(module, mockTagName) {
- if (__DEV__) {
- if (!hasWarnedAboutDeprecatedMockComponent) {
- hasWarnedAboutDeprecatedMockComponent = true;
- console.warn(
- 'ReactTestUtils.mockComponent() is deprecated. ' +
- 'Use shallow rendering or jest.mock() instead.\n\n' +
- 'See https://fb.me/test-utils-mock-component for more information.',
+/**
+ * Finds all instance of components in the rendered tree that are DOM
+ * components with the class name matching `className`.
+ * @return {array} an array of all the matches.
+ */
+function scryRenderedDOMComponentsWithClass(root, classNames) {
+ validateClassInstance(root, 'scryRenderedDOMComponentsWithClass');
+ return findAllInRenderedTree(root, function(inst) {
+ if (isDOMComponent(inst)) {
+ let className = inst.className;
+ if (typeof className !== 'string') {
+ // SVG, probably.
+ className = inst.getAttribute('class') || '';
+ }
+ const classList = className.split(/\s+/);
+
+ if (!Array.isArray(classNames)) {
+ invariant(
+ classNames !== undefined,
+ 'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
+ 'className as a second argument.',
);
+ classNames = classNames.split(/\s+/);
}
+ return classNames.every(function(name) {
+ return classList.indexOf(name) !== -1;
+ });
}
+ return false;
+ });
+}
- mockTagName = mockTagName || module.mockTagName || 'div';
+/**
+ * Like scryRenderedDOMComponentsWithClass but expects there to be one result,
+ * and returns that one result, or throws exception if there is any other
+ * number of matches besides one.
+ * @return {!ReactDOMComponent} The one match.
+ */
+function findRenderedDOMComponentWithClass(root, className) {
+ validateClassInstance(root, 'findRenderedDOMComponentWithClass');
+ const all = scryRenderedDOMComponentsWithClass(root, className);
+ if (all.length !== 1) {
+ throw new Error(
+ 'Did not find exactly one match (found: ' +
+ all.length +
+ ') ' +
+ 'for class:' +
+ className,
+ );
+ }
+ return all[0];
+}
- module.prototype.render.mockImplementation(function() {
- return React.createElement(mockTagName, null, this.props.children);
- });
+/**
+ * Finds all instance of components in the rendered tree that are DOM
+ * components with the tag name matching `tagName`.
+ * @return {array} an array of all the matches.
+ */
+function scryRenderedDOMComponentsWithTag(root, tagName) {
+ validateClassInstance(root, 'scryRenderedDOMComponentsWithTag');
+ return findAllInRenderedTree(root, function(inst) {
+ return (
+ isDOMComponent(inst) &&
+ inst.tagName.toUpperCase() === tagName.toUpperCase()
+ );
+ });
+}
- return this;
- },
+/**
+ * Like scryRenderedDOMComponentsWithTag but expects there to be one result,
+ * and returns that one result, or throws exception if there is any other
+ * number of matches besides one.
+ * @return {!ReactDOMComponent} The one match.
+ */
+function findRenderedDOMComponentWithTag(root, tagName) {
+ validateClassInstance(root, 'findRenderedDOMComponentWithTag');
+ const all = scryRenderedDOMComponentsWithTag(root, tagName);
+ if (all.length !== 1) {
+ throw new Error(
+ 'Did not find exactly one match (found: ' +
+ all.length +
+ ') ' +
+ 'for tag:' +
+ tagName,
+ );
+ }
+ return all[0];
+}
- nativeTouchData: function(x, y) {
- return {
- touches: [{pageX: x, pageY: y}],
- };
- },
+/**
+ * Finds all instances of components with type equal to `componentType`.
+ * @return {array} an array of all the matches.
+ */
+function scryRenderedComponentsWithType(root, componentType) {
+ validateClassInstance(root, 'scryRenderedComponentsWithType');
+ return findAllInRenderedTree(root, function(inst) {
+ return isCompositeComponentWithType(inst, componentType);
+ });
+}
- Simulate: null,
- SimulateNative: {},
+/**
+ * Same as `scryRenderedComponentsWithType` but expects there to be one result
+ * and returns that one result, or throws exception if there is any other
+ * number of matches besides one.
+ * @return {!ReactComponent} The one match.
+ */
+function findRenderedComponentWithType(root, componentType) {
+ validateClassInstance(root, 'findRenderedComponentWithType');
+ const all = scryRenderedComponentsWithType(root, componentType);
+ if (all.length !== 1) {
+ throw new Error(
+ 'Did not find exactly one match (found: ' +
+ all.length +
+ ') ' +
+ 'for componentType:' +
+ componentType,
+ );
+ }
+ return all[0];
+}
- act,
-};
+/**
+ * Pass a mocked component module to this method to augment it with
+ * useful methods that allow it to be used as a dummy React component.
+ * Instead of rendering as usual, the component will become a simple
+ *
containing any provided children.
+ *
+ * @param {object} module the mock function object exported from a
+ * module that defines the component to be mocked
+ * @param {?string} mockTagName optional dummy root tag name to return
+ * from render method (overrides
+ * module.mockTagName if provided)
+ * @return {object} the ReactTestUtils object (for chaining)
+ */
+function mockComponent(module, mockTagName) {
+ if (__DEV__) {
+ if (!hasWarnedAboutDeprecatedMockComponent) {
+ hasWarnedAboutDeprecatedMockComponent = true;
+ console.warn(
+ 'ReactTestUtils.mockComponent() is deprecated. ' +
+ 'Use shallow rendering or jest.mock() instead.\n\n' +
+ 'See https://fb.me/test-utils-mock-component for more information.',
+ );
+ }
+ }
+
+ mockTagName = mockTagName || module.mockTagName || 'div';
+
+ module.prototype.render.mockImplementation(function() {
+ return React.createElement(mockTagName, null, this.props.children);
+ });
+
+ return this;
+}
+
+function nativeTouchData(x, y) {
+ return {
+ touches: [{pageX: x, pageY: y}],
+ };
+}
+
+const Simulate = {};
+const SimulateNative = {};
/**
* Exports:
*
- * - `ReactTestUtils.Simulate.click(Element)`
- * - `ReactTestUtils.Simulate.mouseMove(Element)`
- * - `ReactTestUtils.Simulate.change(Element)`
+ * - `Simulate.click(Element)`
+ * - `Simulate.mouseMove(Element)`
+ * - `Simulate.change(Element)`
* - ... (All keys from event plugin `eventTypes` objects)
*/
function makeSimulator(eventType) {
@@ -407,7 +397,7 @@ function makeSimulator(eventType) {
'Note that TestUtils.Simulate will not work if you are using shallow rendering.',
);
invariant(
- !ReactTestUtils.isCompositeComponent(domNode),
+ !isCompositeComponent(domNode),
'TestUtils.Simulate expected a DOM node as the first argument but received ' +
'a component instance. Pass the DOM node you wish to simulate the event on instead.',
);
@@ -450,15 +440,13 @@ function makeSimulator(eventType) {
}
function buildSimulators() {
- ReactTestUtils.Simulate = {};
-
let eventType;
for (eventType in eventNameDispatchConfigs) {
/**
* @param {!Element|ReactDOMComponent} domComponentOrNode
* @param {?object} eventData Fake event data to use in SyntheticEvent.
*/
- ReactTestUtils.Simulate[eventType] = makeSimulator(eventType);
+ Simulate[eventType] = makeSimulator(eventType);
}
}
@@ -467,16 +455,16 @@ buildSimulators();
/**
* Exports:
*
- * - `ReactTestUtils.SimulateNative.click(Element/ReactDOMComponent)`
- * - `ReactTestUtils.SimulateNative.mouseMove(Element/ReactDOMComponent)`
- * - `ReactTestUtils.SimulateNative.mouseIn/ReactDOMComponent)`
- * - `ReactTestUtils.SimulateNative.mouseOut(Element/ReactDOMComponent)`
+ * - `SimulateNative.click(Element/ReactDOMComponent)`
+ * - `SimulateNative.mouseMove(Element/ReactDOMComponent)`
+ * - `SimulateNative.mouseIn/ReactDOMComponent)`
+ * - `SimulateNative.mouseOut(Element/ReactDOMComponent)`
* - ... (All keys from `BrowserEventConstants.topLevelTypes`)
*
* Note: Top level event types are a subset of the entire set of handler types
* (which include a broader set of "synthetic" events). For example, onDragDone
* is a synthetic event. Except when testing an event plugin or React's event
- * handling code specifically, you probably want to use ReactTestUtils.Simulate
+ * handling code specifically, you probably want to use Simulate
* to dispatch synthetic events.
*/
@@ -484,7 +472,7 @@ function makeNativeSimulator(eventType, topLevelType) {
return function(domComponentOrNode, nativeEventData) {
const fakeNativeEvent = new Event(eventType);
Object.assign(fakeNativeEvent, nativeEventData);
- if (ReactTestUtils.isDOMComponent(domComponentOrNode)) {
+ if (isDOMComponent(domComponentOrNode)) {
simulateNativeEventOnDOMComponent(
topLevelType,
domComponentOrNode,
@@ -576,10 +564,27 @@ function makeNativeSimulator(eventType, topLevelType) {
* @param {!Element|ReactDOMComponent} domComponentOrNode
* @param {?Event} nativeEventData Fake native event to use in SyntheticEvent.
*/
- ReactTestUtils.SimulateNative[eventType] = makeNativeSimulator(
- eventType,
- topLevelType,
- );
+ SimulateNative[eventType] = makeNativeSimulator(eventType, topLevelType);
});
-export default ReactTestUtils;
+export {
+ renderIntoDocument,
+ isElement,
+ isElementOfType,
+ isDOMComponent,
+ isDOMComponentElement,
+ isCompositeComponent,
+ isCompositeComponentWithType,
+ findAllInRenderedTree,
+ scryRenderedDOMComponentsWithClass,
+ findRenderedDOMComponentWithClass,
+ scryRenderedDOMComponentsWithTag,
+ findRenderedDOMComponentWithTag,
+ scryRenderedComponentsWithType,
+ findRenderedComponentWithType,
+ mockComponent,
+ nativeTouchData,
+ Simulate,
+ SimulateNative,
+ act,
+};
diff --git a/packages/react-dom/test-utils.js b/packages/react-dom/test-utils.js
index 1d4f69189e026..3eaa6b7b8c5d1 100644
--- a/packages/react-dom/test-utils.js
+++ b/packages/react-dom/test-utils.js
@@ -7,10 +7,4 @@
* @flow
*/
-'use strict';
-
-const ReactTestUtils = require('./src/test-utils/ReactTestUtils');
-
-// TODO: decide on the top-level export form.
-// This is hacky but makes it work with both Rollup and Jest.
-module.exports = ReactTestUtils.default || ReactTestUtils;
+export * from './src/test-utils/ReactTestUtils';
diff --git a/packages/react-dom/unstable-fizz.browser.js b/packages/react-dom/unstable-fizz.browser.js
index 4fb175ec6825e..322d4e364e1ae 100644
--- a/packages/react-dom/unstable-fizz.browser.js
+++ b/packages/react-dom/unstable-fizz.browser.js
@@ -7,10 +7,4 @@
* @flow
*/
-'use strict';
-
-const ReactDOMFizzServerBrowser = require('./src/server/ReactDOMFizzServerBrowser');
-
-// TODO: decide on the top-level export form.
-// This is hacky but makes it work with both Rollup and Jest
-module.exports = ReactDOMFizzServerBrowser.default || ReactDOMFizzServerBrowser;
+export * from './src/server/ReactDOMFizzServerBrowser';
diff --git a/packages/react-dom/unstable-fizz.js b/packages/react-dom/unstable-fizz.js
index 81d1ccee698d1..835fb25dca4a3 100644
--- a/packages/react-dom/unstable-fizz.js
+++ b/packages/react-dom/unstable-fizz.js
@@ -7,6 +7,4 @@
* @flow
*/
-'use strict';
-
-module.exports = require('./unstable-fizz.node');
+export * from './unstable-fizz.node';
diff --git a/packages/react-dom/unstable-fizz.node.js b/packages/react-dom/unstable-fizz.node.js
index ef943c74eccf5..ae7462ed70713 100644
--- a/packages/react-dom/unstable-fizz.node.js
+++ b/packages/react-dom/unstable-fizz.node.js
@@ -7,10 +7,4 @@
* @flow
*/
-'use strict';
-
-const ReactDOMFizzServerNode = require('./src/server/ReactDOMFizzServerNode');
-
-// TODO: decide on the top-level export form.
-// This is hacky but makes it work with both Rollup and Jest
-module.exports = ReactDOMFizzServerNode.default || ReactDOMFizzServerNode;
+export * from './src/server/ReactDOMFizzServerNode';
diff --git a/packages/react-dom/unstable-native-dependencies.js b/packages/react-dom/unstable-native-dependencies.js
index d44d492b8f198..ec502fb890690 100644
--- a/packages/react-dom/unstable-native-dependencies.js
+++ b/packages/react-dom/unstable-native-dependencies.js
@@ -7,6 +7,4 @@
* @flow
*/
-'use strict';
-
-module.exports = require('./src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies');
+export * from './src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies';
diff --git a/packages/react-server/src/ReactDOMServerFormatConfig.js b/packages/react-server/src/ReactDOMServerFormatConfig.js
index ece3e63890582..fa94102a98c9a 100644
--- a/packages/react-server/src/ReactDOMServerFormatConfig.js
+++ b/packages/react-server/src/ReactDOMServerFormatConfig.js
@@ -9,7 +9,7 @@
import {convertStringToBuffer} from 'react-server/src/ReactServerHostConfig';
-import ReactDOMServer from 'react-dom/server';
+import {renderToStaticMarkup} from 'react-dom/server';
export function formatChunkAsString(type: string, props: Object): string {
let str = '<' + type + '>';
@@ -31,5 +31,5 @@ export function renderHostChildrenToString(
// so we can't actually reference the renderer here. Instead, we
// should replace this method with a reference to Fizz which
// then uses this file to implement the server renderer.
- return ReactDOMServer.renderToStaticMarkup(children);
+ return renderToStaticMarkup(children);
}
diff --git a/packages/react-test-renderer/index.js b/packages/react-test-renderer/index.js
index 8d1c90e8855ac..61da6c01c1d5e 100644
--- a/packages/react-test-renderer/index.js
+++ b/packages/react-test-renderer/index.js
@@ -7,10 +7,4 @@
* @flow
*/
-'use strict';
-
-const ReactTestRenderer = require('./src/ReactTestRenderer');
-
-// TODO: decide on the top-level export form.
-// This is hacky but makes it work with both Rollup and Jest.
-module.exports = ReactTestRenderer.default || ReactTestRenderer;
+export * from './src/ReactTestRenderer';
diff --git a/packages/react-test-renderer/shallow.js b/packages/react-test-renderer/shallow.js
index 05df5d498fd91..fa548b35732db 100644
--- a/packages/react-test-renderer/shallow.js
+++ b/packages/react-test-renderer/shallow.js
@@ -7,10 +7,4 @@
* @flow
*/
-'use strict';
-
-const ReactShallowRenderer = require('./src/ReactShallowRenderer');
-
-// TODO: decide on the top-level export form.
-// This is hacky but makes it work with both Rollup and Jest.
-module.exports = ReactShallowRenderer.default || ReactShallowRenderer;
+export {default} from './src/ReactShallowRenderer';
diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js
index abdd493704888..20751094fd28a 100644
--- a/packages/react-test-renderer/src/ReactShallowRenderer.js
+++ b/packages/react-test-renderer/src/ReactShallowRenderer.js
@@ -856,4 +856,8 @@ function getMaskedContext(contextTypes, unmaskedContext) {
return context;
}
+// This should probably be a default export and a named export.
+// However, this not how any of other APIs are designed so doesn't line up
+// with our build configs and makes it hard to properly support ES modules
+// and CommonJS.
export default ReactShallowRenderer;
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 0bd57d4702645..18a69c4202111 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -433,138 +433,129 @@ function propsMatch(props: Object, filter: Object): boolean {
return true;
}
-const ReactTestRendererFiber = {
- _Scheduler: Scheduler,
-
- create(element: React$Element
, options: TestRendererOptions) {
- let createNodeMock = defaultTestOptions.createNodeMock;
- let isConcurrent = false;
- if (typeof options === 'object' && options !== null) {
- if (typeof options.createNodeMock === 'function') {
- createNodeMock = options.createNodeMock;
+function create(element: React$Element, options: TestRendererOptions) {
+ let createNodeMock = defaultTestOptions.createNodeMock;
+ let isConcurrent = false;
+ if (typeof options === 'object' && options !== null) {
+ if (typeof options.createNodeMock === 'function') {
+ createNodeMock = options.createNodeMock;
+ }
+ if (options.unstable_isConcurrent === true) {
+ isConcurrent = true;
+ }
+ }
+ let container = {
+ children: [],
+ createNodeMock,
+ tag: 'CONTAINER',
+ };
+ let root: FiberRoot | null = createContainer(
+ container,
+ isConcurrent ? ConcurrentRoot : LegacyRoot,
+ false,
+ null,
+ );
+ invariant(root != null, 'something went wrong');
+ updateContainer(element, root, null, null);
+
+ const entry = {
+ _Scheduler: Scheduler,
+
+ root: undefined, // makes flow happy
+ // we define a 'getter' for 'root' below using 'Object.defineProperty'
+ toJSON(): Array | ReactTestRendererNode | null {
+ if (root == null || root.current == null || container == null) {
+ return null;
}
- if (options.unstable_isConcurrent === true) {
- isConcurrent = true;
+ if (container.children.length === 0) {
+ return null;
}
- }
- let container = {
- children: [],
- createNodeMock,
- tag: 'CONTAINER',
- };
- let root: FiberRoot | null = createContainer(
- container,
- isConcurrent ? ConcurrentRoot : LegacyRoot,
- false,
- null,
- );
- invariant(root != null, 'something went wrong');
- updateContainer(element, root, null, null);
-
- const entry = {
- _Scheduler: Scheduler,
-
- root: undefined, // makes flow happy
- // we define a 'getter' for 'root' below using 'Object.defineProperty'
- toJSON(): Array | ReactTestRendererNode | null {
- if (root == null || root.current == null || container == null) {
- return null;
- }
- if (container.children.length === 0) {
- return null;
- }
- if (container.children.length === 1) {
- return toJSON(container.children[0]);
- }
- if (
- container.children.length === 2 &&
- container.children[0].isHidden === true &&
- container.children[1].isHidden === false
- ) {
- // Omit timed out children from output entirely, including the fact that we
- // temporarily wrap fallback and timed out children in an array.
- return toJSON(container.children[1]);
- }
- let renderedChildren = null;
- if (container.children && container.children.length) {
- for (let i = 0; i < container.children.length; i++) {
- const renderedChild = toJSON(container.children[i]);
- if (renderedChild !== null) {
- if (renderedChildren === null) {
- renderedChildren = [renderedChild];
- } else {
- renderedChildren.push(renderedChild);
- }
+ if (container.children.length === 1) {
+ return toJSON(container.children[0]);
+ }
+ if (
+ container.children.length === 2 &&
+ container.children[0].isHidden === true &&
+ container.children[1].isHidden === false
+ ) {
+ // Omit timed out children from output entirely, including the fact that we
+ // temporarily wrap fallback and timed out children in an array.
+ return toJSON(container.children[1]);
+ }
+ let renderedChildren = null;
+ if (container.children && container.children.length) {
+ for (let i = 0; i < container.children.length; i++) {
+ const renderedChild = toJSON(container.children[i]);
+ if (renderedChild !== null) {
+ if (renderedChildren === null) {
+ renderedChildren = [renderedChild];
+ } else {
+ renderedChildren.push(renderedChild);
}
}
}
- return renderedChildren;
- },
- toTree() {
- if (root == null || root.current == null) {
- return null;
- }
- return toTree(root.current);
- },
- update(newElement: React$Element) {
- if (root == null || root.current == null) {
- return;
- }
- updateContainer(newElement, root, null, null);
- },
- unmount() {
- if (root == null || root.current == null) {
- return;
+ }
+ return renderedChildren;
+ },
+ toTree() {
+ if (root == null || root.current == null) {
+ return null;
+ }
+ return toTree(root.current);
+ },
+ update(newElement: React$Element) {
+ if (root == null || root.current == null) {
+ return;
+ }
+ updateContainer(newElement, root, null, null);
+ },
+ unmount() {
+ if (root == null || root.current == null) {
+ return;
+ }
+ updateContainer(null, root, null, null);
+ container = null;
+ root = null;
+ },
+ getInstance() {
+ if (root == null || root.current == null) {
+ return null;
+ }
+ return getPublicRootInstance(root);
+ },
+
+ unstable_flushSync(fn: () => T): T {
+ return flushSync(fn);
+ },
+ };
+
+ Object.defineProperty(
+ entry,
+ 'root',
+ ({
+ configurable: true,
+ enumerable: true,
+ get: function() {
+ if (root === null) {
+ throw new Error("Can't access .root on unmounted test renderer");
}
- updateContainer(null, root, null, null);
- container = null;
- root = null;
- },
- getInstance() {
- if (root == null || root.current == null) {
- return null;
+ const children = getChildren(root.current);
+ if (children.length === 0) {
+ throw new Error("Can't access .root on unmounted test renderer");
+ } else if (children.length === 1) {
+ // Normally, we skip the root and just give you the child.
+ return children[0];
+ } else {
+ // However, we give you the root if there's more than one root child.
+ // We could make this the behavior for all cases but it would be a breaking change.
+ return wrapFiber(root.current);
}
- return getPublicRootInstance(root);
- },
-
- unstable_flushSync(fn: () => T): T {
- return flushSync(fn);
},
- };
-
- Object.defineProperty(
- entry,
- 'root',
- ({
- configurable: true,
- enumerable: true,
- get: function() {
- if (root === null) {
- throw new Error("Can't access .root on unmounted test renderer");
- }
- const children = getChildren(root.current);
- if (children.length === 0) {
- throw new Error("Can't access .root on unmounted test renderer");
- } else if (children.length === 1) {
- // Normally, we skip the root and just give you the child.
- return children[0];
- } else {
- // However, we give you the root if there's more than one root child.
- // We could make this the behavior for all cases but it would be a breaking change.
- return wrapFiber(root.current);
- }
- },
- }: Object),
- );
-
- return entry;
- },
+ }: Object),
+ );
- /* eslint-disable-next-line camelcase */
- unstable_batchedUpdates: batchedUpdates,
-
- act,
-};
+ return entry;
+}
const fiberToWrapper = new WeakMap();
function wrapFiber(fiber: Fiber): ReactTestInstance {
@@ -589,4 +580,10 @@ injectIntoDevTools({
rendererPackageName: 'react-test-renderer',
});
-export default ReactTestRendererFiber;
+export {
+ Scheduler as _Scheduler,
+ create,
+ /* eslint-disable-next-line camelcase */
+ batchedUpdates as unstable_batchedUpdates,
+ act,
+};
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
index 68c8299cfe963..13aa7682aff2c 100644
--- a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
@@ -10,19 +10,13 @@
'use strict';
-let createRenderer;
-let PropTypes;
-let React;
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+import ReactShallowRenderer from 'react-test-renderer/shallow';
-describe('ReactShallowRenderer', () => {
- beforeEach(() => {
- jest.resetModules();
-
- createRenderer = require('react-test-renderer/shallow').createRenderer;
- PropTypes = require('prop-types');
- React = require('react');
- });
+const createRenderer = ReactShallowRenderer.createRenderer;
+describe('ReactShallowRenderer', () => {
it('should call all of the legacy lifecycle hooks', () => {
const logs = [];
const logger = message => () => logs.push(message) || true;
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js
index 6b8a962ad5b14..87bbdade2507c 100644
--- a/packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js
@@ -10,16 +10,12 @@
'use strict';
-let createRenderer;
-let React;
+import * as React from 'react';
+import ReactShallowRenderer from 'react-test-renderer/shallow';
-describe('ReactShallowRenderer with hooks', () => {
- beforeEach(() => {
- jest.resetModules();
- createRenderer = require('react-test-renderer/shallow').createRenderer;
- React = require('react');
- });
+const createRenderer = ReactShallowRenderer.createRenderer;
+describe('ReactShallowRenderer with hooks', () => {
it('should work with useState', () => {
function SomeComponent({defaultName}) {
const [name] = React.useState(defaultName);
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js
index 9ed3bc681593b..5da98d8a7420a 100644
--- a/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactShallowRendererMemo-test.js
@@ -10,19 +10,13 @@
'use strict';
-let createRenderer;
-let PropTypes;
-let React;
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+import ReactShallowRenderer from 'react-test-renderer/shallow';
-describe('ReactShallowRendererMemo', () => {
- beforeEach(() => {
- jest.resetModules();
-
- createRenderer = require('react-test-renderer/shallow').createRenderer;
- PropTypes = require('prop-types');
- React = require('react');
- });
+const createRenderer = ReactShallowRenderer.createRenderer;
+describe('ReactShallowRendererMemo', () => {
it('should call all of the legacy lifecycle hooks', () => {
const logs = [];
const logger = message => () => logs.push(message) || true;