Skip to content

Latest commit

 

History

History
44 lines (31 loc) · 4.74 KB

README.md

File metadata and controls

44 lines (31 loc) · 4.74 KB
Raw

Playwright MSW Example

A React SPA that utilises MSW to improve development experience. Additionally, it also has a number of Playwright tests to make sure that playwright-msw's integration of the two libraries works as expected.

The SPA contains two different different mechanisms for communicating with a server:

  1. REST via ReactQuery
  2. GraphQL via Apollo

Getting started

To start a local dev server, do the following: http://127.0.0.1:5173/

git clone https://github.com/valendres/playwright-msw
cd playwright-msw
yarn
yarn build
cd packages/example
yarn start

Commands

  • build: Builds the React SPA. Required to be able to run yarn test.
  • start: Starts a local dev server so that you can manually view the UI that is tested by Playwright.
  • test: Runs the Playwright tests within the tests/playwright/specs folder1

Tests

The React SPA utilises React Router to serve the following:

Route Component Test Description
/login LoginForm cookies.spec.ts An example login form that's used to test the behaviour of cookies. It makes sure that cookies are passed to the MSW handlers and are not unexpectedly leaked across test runs.
/users UsersList http.spec.ts A simple list of users which is used to test the behaviour of REST handlers. It utilises ReactQuery to perform the API calls.
/users/:userId UserProfile http.spec.ts A simple user page that shows more details about the user than the UserList. It is used to make sure that Route parameters work as expected.
/settings SettingsForm graphql.spec.ts A basic settings page to make sure that GraphQL queries and mutations work. It utilises Apollo Client to perform the API calls.
/documents Documents handler-priority.spec.ts A list of documents which is used to test the order in which handlers are processed when there are multiple matching handlers for a single route.
/search Search query-parameters.spec.ts A basic search engine page that allows the behaviour of query parameters to be tested.

Footnotes

Footnotes

  1. to be able to run the Playwright tests, both playwright-msw and the example SPA must have been previously built using yarn build. ↩