How To Simulate An Event On A Unit Test With Jest, Enzyme For React-native

I'm trying to figure out how to test an 'onPress' event with Jest in a React-Native app so I can make sure the right function is called. I went through the documentation and Google

Solution 1:

Enzyme does not support React-Native, because it's rendered differently and doesn't use the DOM. That's why you're getting the error ReferenceError: document is not defined. You can see this issue for more information. The React team is currently working to expose a .find() method in react-test-renderer to simulate actions on components. Then it should work for both React/React-native without needing a DOM environment.

There's a hack you can do (and that's what we did in our company) that is rendering a custom component that extends TouchableOpacity and map onClick to call onPress. Something like this:

constmockPressable = (name) => {
  constRealComponent = require.requireActual(name);

  classComponentextendsRealComponent {

    render() {
      returnReact.createElement(
        RealComponent.displayName || RealComponent.name,
        { ...this.props, onClick: this.props.onPress },
        this.props.children
      );
    }

  }

  returnComponent;
};


jest.mock('TouchableOpacity', () =>mockPressable('TouchableOpacity'));

And in your test code, you call component.simulate('click').

It's a hack and I'm not sure what are the consequences of doing this but it has worked for our use cases.

Solution 2:

You should use shallow instead, then called .dive()

const mockFunc = jest.fn();
const component = shallow(<MyComponentonPress={mockFunc} />);    
component.dive().simulate('press');
expect(mockFunc).toHaveBeenCalled();

Solution 3:

I'm able to run tests like what you've described in your question in React Native. Here is my configuration:

package.json

"scripts": {
  ...
  "test": "node_modules/jest/bin/jest.js",
}

"devDependencies": {
  ...
  "enzyme": "^3.1.0",
  "enzyme-adapter-react-16": "^1.0.1",
  "enzyme-to-json": "^3.1.2",
  "jest": "^21.2.1",
  "jest-enzyme": "^4.0.0",
  "jest-expo": "~21.0.0",
}

"jest": {
  "preset": "jest-expo",
  "setupFiles": [
    "./test/jestSetup.js"
  ],
  "snapshotSerializers": [
    "./node_modules/enzyme-to-json/serializer"
  ]
}

test/jestSetup.js

import { configure, shallow, render, mount } from'enzyme'importAdapterfrom'enzyme-adapter-react-16'configure( { adapter: newAdapter() } )

// enzymeglobal.shallow = shallow
global.render = render
global.mount = mount

Example component:

importReactfrom'react'import { Button } from'react-native'constCancelButton = ( props ) =>
  <Button
    { ...props }
    onPress={ () => { props.navigation.goBack() } }
    title="Cancel"
  />export { CancelButton }

Example test

importReactfrom'react'import { CancelButton } from'../CancelButton'test( 'onPress', () => {
  const goBackFunc = jest.fn()

  const navigation = {
    goBack: goBackFunc,
  }

  const component = shallow(
    <CancelButtonnavigation={navigation }
    />
  )

  component.simulate( 'press' )
  expect( goBackFunc ).toHaveBeenCalled()
} )

.babelrc

{"presets":["babel-preset-expo"],"env":{"development":{"plugins":["transform-react-jsx-source"]}}}