React: TypeError: Cannot read property 'create' of undefined when using 'react-test-renderer'

[tangocode]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Trying to run a simple Jest snapshot test but failing on react-test-renderer

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

import * as React from 'react';
import Header from './../../components/Header/HeaderContainer';
import renderer from 'react-test-renderer';

test('Header is loaded correctly', () => {
const component = renderer.create(

);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

When running Jest throws the following error:

● Header is loaded correctly

TypeError: Cannot read property 'create' of undefined

  at Object.<anonymous> (src/__tests__/unit/Header.test.tsx:6:31)
      at Promise (<anonymous>)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

✕ Header is loaded correctly (144ms)

What is the expected behavior?
Snpashot test should pass

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"react-test-renderer": "=16.0.0",
"react": "=16.0",
"react-dom": "=16.0",

[gaearon]

Please provide a complete project reproducing this.

[gaearon]

Since you use TypeScript, my guess would be that you need to configure something to import CommonJS modules.

[tangocode]

Hi Dan,

Here it is ... npm i and then jest and you should be able to replicate the error

mg_dashboard-v2.zip

[gaearon]

This is a TypeScript project. Can you please provide a JavaScript project reproducing this instead?

We are not TypeScript experts. If the bug is in React (and reproducible when calling it from JavaScript) then we can fix it. If it‘s related to how TypeScript is configured, I encourage you to reach out to the TypeScript community for help instead.

My hunch is that ES6 default import syntax just won’t work for CommonJS React modules. Maybe named import syntax will work:

import * as renderer from 'react-test-renderer';

Read more in the "ES5" section of this blog post: http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/.

Happy to reopen if you can demonstrate the problem without TypeScript.

Cheers!

[tangocode]

Sounds good! Thanks

[ferencjx]

Same error message, import * as renderer from 'react-test-renderer'; resolved it

[lijianru]

Keeping the react-test-renderer version the same as react and react-dom.

https://github.com/facebook/react/issues/14763#issuecomment-461016379

[huangxiao233]

tsconfig.json add
"esModuleInterop": true,