javascript - Jest + react-navigation not locating routeparams - Stack Overflow

admin管理员组

文章数量:1405516

I am trying to write a test for an app using react-navigation and I am running into issues of the route and params being read correctly.

I am getting an error of

TypeError: Cannot read property 'params' of undefined

on const [leadId] = useState(route.params.leadId);

my ponents looks like

export default function AComponent() {
  const route = useRoute();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [leadId] = useState(route.params.leadId);
}

I have tried following / but I received Warning: React.createElement: type is invalid when wrapping the ponent.

My test looks like

import React from 'react';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import { render, fireEvent, cleanup } from 'react-native-testing-library';
import configureMockStore from 'redux-mock-store';

import AComponent from 'ponents/contact/AComponent';

const mockStore = configureMockStore([]);

describe('<AComponent />', () => {
  let getByTestId, store;

  beforeEach(() => {
    store = mockStore({});

    ({ getByTestId } = render(
      <Provider store={store}>
        <AComponent />
      </Provider>
    ));
  });
});

my mock is

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: () => ({ goBack: jest.fn() }),
    useRoute: jest.fn(),
  };
});

I am not sure if I am wrapping the ponents incorrectly, or if I am missing something else.

Any ideas or help would be greatly appreciated.

Thanks.

I am trying to write a test for an app using react-navigation and I am running into issues of the route and params being read correctly.

I am getting an error of

TypeError: Cannot read property 'params' of undefined

on const [leadId] = useState(route.params.leadId);

my ponents looks like

export default function AComponent() {
  const route = useRoute();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [leadId] = useState(route.params.leadId);
}

I have tried following https://callstack.github.io/react-native-testing-library/docs/react-navigation/ but I received Warning: React.createElement: type is invalid when wrapping the ponent.

My test looks like

import React from 'react';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import { render, fireEvent, cleanup } from 'react-native-testing-library';
import configureMockStore from 'redux-mock-store';

import AComponent from 'ponents/contact/AComponent';

const mockStore = configureMockStore([]);

describe('<AComponent />', () => {
  let getByTestId, store;

  beforeEach(() => {
    store = mockStore({});

    ({ getByTestId } = render(
      <Provider store={store}>
        <AComponent />
      </Provider>
    ));
  });
});

my mock is

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: () => ({ goBack: jest.fn() }),
    useRoute: jest.fn(),
  };
});

I am not sure if I am wrapping the ponents incorrectly, or if I am missing something else.

Any ideas or help would be greatly appreciated.

Thanks.

• javascript
• react-native
• jestjs
• react-navigation
• react-native-testing-library

Share Follow edited Jul 10, 2020 at 0:09 Blink Rankin asked Jul 10, 2020 at 0:00 Blink RankinBlink Rankin 23333 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Hey I just solved this myself and here is my solution

Change

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: () => ({ goBack: jest.fn() }),
    useRoute: jest.fn(),
  };
});

To

jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({ goBack: jest.fn() }),
  useRoute: () => ({
    params: {
      <yourParamName>: '<paramValue>',
      <yourParamName2>: '<paramValue2>',
      etc...
    }
  }),
}));

In my case I put this code block into my setup.ts file and then in my jest config inside of package.json I pointed to it.

Example

"setupFiles": [
  "./node_modules/react-native-gesture-handler/jestSetup.js",
  "./jest/setup.ts"
]

Then in the test itself

const navigation = { navigate: jest.fn() };
const { getByTestId, getByText, queryByTestId } = render(<App navigation={navigation}/>);

本文标签： javascriptJestreactnavigation not locating routeparamsStack Overflow