react-test-renderer cannot find the render function of the react-native component

[PhoenixRe32]

Do you want to request a feature or report a bug?
A bug

What is the current behavior?
When I run my tests and I render my component (using the shallow function of Enzyme) it fails because it can't find the render function.

 TypeError: this._instance.render is not a function

    > 45 |     wrapper = shallow(<NewEventScreen navigation={navigation} />);
         |               ^
      47 |   });
      48 |

      at ReactShallowRenderer._mountClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:195:37)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:143:14)
      at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:337:35
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:110:16)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:336:68)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:170:22)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous> (src/screens/new-event/__tests__/NewEventScreen.test.js:45:15)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I am developing a react-native application.
I am running the default jest command to run the tests and this happens.
I can't reproduce it in a small project.

What is the expected behavior?
It should run the tests

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I am using:
"@babel/core": "^7.0.0-beta.47",
"prop-types": "15.6.2",
"react": "16.4.1",
"react-dom": "16.4.2",
"react-native": "0.56.0",
"@babel/core": "^7.0.0-beta",
"babel-core": "^7.0.0-beta",
"babel-jest": "23.4.2",
"babel-preset-react-native": "5.0.2",
"babel-runtime": "^7.0.0-beta",
"enzyme": "3.4.1",
"enzyme-adapter-react-16": "1.2.0",
"jest": "23.5.0 ",
"jest-fetch-mock": "1.6.5",
"jsdom": "11.12.0",
"react-test-renderer": "16.4.1",

My jest configuration is in jest.config.js

module.exports = {
  preset: 'react-native',
  setupFiles: ['./jest.setup.js'], // in here i am just loading global.fetch = require('jest-fetch-mock');
};

and my babel config in babel.config.js

module.exports = {
  presets: [
    ['react-native'],
  ],
};

[PhoenixRe32]

Hmm, after a lot of searching I found this #13182
They say it might be related to Jest or Babel but I create a default react-native project (Awesome project) and I added the same packages

"@babel/core": "^7.0.0-beta",
"babel-core": "^7.0.0-beta",
"babel-jest": "23.4.2",
"babel-preset-react-native": "5.0.2",
"enzyme": "^3.4.1",
"enzyme-adapter-react-16": "^1.2.0",
"jest": "23.5.0",
"jsdom": "11.12.0",
"react-test-renderer": "16.4.1"
"react": "16.4.1",
"react-dom": "^16.4.2",
"react-native": "0.56.0"

and create a simple component with just a render function that returns

and run the test for it but the render function was there, no error was thrown

[deecewan]

I've had the same problem. after upgrading react-native from 0.55.4 to 0.56.0, my tests won't run. I've done a lot of digging and debugging and found that class components (class extends Component or class extends PureComponent, etc) there is no render method on the instance at all. However, if I make the items Stateless Functional Components, the render method exists on the instance as expected.

Removing babel-jest and going directly to the react-native jest processor worked. But then I lost all the hoisting capabilities of babel-jest so my mocks didn't work.

Still unsure what's going on.

[gaearon]

Sorry — there's nothing we can help you with in the React repository. As I already said in #13182 (comment), this issue is not caused by React. If you define a class and a method on it doesn't work, it's a problem with your transformation pipeline. I don't know if it's a problem with babel-jest, babel, or React Native preset, but it's definitely not a React issue. People who can fix it aren't maintainers of this repository so if we keep discussing it here, they won't see it. Please file issues with Jest, React Native, or Babel. Thanks!

[gaearon]

Most likely the best place to file this issue is React Native repository because the issue is likely related to their Babel 7 upgrade. There might be some version mismatch related to the Babel preset.

[gaearon]

I looked at the reproducing example in https://github.com/getmaple/TestApp56 again.
I was able to fix it by running:

• yarn remove @babel/core
• yarn test --no-cache

In particular, the issue was that the project mistakingly pulled in @babel/core@^7.0.0-beta.52 which is incompatible with React Native 0.56 (which uses @babel/core@7.0.0-beta.47). The fix was to remove the unnecessary (and wrong) top-level @babel/core dependency.

Check your package.json for @babel/core. If you see it there, remove it. Or at least ensure it's the same version that Metro depends on. Make sure that in your yarn.lock you don't see two @babel/core with different versions.

Hope this helps!

[PhoenixRe32]

Sorry, just came online.
Thanks for all the help.

[deecewan]

thanks for the tip Dan - it doesn't seem to work in my case unfortunately. I've created an issue over at react-native (facebook/react-native#20683) along with a repo that highlights the regression (https://github.com/deecewan/react-native-jest-regression).

[evanjmg]

this breaks when i upgrade test renderer from 16.4.2 to 16.5.1. I am also using react native, but I don't think it has anything to do with that.

[Praveencena88]

@PhoenixRe32 have you resolved this issue?