# @formidable-webview/ersatz-testing

> 🚀 Test React Native WebViews with @testing-library/react-native, jest and @formidable-webview/ersatz

Latest version **2.0.5** (published 2020-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @formidable-webview/ersatz-testing
pnpm add @formidable-webview/ersatz-testing
yarn add @formidable-webview/ersatz-testing
bun add @formidable-webview/ersatz-testing
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2020-11-25 |
| First published | 2020-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Jules Sam. Randolph <jules.sam.randolph@gmail.com> (https://github.com/jsamr) |
| Maintainers | jsamr |
| Keywords | react-native, react-native-webview, testing-library, jsdom, DOM |

## Links

- npm: https://www.npmjs.com/package/@formidable-webview/ersatz-testing
- Repository: https://github.com/formidable-webview/ubiquitous
- Homepage: https://github.com/formidable-webview/ubiquitous/tree/master/packages/ersatz-testing#readme
- Issues: https://github.com/formidable-webview/ubiquitous/issues
- npm.io page: https://npm.io/package/@formidable-webview/ersatz-testing

## Dependencies (2)

- [@formidable-webview/skeletton](https://npm.io/package/@formidable-webview/skeletton.md) 1.1.2
- [@formidable-webview/ersatz-core](https://npm.io/package/@formidable-webview/ersatz-core.md) 2.1.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.0.5 (latest) — 2020-11-25
- 2.0.4 — 2020-10-30
- 2.0.3 — 2020-10-29
- 2.0.2 — 2020-10-27
- 2.0.1 — 2020-10-07
- 2.0.0 — 2020-10-07
- 1.0.1 — 2020-08-20
- 1.0.0 — 2020-08-20
- 0.10.1-alpha.6 — 2020-08-09
- 0.10.1-alpha.5 — 2020-08-07
- 0.10.1-alpha.4 — 2020-08-06
- 0.10.1-alpha.3 — 2020-08-05

## README

[![npm](https://img.shields.io/npm/v/@formidable-webview/ersatz-testing)](https://www.npmjs.com/package/@formidable-webview/ersatz-testing)
[![CI](https://github.com/formidable-webview/ubiquitous/workflows/ersatz-testing/badge.svg?branch=master)](https://github.com/formidable-webview/ubiquitous/actions?query=branch%3Amaster+workflow%3Aersatz-testing)

# @formidable-webview/ersatz-testing

:rocket: Test React Native `WebViews` with
[`@testing-library/react-native`](https://www.npmjs.com/package/@testing-library/react-native),
[`jest`](https://www.npmjs.com/package/jest) and
[`@formidable-webview/ersatz`](https://www.npmjs.com/package/@formidable-webview/ersatz) (written in Typescript :blue_heart:)

## Installation

Assuming you already have [`jest`](https://github.com/facebook/jest#readme) and
[`react-test-renderer`](https://www.npmjs.com/package/react-test-renderer)
installed:

```sh
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.

```ts
// ../../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](https://jestjs.io/docs/en/manual-mocks).
The resulting files:

```ts
// ../../acceptance/ersatz-testing/config/__mocks__/react-native-webview.js

import Ersatz from '@formidable-webview/ersatz';
export default Ersatz;

```

```ts
// ../../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*!

---
_Source: https://npm.io/package/@formidable-webview/ersatz-testing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._