React Navigationの画面の遷移を単体テストする時のメモ

・Jest+Enzymeでテストしている想定
・TypeScript

だいたいテストの流れは下のようになる。

1) shallowで画面コンポーネントを作成

• navigationプロパティはjest.fn()で作成し、それぞれのメソッドをspyする。

const navigation = jest.fn<NavigationScreenProp<any, any>(() => {
  navigate: jest.fn(),
  ...
});
const navigate = jest.spyOn(navigation, 'navigate');
const wrapper = shallow(<Hoge navigation={navigation} />);

2) 画面コンポーネントのメソッドを直接呼び出し、その後spyしたメソッドが正しく呼ばれているか確認

await wrapper.instance().hoge();
expect(navigate).toBeCalledWith('NewScreen'); // navigateメソッドが引数'NewScreen'で呼ばれた

ハマった点

• HoCを使っている場合
  • wrapper.dive().instance()でHoCの中にあるコンポーネントを取れる、と書いてる記事が散見されたが、私の場合はうまく取れなかった。そのためHoCで包んでいない素のコンポーネントを使ってテストを書いた。