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 install

Use the node version specified in the .nvmrc

nvm use

Run the following to check your node Version.

node -v

We 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 server
• npm 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 mode
• npm run test:coverage - run all tests and generate a coverage report
• npm run test:ui - run all tests in watch mode with the vitest UI open