https://github.com/devlinduldulao/zustand-immer-react-query-course-starter-trondheim
https://github.com/devlinduldulao/zustand-immer-react-query-course-starter-trondheim
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devlinduldulao/zustand-immer-react-query-course-starter-trondheim
- Owner: webmasterdevlin
- License: other
- Created: 2023-04-25T08:20:02.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-26T12:36:15.000Z (about 3 years ago)
- Last Synced: 2025-01-26T13:30:13.142Z (over 1 year ago)
- Language: TypeScript
- Size: 355 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Redux Query Course with Zustand, Immer, and React Table
#### Tech tools
- https://pnpm.io
- https://vitejs.dev
- https://react-hook-form.com
- https://zod.dev
- https://tailwindcss.com
- https://vitest.dev
- https://playwright.dev
```sh
$ git clone https://github.com/webmasterdevlin/zustand-immer-react-query-course.git
$ cd zustand-immer-react-query-course
$ pnpm install
$ pnpm start
```
#### E2e testing
```sh
$ npx playwright install
$ pnpm test:e2e
```
The React app, and the fake web service will run concurrently.
## Set up React Testing Library and Vitest
- create ./src/test-utils/testing-library-util.tsx that will be a copy of the root component
## Set up MSW for mocking API calls
- pnpm 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
#### React Query persist cache between tests
- the beforeEach does not work
```ts
beforeEach(() => {
queryClient.clear();
});
```