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

Answer 1

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();
  renderer.render(<MyComponent />);

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

Answer 2

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.