2.0.5 • Published 3 years ago
@formidable-webview/ersatz-testing v2.0.5
@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.
// integration/basic.test.tsx
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:
// integration/config/__mocks__/react-native-webview.js
import Ersatz from '@formidable-webview/ersatz';
export default Ersatz;
// integration/mock.test.tsx
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!
2.0.5
3 years ago
2.0.4
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.10.1-alpha.6
4 years ago
0.10.1-alpha.5
4 years ago
0.10.1-alpha.4
4 years ago
0.10.1-alpha.3
4 years ago