docs: testing for using typescript

[mugi-uno]

Related Issues

(None)

Summary

Add an explanation of how to mock in TypeScript to the Testing doc.
(If follow the TypeScript Guide, create is executed in a different way.)

Check List

• yarn run prettier for formatting code and docs

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f08f316:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration
Next.js	Configuration

[chrisk-7777]

Thanks @mugi-uno !
I just had a few comments/questions 👍

[chrisk-7777]

nit: can we change this to sentence case? "TypeScript usage"
(I'm slowly trying to get this consistent across the docs)

[chrisk-7777]

Would you be ok with a slight tweak here? I'm thinking something like:

If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following code:

[chrisk-7777]

I'm just testing this locally, as well as reading through this thread (#1059), and I think the testing doc in general needs a pretty big uplift.

Edit: The above doesn't need to be addressed in this PR, just a note.

[dai-shi]

For reference: #271

[chrisk-7777]

I get type errors locally for this snippet.

I believe something like this would work:

import actualCreate, { StateCreator } from 'zustand'
// const 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
const storeResetFns = new Set<() => void>()


// when creating a store, we get its initial state, create a reset function and add it in the set
const create = () => <S>(createState: StateCreator<S>) => {
  const store = actualCreate<S>(createState)
  const initialState = store.getState()
  storeResetFns.add(() => store.setState(initialState, true))
  return store
}

// Reset all stores after each test run
beforeEach(() => {
  act(() => storeResetFns.forEach((resetFn) => resetFn()))
})

[mugi-uno]

I was not able to take into account the type.
I tried it and it worked correctly, including type checking 👌

[chrisk-7777]

Thanks dai-shi. I'll read through that today and try to come up with a consolidated testing page over the next few days or so

[mugi-uno]

@chrisk-7777
Thanks for review.
I fixed all.
f08f316

[chrisk-7777]

Thank you for looking at the feedback