How to use enzyme for react-native with jest

So I know this is a bit old but I was having issues with Jest, Enzyme, and React Native and I found this post - hopefully this solution will help.

To start with - Enzyme doesn't support mounting React Native and only supports shallow rendering. This wasn't good enough for me as I needed end-to-end tests from the component to the api which lead me to react-native-mock-render. What this does is allow us to run react native inside a browser environment which let's us test using Enzyme - all the calls for React Native and the components work as you would expect.

To set this up you'll need to install JSDOM, react-native-mock-render, Enzyme 3.0+, and Jest 20.0.0+. And then inside your jest setup file (which is specified in your package.json) include the following code:

const { JSDOM } = require('jsdom'); const jsdom = new JSDOM(); const { window } = jsdom; function copyProps(src, target) { const props = Object.getOwnPropertyNames(src) .filter(prop => typeof target[prop] === 'undefined') .map(prop => Object.getOwnPropertyDescriptor(src, prop)); Object.defineProperties(target, props); } global.window = window; global.document = window.document; global.navigator = { userAgent: 'node.js', }; copyProps(window, global); // Setup adapter to work with enzyme 3.2.0 const Enzyme = require('enzyme'); const Adapter = require('enzyme-adapter-react-16'); Enzyme.configure({ adapter: new Adapter() }); // Ignore React Web errors when using React Native console.error = (message) => { return message; }; require('react-native-mock-render/mock'); 

And that's it - you're all setup to mount components in Enzyme and test them.

If you want to see a full sample check out react-native-mock-render-example. This is working with React 16, React Native 0.51, and Enzyme 3.2.

In order to unit test your component with jest you can use enzyme-to-json

npm install --save enzyme-to-json 

then your test would look like this:

import { shallow } from 'enzyme'; import { shallowToJson } from 'enzyme-to-json'; import MyComponent from './MyComponent'; it('should render component', => { expect(shallowToJson(shallow(<MyComponent />))).toMatchSnapshot(); }); 

I'm not sure regarding your case with react-native. I can share my case of using jest + enzyme with standard react.

When I needed to test some component and isolate it from others I used jest.mock, e.g.

jest.mock('../ComponentToBeMocked', () => { return () => null; }); 

Initially I found examples when the second argument (a function) should return just a string representing a name of the mocked component. But in that case I saw that distracting Unknown props warning.