archive-gh-me/zustand
1
0
Fork 0
mirror of https://github.com/pmndrs/zustand.git synced 2025-12-08 19:45:52 +00:00
Code Issues Projects Releases Wiki Activity

fix(docs): update testing doc (#1739)

Browse Source 
* Update formatting

* Update testing doc

* Fix formatting

* Minor changes

* Update testing doc
This commit is contained in:
Danilo Britto 2023-04-07 06:49:00 -05:00 committed by GitHub
parent f94ad23b43
commit 4c2c482820
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/getting-started/introduction.md
View File

@ -23,7 +23,7 @@ It may be the one state manager in the React space that gets all of these right.
You can try a live demo [here](https://codesandbox.io/s/dazzling-moon-itop4).
[zombie child problem]: https://react-redux.js.org/api/hooks#stale-props-and-zombie-children
[React concurrency]: https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md
[react concurrency]: https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md
[context loss]: https://github.com/facebook/react/issues/13332
## Installation

45
docs/guides/testing.mdx → docs/guides/testing.md
View File

@ -8,9 +8,11 @@ nav: 9
When running tests, the stores are not automatically reset before each test run.
Thus, there can be cases where the state of one test can affect another. To make sure all tests run with a pristine store state, you can mock `zustand` during testing and use the following code to create your store:
Thus, there can be cases where the state of one test can affect another. To make sure all tests run
with a pristine store state, you can mock `zustand` during testing and use the following code to
create your store:
```jsx
```js
import { create as actualCreate } from 'zustand'
// const { create: actualCreate } = jest.requireActual('zustand') // if using jest
import { act } from 'react-dom/test-utils'
@ -34,13 +36,16 @@ beforeEach(() => {
The way you mock a dependency depends on your test runner/library.
In [jest](https://jestjs.io/), you can create a `__mocks__/zustand.js` and place the code in that file. If your app is using `zustand/vanilla` instead of `zustand`, then you'll have to place the above code in `__mocks__/zustand/vanilla.js`.
In [jest](https://jestjs.io/), you can create a `__mocks__/zustand.js` and place the code in that
file. If your app is using `zustand/vanilla` instead of `zustand`, then you'll have to place the
above code in `__mocks__/zustand/vanilla.js`.
### TypeScript usage
If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following code:
If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following
code:
```typescript
```ts
import { create as actualCreate, StateCreator } from 'zustand'
// if using Jest:
// import { StateCreator } from 'zustand';
@ -51,12 +56,14 @@ import { act } from 'react-dom/test-utils'
const storeResetFns = new Set<() => void>()
// when creating a store, we get its initial state, create a reset function and add it in the set
export const create = <S>(createState: StateCreator<S>) => {
const store = actualCreate(createState)
const initialState = store.getState()
storeResetFns.add(() => store.setState(initialState, true))
return store
}
const create =
() =>
<S>(createState: StateCreator<S>) => {
const store = actualCreate(createState)
const initialState = store.getState()
storeResetFns.add(() => store.setState(initialState, true))
return store
}
// Reset all stores after each test run
beforeEach(() => {
@ -66,7 +73,9 @@ beforeEach(() => {
## Resetting state between tests in **react-native** and **jest**
You should use the following code in the `__mocks__/zustand.js` file (the `__mocks__` directory should be adjacent to node_modules, placed in the same folder as node_modules, unless you configured roots to point to a folder other than the project root [jest docs: mocking node modules](https://jestjs.io/docs/manual-mocks#mocking-node-modules)):
You should use the following code in the `__mocks__/zustand.js` file (the `__mocks__` directory
should be adjacent to node_modules, placed in the same folder as node_modules, unless you
configured roots to point to a folder other than the project root [jest docs: mocking node modules](https://jestjs.io/docs/manual-mocks#mocking-node-modules)):
```js
import { act } from '@testing-library/react-native'
@ -79,19 +88,13 @@ const storeResetFns = new Set()
export const create = (createState) => {
const store = actualCreate(createState)
const initialState = store.getState()
storeResetFns.add(() => {
store.setState(initialState, true)
})
storeResetFns.add(() => store.setState(initialState, true))
return store
}
// Reset all stores after each test run
beforeEach(async () => {
await act(() =>
storeResetFns.forEach((resetFn) => {
resetFn()
})
)
beforeEach(() => {
act(() => storeResetFns.forEach((resetFn) => resetFn()))
})
```