How to correctly mock React Navigation's getParam method using Jest

Question

I have a React Native app in which I'm trying to write some integration tests using Jest & Enzyme. My situation is as follows, I have a component which fetches a navigation param being passed to it from the previous screen using getParam - which works fine normally, I'm just struggling to successfully get a value in there using mock data. My code looks like this:

In my container I have this in the render method:

const tickets = navigation.getParam('tickets', null);

Then in my test I have the following:

const createTestProps = (testProps: Object, navProps: any = {}) =>
  ({
    navigation: {
      navigate: jest.fn(),
      getParam: jest.fn(),
      ...navProps,
    },
    ...testProps,
  } as any);

let props = createTestProps(
    {},
    {
      state: {
        // Mock navigation params
        params: {
          tickets: [
            {
              cellNumber: '123456789',
              ticketId: 'xxx',
            },
            {
              cellNumber: '123456789',
              ticketId: 'xxx',
            },
          ],
        },
      },
    }
  );

const container = mount(
    <MockedProvider mocks={mocks} addTypename={false}>
      <ThemeProvider theme={theme}>
        <TicketSummaryScreen {...props} />
      </ThemeProvider>
    </MockedProvider>
  );

As you can see I've attempted to mock the actual navigation state, which I've checked against what's actually being used in the real component, and it's basically the same. The value for tickets is still undefined each time I run the test. I'm guessing it has to do with how I've mocked the getParam function.

Anyone have any ideas? Would be much appreciated!

Answer 1

I just successfully fixed this problem on my project. The only advantage that I had is that I had the render method being imported from a file I created. This is a great because all my tests can be fixed by just changing this file. I just had to merge some mocked props into the component that render was receiving. Here's what it looked like before:

/myproject/jest/index.js

export { render } from 'react-native-testing-library'

After the fix:

import React from 'react'
import { render as jestRender } from 'react-native-testing-library'

const navigation = {
  navigate: Function.prototype,
  setParams: Function.prototype,
  dispatch: Function.prototype,
  getParam: (param, defaultValue) => {
    return defaultValue
  },
}

export function render(Component) {
  const NewComponent = React.cloneElement(Component, { navigation })
  return jestRender(NewComponent)
}

This setup is great! It just saved me many refactoring hours and probably will save me more in the future.

Answer 2

Maybe try returning the mock data from getParam