improve docs readability (#1931)

* make codeblock easier to understand

* add explanation to what mock does

* add info block

* rewrite typescript section

* Update typescript.md

* Update docs/guides/testing.md

Co-authored-by: Blazej Sewera <code@sewera.dev>

* prefix with >

---------

Co-authored-by: Blazej Sewera <code@sewera.dev>
This commit is contained in:
Mohammed 'Mo' Mulazada 2023-07-13 11:01:47 +02:00 committed by GitHub
parent 808a72225e
commit f73736d59a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 11 deletions

View File

@ -52,12 +52,14 @@ this means your application logic does not need to be changed or mocked when wri
## Setting Up Zustand for testing
Since Jest and Vitest have slight differences, like Vitest using **ES modules** and Jest using
**CommonJS modules**, you need to keep that in mind if you are using Vitest instead of Jest.
> **Note**: Since Jest and Vitest have slight differences, like Vitest using **ES modules** and Jest using
> **CommonJS modules**, you need to keep that in mind if you are using Vitest instead of Jest.
The mock provided below will enable the relevant test runner to reset the zustand stores after each test.
### Jest
In the next steps we are going to setup our Jest environment in order to mock Zustand
In the next steps we are going to setup our Jest environment in order to mock Zustand.
```ts
// __mocks__/zustand.ts
@ -239,7 +241,7 @@ import { Counter } from './counter'
describe('Counter', () => {
test('should render successfully', async () => {
renderCounter()
render(<Counter />)
expect(await screen.findByText(/^1$/)).toBeInTheDocument()
expect(
@ -250,7 +252,7 @@ describe('Counter', () => {
test('should increase count by clicking a button', async () => {
const user = userEvent.setup()
renderCounter()
render(<Counter />)
expect(await screen.findByText(/^1$/)).toBeInTheDocument()
@ -259,10 +261,6 @@ describe('Counter', () => {
expect(await screen.findByText(/^2$/)).toBeInTheDocument()
})
})
const renderCounter = () => {
return render(<Counter />)
}
```
> **Note**: without [globals configuration](https://vitest.dev/config/#globals) enabled, we need

View File

@ -89,7 +89,7 @@ So we have two problems: lack of inference and unsoundness. Lack of inference ca
</details>
<details>
<summary>Why that currying `()(...)`?</summary>
<summary>Why the currying `()(...)`?</summary>
<br/>

View File

@ -18,7 +18,7 @@ You can try a live demo [here](https://githubbox.com/pmndrs/zustand/tree/main/ex
npm install zustand # or yarn add zustand or pnpm add zustand
```
:warning: This readme is written for JavaScript users. If you are a TypeScript user, don't miss [TypeScript Usage](#typescript-usage).
:warning: This readme is written for JavaScript users. If you are a TypeScript user, be sure to check out our [TypeScript Usage section](#typescript-usage).
## First create a store
@ -513,6 +513,7 @@ A more complete TypeScript guide is [here](docs/guides/typescript.md).
- Recommended usage for this unopinionated library: [Flux inspired practice](./docs/guides/flux-inspired-practice.md).
- [Calling actions outside a React event handler in pre-React 18](./docs/guides/event-handler-in-pre-react-18.md).
- [Testing](./docs/guides/testing.md)
- For more, have a look [in the docs folder](./docs/)
## Third-Party Libraries