React Native + React Navigation e2e testing with Cavy

13.04.2020 — 1 min read

Cavy is a awesome React Native e2e testing library. It's easy to create tests, but usage React Navigation is undocumented.

Here is a technique to control React Navigation 5 navigator in tests.

1// App.ts
2import { NavigationContainer } from '@react-navigation/native';
3import { useCavy } from 'cavy';
4
5export default function App() {
6  const generateTestHook = useCavy();
7  return (
8    <NavigationContainer ref={generateTestHook('Navigation')}>{/* ... */}</NavigationContainer>
9  );
10}

And create navigateBack helper:

1// helper.ts
2export async function navigateBack(navigation: any) {
3    navigation.goBack();
4}

Call helper from your tests:

1// navgationSpec.ts
2import { TestScope } from 'cavy';
3import { navigateBack } from './helpers';
4
5export default function(spec: TestScope) {
6  spec.describe('Test', function() {
7
8    spec.it('works', async function() {
9      const navigationComponent = await spec.findComponent('Navigation');
10      await navigateBack(navigationComponent)
11    });
12  });
13}