Use Enzyme for testing React Native Component
Tags: enzyme, reactnative, testing
Published: 2020-05-13 10:39:48

A unit could be individual methods and functions in classes or really any small pieces of functionality. We mock out dependencies in these tests so that we can test individual methods and functions in isolation.

This is example for use Enzyme for testing React Native Component. I have component [Members.js](https://github.com/tuantvk/WtfReactNativeTesting/blob/master/src/Members/Members.js) and enter the following contents:

```js
// Members.js
import React from 'react';
import { View, Text } from 'react-native';


const Members = ({ members }) => {

    return (
        <View>
            {members.map(member => (
                <Text key={member.id} testID="memberDetail">{member.name}</Text>
            ))}
        </View>
    )
}


export default Members;
```

Members Component receive a props **members** include `id` key and `name` key, render each item member with `testID="memberDetail"`

```js
// Members.spec.js
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

import Members from './Members';

const members = [{ id: 1, name: 'Daphne', }, { id: 2, name: 'Margret', }];


describe('Members Component', () => {
    it('should render without issues', () => {
        const component = shallow(
            <Members members={members} />
        );

        expect(component.length).toBe(1);
        expect(toJson(component)).toMatchSnapshot();
    });

    it('should render all item in members', () => {
        const wrapper = shallow(
            <Members members={members} />
        );

        expect(wrapper.find({ testID: 'memberDetail' }).length).toBe(2);
    });

    it('should render correct names', () => {
        const wrapper = shallow(
            <Members members={members} />
        );

        wrapper.find({ testID: 'memberDetail' }).forEach((node, index) => {
            expect(node.props().children).toBe(members[index].name);
        });
    });

});
```

## Events Hook Testing

How to testing component use Hooks ? For example:

```js
// EventsHook.js
import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

const EventsHook = () => {

  const [number, _setNumber] = useState(1);

  return (
    <View>
      <TouchableOpacity onPress={() => _setNumber(number + 1)}>
        <Text>{number}</Text>
      </TouchableOpacity>
    </View>
  );
}

export default EventsHook;
```

```js
// EventsHook.spec.js
import React from 'react';
import {
  Text,
  TouchableOpacity,
} from 'react-native';
import renderer from 'react-test-renderer';
import { waitForElement } from 'react-native-testing-library';
import EventsHook from './EventsHook';

describe('EventsHook', () => {

  it('calls setCount with count + 1', async () => {

    let inst;
    inst = renderer.create(<EventsHook />)

    await waitForElement(() => {
      const button = inst.root.findByType(TouchableOpacity);
      const text = inst.root.findByType(Text);

      button.props.onPress();

      expect(text.props.children).toBe(2);

    })

  });

});
```


View all on my repo [WtfReactNativeTesting](https://github.com/tuantvk/WtfReactNativeTesting)