# jest-react-hooks-mock

> Finally a simple solution to mock react hooks state

Latest version **1.1.0** (published 2019-06-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install jest-react-hooks-mock
pnpm add jest-react-hooks-mock
yarn add jest-react-hooks-mock
bun add jest-react-hooks-mock
```

## 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 | 1.1.0 |
| Published | 2019-06-11 |
| First published | 2019-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 0 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Victor Palomo de Castro |
| Maintainers | victor95pc |
| Keywords | javascript, jest, testing, test utils, react, reactjs, react hooks, hooks, mock, state |

## Links

- npm: https://www.npmjs.com/package/jest-react-hooks-mock
- Repository: https://github.com/victor95pc/jest-react-hooks-mock
- Homepage: https://github.com/victor95pc/jest-react-hooks-mock#readme
- Issues: https://github.com/victor95pc/jest-react-hooks-mock/issues
- npm.io page: https://npm.io/package/jest-react-hooks-mock

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2019-06-11
- 1.0.1 — 2019-06-10
- 1.0.0 — 2019-06-10

## README

# What its?
Finally a simple solution to access the states and dispatchers inside your react hook components
without the need to change any line in your components, making testing simple and easy to make, just like using Classes. :relaxed:

# Install

```bash
npm install jest-react-hooks-mock --save-dev
```
## Usage

In order to exposed the states inside your component first you import the library:
```js
import setupMockStates from 'jest-react-hooks-mock';
```
To make it works you need to setup one arguments:

| Argument        | Type         | Description                             | Example      |
| ------------: | ------------ | ------------                            | ------------ |
| states  | Array[string] | Here you define the names of all ```useState``` inside your component, **the order here is super important!**   | [ 'state1', 'state2' ] |


### Example
```js
import setupMockStates from 'jest-react-hooks-mock';

let promise = setupMockStates(['test']);
//Make all the component rendering after setup the mock
//You can only access states and dispatchers after the Promise is resolved
```

## Real World Example

```js
import React from 'react';
import { shallow } from 'enzyme';
import setupMockStates from 'jest-react-hooks-mock';
import YOUR_COMPONENT from '<YOUR_COMPONENT_PATH>';

describe('Test', () => {
  it('run it', async () => {
    // states amount must be the same as the amount of useState you have in your Component
    let promise = setupMockStates(['test']);

    // render components always after setupMockStates 
    shallow(<YOUR_COMPONENT />);

    // states and dispatchers will be avaible when the promise is resolved
    let [states, [setTestState]] = await promise;

    // You can call the dispatchers, it will also trigger the component to rerender
    setTestState('change')

    // here you can read your component states
    expect(states.test).toEqual('change')
  });
});
```

---
_Source: https://npm.io/package/jest-react-hooks-mock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._