Convert ReactShallowRenderer to ESM

Author: NMinhNguyen

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

@@ -9,11 +9,11 @@
 
 'use strict';
 
-let createRenderer;
-let React;
-let ReactDOM;
-let ReactDOMServer;
-let ReactTestUtils;
+import ReactShallowRenderer from 'react-test-renderer/shallow';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactDOMServer from 'react-dom/server';
+import * as ReactTestUtils from 'react-dom/test-utils';
 
 function getTestDocument(markup) {
   const doc = document.implementation.createHTMLDocument('');
@@ -27,14 +27,6 @@ function getTestDocument(markup) {
 }
 
 describe('ReactTestUtils', () => {
-  beforeEach(() => {
-    createRenderer = require('react-test-renderer/shallow').createRenderer;
-    React = require('react');
-    ReactDOM = require('react-dom');
-    ReactDOMServer = require('react-dom/server');
-    ReactTestUtils = require('react-dom/test-utils');
-  });
-
   it('Simulate should have locally attached media events', () => {
     expect(Object.keys(ReactTestUtils.Simulate).sort()).toMatchSnapshot();
   });
@@ -403,7 +395,7 @@ describe('ReactTestUtils', () => {
       }
 
       const handler = jest.fn().mockName('spy');
-      const shallowRenderer = createRenderer();
+      const shallowRenderer = ReactShallowRenderer.createRenderer();
       const result = shallowRenderer.render(
         <SomeComponent handleClick={handler} />,
       );

packages/react-test-renderer/shallow.js

@@ -9,8 +9,4 @@
 
 'use strict';
 
-const ReactShallowRenderer = require('react-shallow-renderer');
-
-// 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 'react-shallow-renderer';

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;

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);

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;