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 Jest example's usage of default imports (#1641)

Browse Source 
* docs: Fix Jest example's usage of default imports

Default exports and imports are deprecated. The default import of `zustand` generates a deprecation warning on the console. The default export that was suggested previously would actually fail to compile. See the comments at the very bottom of #559 for further discussion.

This commit fixes the example in the documentation by introducing named exports & imports instead of default exports & imports.

* docs: Suggest using plain import for Jest

`jest.requireActual` is not necessary when we're not mocking any other
part of `zustand`.

* docs: Fix TypeScript example

The `create` function was curried where it should not have been.
The example is now written in plain TypeScript, as the code that it
contains does not require JSX.

* Prettier suggestions

* Use `jest.requireActual` to avoid circular dependencies
This commit is contained in:
Aleksandar Dimitrov 2023-02-27 02:58:11 +01:00 committed by GitHub
parent fbfcdc54e6
commit 38ccc1ffb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/guides/testing.mdx
View File

@ -12,7 +12,7 @@ Thus, there can be cases where the state of one test can affect another. To make
```jsx
import { create as actualCreate } from 'zustand'
// const actualCreate = jest.requireActual('zustand') // if using jest
// const { create: actualCreate } = jest.requireActual('zustand') // if using jest
import { act } from 'react-dom/test-utils'
// a variable to hold reset functions for all stores declared in the app
@ -40,23 +40,23 @@ In [jest](https://jestjs.io/), you can create a `__mocks__/zustand.js` and place
If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following code:
```tsx
```typescript
import { create as actualCreate, StateCreator } from 'zustand'
// const actualCreate = jest.requireActual('zustand') // if using jest
// if using Jest:
// import { StateCreator } from 'zustand';
// const { create: actualCreate } = jest.requireActual<typeof import('zustand')>('zustand');
import { act } from 'react-dom/test-utils'
// a variable to hold reset functions for all stores declared in the app
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<S>(createState)
const initialState = store.getState()
storeResetFns.add(() => store.setState(initialState, true))
return store
}
export 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(() => {
@ -70,14 +70,14 @@ You should use the following code in the `__mocks__/zustand.js` file (the `__moc
```js
import { act } from '@testing-library/react-native'
const actualCreate = jest.requireActual('zustand')
const { create: actualCreate } = jest.requireActual('zustand')
// a variable to hold reset functions for all stores declared in the app
const storeResetFns = new Set()
// when creating a store, we get its initial state, create a reset function and add it in the set
const create = (createState) => {
const store = actualCreate.default(createState)
export const create = (createState) => {
const store = actualCreate(createState)
const initialState = store.getState()
storeResetFns.add(() => {
store.setState(initialState, true)
@ -93,8 +93,6 @@ beforeEach(async () => {
})
)
})
export default create
```
If the `jest.config.js` has `automock: false`, then you need to do the following in `jest.setup.js`: