web-dev-qa-db-ja.com

Reactナビゲーション：withNavigation HOCを使用するコンポーネントをテストする方法は？

Reactネイティブアプリ用のJestを使用した単体テストを作成しています。コンポーネントがあり、これは withNavigation HOC。]でラップされています。

私の問題は、テストがクラッシュしてスローすることです：

● LoginScreen component › given no props: should render a login form

    Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context.

私はテストに @testing-library/react-native を使用しており、次のように カスタムレンダリングメソッドを設定 しています。

import { render } from '@testing-library/react-native';
import React from 'react';
import { NavigationContext } from 'react-navigation';
import { Provider } from 'react-redux';

import store from '../src/store';

const WithProviders = ({ children }) => {
  return (
    <Provider store={store}>
      <NavigationContext.Provider>{children}</NavigationContext.Provider>
    </Provider>
  );
};

const customRender = (ui, options) =>
  render(ui, {
    wrapper: WithProviders,
    ...options,
  });

export * from '@testing-library/react-native';

export { customRender as render };

これはReduxコンテキストでは機能しますが、ナビゲーションプロバイダーでは機能しません。

withNavigation HOCにラップされているコンポーネントをどのようにテストしますか？

更新：

私はこのような提案された答えを試しました：

jest.mock('react-navigation', () => ({
  withNavigation: Component => props => <Component {...props} />,
}));

afterAll(() => {
  jest.restoreAllMocks();
});

しかし、これは機能しません。エラーが発生します：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
react-nativejestjsreact-navigationhigher-order-componentsreact-testing-library
3
J. Hesters

次のように、反応ナビゲーションを模擬する必要があります。

jest.mock("react-navigation", ({ withNavigation: (component) => component })

次に、コンポーネントに小道具を渡します：

const mockProps = {
    navigation: { navigate: jest.fn() }
}

wrapper = shallow(<LoginScreen {...mockProps}/>)
1
Kubilay Kiymaci