A real-world example of using MSW with Vite and @tanstack/react-query.

Clone the repository and install the dependencies:

git clone https://github.com/raisiqueira/example-msw-vite
cd example-msw-vite
pnpm install

Start the development server:

pnpm dev

Run the tests:

pnpm run test

This project is based on the Eruption template.

This project is a simple example of a React application that uses MSW to mock API requests. All requests are mocked in the src/mocks/handlers.ts file.

To fetch data from the API, the application uses the @tanstack/react-query (former react-query).

The MSW files are located in the mocks folder. The src/mocks/browser.ts file is the entry point for the MSW worker. The src/mocks/handlers.ts file contains the handlers for the mocked requests.

The other related files are:

• src/App/services: the file that contains an axios instance to fetch data from the API.
• src/App/hooks: the file that contains the useQuery hook to fetch data from the API.
• src/App/components/HLTVMatches: the file that contains the component that renders the fetched data.

MIT @ Raí Siqueira