@formidable-webview/ersatz-testing
:rocket: Test React Native WebViews
with
@testing-library/react-native
,
jest
and
@formidable-webview/ersatz
.
Installation
Assuming you already have jest
and
react-test-renderer
installed:
npm install -D @testing-library/react-native \
@formidable-webview/ersatz \
@formidable-webview/ersatz-testing
Basic Usage
Ersatz
is the component mimicking WebView
behaviors. In the snippet bellow,
MyComponent
explicitly depends on Ersatz
. Of course, this does not reflect
real use cases which will be laid out later, but it is relevant for the purpose
of learning.
import * as React from 'react';
import Ersatz from '@formidable-webview/ersatz';
import makeErsatzTesting from '@formidable-webview/ersatz-testing';
import { render } from '@testing-library/react-native';
import { WebViewProps } from 'react-native-webview';
const { waitForWindow } = makeErsatzTesting(Ersatz);
const MyComponent = ({ source }: Pick<WebViewProps, 'source'>) => (
<Ersatz source={source} injectedJavaScript={'window.awesomeGlobal = 1;'} />
);
describe('MyComponent', () => {
it('should make awesomeGlobal available to window with value “1”', async () => {
const window = await waitForWindow(
render(<MyComponent source={{ html: '<div></div>' }} />)
);
expect(window.awesomeGlobal).toEqual(1);
});
});
Usage With Jest Mocks
Now, lets dive into a more realistic situation where MyComponent
depends on
WebView
directly. The two steps to get it work:
- Create
config/__mocks__/react-native-webview.js
file. - Add
jest.mock('react-native-webview');
at the top of my test file.
More information on jest manual mocks here.
The resulting files:
import Ersatz from '@formidable-webview/ersatz';
export default Ersatz;
jest.mock('react-native-webview');
import * as React from 'react';
import Ersatz from '@formidable-webview/ersatz';
import makeErsatzTesting from '@formidable-webview/ersatz-testing';
import { render } from '@testing-library/react-native';
import { default as WebView, WebViewProps } from 'react-native-webview';
const { waitForWindow } = makeErsatzTesting(Ersatz);
const MyComponent = ({ source }: Pick<WebViewProps, 'source'>) => (
<WebView source={source} injectedJavaScript={'window.awesomeGlobal = 1;'} />
);
describe('MyComponent', () => {
it('should make awesomeGlobal available to window with value “1”', async () => {
const window = await waitForWindow(
render(<MyComponent source={{ html: '<div></div>' }} />)
);
expect(window.awesomeGlobal).toEqual(1);
});
});
And voila!