‚̧Narwhals Playing Mahjong

    @formidable-webview/ersatz-testing
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.5¬†‚Äʬ†Public¬†‚Äʬ†Published

    npm CI

    @formidable-webview/ersatz-testing

    ūüöÄ Test React Native WebViews with @testing-library/react-native, jest and @formidable-webview/ersatz (written in Typescript ūüíô)

    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.

    // ../../acceptance/ersatz-testing/src/basic.test.tsx
     
    import * as React from 'react';
    import Ersatz from '@formidable-webview/ersatz';
    import { waitForWindow } from '@formidable-webview/ersatz-testing';
    import { render } from '@testing-library/react-native';
    import { WebViewProps } from 'react-native-webview';
     
    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:

    1. Create config/__mocks__/react-native-webview.js file.
    2. Add jest.mock('react-native-webview'); at the top of my test file.

    More information on jest manual mocks here. The resulting files:

    // ../../acceptance/ersatz-testing/config/__mocks__/react-native-webview.js
     
    import Ersatz from '@formidable-webview/ersatz';
    export default Ersatz;
     
    // ../../acceptance/ersatz-testing/src/mock.test.tsx
     
    jest.mock('react-native-webview');
    import * as React from 'react';
    import { waitForWindow } from '@formidable-webview/ersatz-testing';
    import { render } from '@testing-library/react-native';
    import { default as WebView, WebViewProps } from 'react-native-webview';
     
    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!

    Install

    npm i @formidable-webview/ersatz-testing

    DownloadsWeekly Downloads

    44

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    19.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • jsamr