This is the repository for playing around with web testing Please follow the instructions below to set up the development environment.
For the local development setup you need to have the Node.js JavaScript runtime installed on your system.
To use the same version as the team, please install Node.js via the node version manager (nvm).
Install the node version specified in the .nvmrc
nvm installUse the node version specified in the .nvmrc
nvm useRun the following to check your node Version.
node -vWe use npm as our package manager (npm comes bundled with node).
For local development you need to install the dependencies with the following command:
npm install- install all dependencies
We use the following frameworks and tools for development:
- Vite as our build tool
- TypeScript as our programming language
- React as our UI view library
- Tailwind CSS as our CSS framework
- LinguiJS as our internationalization framework
Following commands are available for development:
npm run dev- run the development servernpm run messages:extract- extract messages for translation
We use the following frameworks and tools for testing:
- vitest for unit and component tests
- playwright for end-to-end tests
- react-testing-library for react components
- msw for mocking requests
You can find the unit and component tests in the src folder.
The tests are located in the same folder as the component they are testing.
The naming convention for the tests is *.test.[ts|tsx].
The rendering of the React components is done with the react-testing-library. We provide a custom render function that wraps every component with a theme and language provider. The custom render function can be found in test-utils.tsx.
Following commands are available for running the tests:
npm test- run all tests in watch modenpm run test:coverage- run all tests and generate a coverage reportnpm run test:ui- run all tests in watch mode with the vitest UI open