In React Native how can I test my components with Shallow Rendering?

Question

For React, I use Shallow Rendering techniques for unit testing my React components. Can I do something similar in React Native?

I've followed the instructions to set up Jest, but can't find any documentation on testing my components. I would like to do full TDD with React Native in the same way I do with React.

Answer 1

I think enzyme is what you're looking for.

It provides you a shallow function which allows you to make a shallow comparison (as you want).

Enzyme can be used along with all of the popular test runners (like Mocha, Jest, Karma etc). Full list can be found on the library's github page.

Example:

import {shallow} from 'enzyme';

describe('<MyComponent />', () => {
  it('should render three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });
});

For the further reading you can take a look on enzyme's Shallow Rendering API or docs in general.

Answer 2

You can do this without using enzyme, just use Shallow Renderer from react-test-renderer.

import ShallowRenderer from 'react-test-renderer/shallow';

it('renders', () => {
  const renderer = new ShallowRenderer();
  const wrapper = renderer.render(<MyComponent />);

  expect(wrapper).toMatchSnapshot();
});