Skip to content

Commit 0651156

Browse files
authored
docs(readme): Improve ReadMe (#16)
1 parent 84db617 commit 0651156

File tree

1 file changed

+54
-16
lines changed

1 file changed

+54
-16
lines changed

README.md

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,37 @@
88
[![GitHub Release Date](https://img.shields.io/github/release-date/JoseLion/react-native-testing-mocks)](https://github.com/JoseLion/react-native-testing-mocks/releases)
99
[![Known Vulnerabilities](https://snyk.io/test/github/JoseLion/react-native-testing-mocks/badge.svg)](https://snyk.io/test/github/JoseLion/react-native-testing-mocks)
1010

11-
# react-native-testing-mocks
11+
# React Native Testing Mocks
1212

13-
React Native mocks for testing. Same as the internal Jest-based mocks, but simpler, faster, and decoupled of the Jest dependency.
13+
React Native mocks for testing. It is the same as the internal Jest-based mocks but is more straightforward, faster, and decoupled from the Jest dependency.
1414

15-
## Why?
15+
## Motivation
1616

17-
Testing on React Native is hard. This is mainly because of some modules and components which communicate directly to native code (iOS, Android, etc.) But in a testing environment like Node.js that native code is not available. The second reason testing is hard is beacause React Native code is not deliverd in a distributable manner. The code is mostly written in Flow, and there're a few modules that need to go throgh a haste map to be resolve (modules with `.ios.js` and `.android.js` prefix, but invoked without the prefix). React Native package does not privide a CommonJS transpiled version, so we can't just require the modules on a testing environment.
17+
Testing on React Native is not such a trivial task, mainly because some modules and components communicate directly to native code (iOS, Android, etc.) However, in a testing environment like Node.js, the native code is unavailable. Also, React Native code is not delivered in a distributable manner -- most of the code in Flow, and some modules need to go through a haste map resolver (modules with `.ios.js` and `.android.js` prefix, required without the prefix).
1818

19-
React Native solves this problem through [Jest](https://jestjs.io/). They provide Jest mocks for all those native modules, and because Jest transpiles the code before running it, they ensure to process Flow code and solve the haste map. This configuration is exported as a [Jest preset](https://github.com/facebook/react-native/blob/main/packages/react-native/jest-preset.js) t be used on your `jest.config.js` file. But what if you don't want to use Jest as your testing framework? What if you don't use Babel for testing, because you use TypeScript and `ts-node`? Is it even possible to test React Native code without Jest?
19+
React Native solves this problem with [Jest](https://jestjs.io/), providing Jest mocks for native modules. Jest transpiles the code before running it, so there's also a Flow preset in the configuration and some settings to solve the haste map. React Native then exports this configuration as a [Jest preset](https://github.com/facebook/react-native/blob/main/packages/react-native/jest-preset.js) for developers to use with their Jest configuration.
2020

21-
This library aims to solve this problem. It provides mocks just as React Native does, but in much faster/simpler way and without the need of Jest. It also transforms the React Native Flow code on the fly, and solves the haste map modules so don't have to worry about that either. Transforming on the fly takes a few seconds the first time, but then it get's cached and it gets 6x faster. Overall, this library makes it possible to test React Native in other frameworks, like [Mocha.js](https://mochajs.org/), etc.
21+
But what if you don't want to use Jest as your testing framework? What if you don't need Babel because you already have TypeScript, and your test can run on [ts-node](https://typestrong.org/ts-node/)? Is it even possible to test React Native code without Jest? This package aims to solve this problem by providing mocks the same way as React Native does but without Jest dependency in the middle. It solves the "haste map" modules and transforms Flow code on the fly, caching the result so subsequent executions are 6x faster. Overall, the package makes it possible to test React Native in other frameworks, like [Mocha.js](https://mochajs.org/).
22+
23+
## Table of contents
24+
25+
- [Features](#features)
26+
- [Requirements](#requirements)
27+
- [Install](#install)
28+
- [Usage](#usage)
29+
- [Mocha.js example](#mochajs-example)
30+
- [Mocking native methods](#mocking-native-methods)
31+
- [Contributing](#contributing)
32+
- [License](#license)
2233

2334
### Features
2435

25-
- Faster and simpler than Jest transforming all your code.
36+
- Fast and simple. Transforms just what it needs, when it needs.
2637
- Compatible with [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/) renderer.
27-
- Large range of compatibility. Uses the same approach as React Native's original mocks.
28-
- Decoupled from Jest. Testing framework agnostic.
29-
- Easy to use/setup.
38+
- Extensive range of compatibility by imitating React Native's original mocks.
39+
- Testing framework agnostic.
40+
- Easy to use and set up.
41+
- It provides a function to add behaviors to the native methods of Native Components.
3042

3143
## Requirements
3244

@@ -48,7 +60,7 @@ yarn add --dev react-native-testing-mocks
4860

4961
## Usage
5062

51-
To register the testing mocks you just need to load the effect in a file that runs before all tests:
63+
To register the testing mocks, load the effect in a file that runs before all tests:
5264

5365
```ts
5466
// setup.ts
@@ -60,7 +72,13 @@ import "react-native-testing-mocks/register";
6072

6173
### Mocha.js Example
6274

63-
Some frameworks like Mocha.js gives you a place to load setup modules. In Mocha you can do that with the `--require` CLI option, or using the `.mocharc.json` file:
75+
Some frameworks also provide mechanisms to load setup modules. In Mocha.js, you can use the `--require` CLI option:
76+
77+
```bash
78+
mocha --require react-native-testing-mocks/register
79+
```
80+
81+
Or you can add it to the `.mocharc.json` file:
6482

6583
```json
6684
{
@@ -77,13 +95,33 @@ Some frameworks like Mocha.js gives you a place to load setup modules. In Mocha
7795
}
7896
```
7997

80-
## Something's missing?
98+
### Mocking native methods
99+
100+
Native components like `View`, `ScrollView`, or `TextInput` have specific instance methods that help communicate between JS and native code. Because there's no native code on tests, we must mock these native methods somehow. By default, the methods mocks are just a "no-operation" function, meaning nothing happens whenever a component invokes them in a test environment.
101+
102+
However, your components may be using these methods in their implementation, and it'd be good to be able to test that as well. _React Native Testing Mocks_ provides the `mockNative` function that allows you to change the default native methods mocks on native components. Let's say your component uses the `.measure` instance method of a `<View>` component. Before you run your test, you can change the mocked behavior of `.measure` like so:
103+
104+
```ts
105+
mockNative("View", { measure: callback => { callback(10, 10, 100, 100) } });
106+
```
107+
108+
Now, whenever a test invokes the `.measure` method of any `View` instance, it will use your implementation instead. Remember that mocks persist until the program finishes, but you can restore the original behavior called `restoreNativeMocks()`. You can add the method to a before hook to ensure restoration after each test:
109+
110+
```ts
111+
afterEach(() => {
112+
restoreNativeMocks();
113+
});
114+
```
115+
116+
## Contributing
117+
118+
### Something's missing?
81119

82-
Suggestions are always welcome! Please create an [issue](https://github.com/JoseLion/react-native-testing-mocks/issues/new) describing the request, feature, or bug. We'll try to look into it as soon as possible 🙂
120+
Suggestions are always welcome! Please create an [issue](https://github.com/JoseLion/react-native-testing-mocks/issues/new) describing the request, feature, or bug. Opening meaningful issues is as helpful as opening Pull Requests.
83121

84-
## Contributions
122+
### Contributions
85123

86-
Contributions are very welcome! To do so, please fork this repository and open a Pull Request to the `main` branch.
124+
Pull Requests are very welcome as well! Please fork this repository and open your PR against the `main` branch.
87125

88126
## License
89127

0 commit comments

Comments
 (0)