Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webmasterdevlin/zustand-immer-react-query-course
State management using Zustand, immer, and Tanstack Query
https://github.com/webmasterdevlin/zustand-immer-react-query-course
immer playwright pnpm react-query react-table react-testing-library tanstack-query tanstack-router vite vitest zustand
Last synced: 7 days ago
JSON representation
State management using Zustand, immer, and Tanstack Query
- Host: GitHub
- URL: https://github.com/webmasterdevlin/zustand-immer-react-query-course
- Owner: webmasterdevlin
- License: mit
- Created: 2021-03-10T08:20:50.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-08T21:14:53.000Z (3 months ago)
- Last Synced: 2025-01-07T18:12:30.688Z (14 days ago)
- Topics: immer, playwright, pnpm, react-query, react-table, react-testing-library, tanstack-query, tanstack-router, vite, vitest, zustand
- Language: TypeScript
- Homepage:
- Size: 3.19 MB
- Stars: 79
- Watchers: 3
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Tanstack Query Course with Zustand, Immer, and React Table
### There are two versions of this application. One using React Router and one using Tanstack Router
- Tanstack Router: `main` branch
- React Router: `using-react-router` branch
#### Tech tools
- https://bun.sh
- https://vitejs.dev
- https://react-hook-form.com
- https://zod.dev
- https://tanstack.com/router/latest
- https://tailwindcss.com
- https://zustand-demo.pmnd.rs
- https://tanstack.com
- https://vitest.dev
- https://playwright.dev
```sh
$ git clone https://github.com/webmasterdevlin/zustand-immer-react-query-course.git
```
```sh
$ cd zustand-immer-react-query-course
```
```sh
$ bun install
```
```sh
$ bun run start
```
#### E2e testing
```sh
$ npx playwright install
```
```sh
$ bun run test:e2e
```
The React app, and the fake web service will run concurrently.
## Vitest
## Tanstack Router
- routeTree.gen.ts is an auto generated route tree
## Set up MSW for mocking API calls
- bun i -D msw
- the msw is a mocking library which will intercept the requests and responses in the integration tests
- create ./src/mocks/handler/todoHandler.ts
- create ./src/mocks/handler/index.ts
- create ./src/mocks/server.ts
- update the ./src/setupTests.ts
## Integration tests
- write integration tests for the fetch todos function of WorkTodosPage.tsx by creating ./src/pages/tests/WorkTodosPage.test.ts
- run the tests, pnpm run test, and see if the todos are rendered
#### TanStack Query persist cache between tests
- the beforeEach does not work
```ts
beforeEach(() => {
queryClient.clear();
});
```