Today we are going to learn how we can install Vitest in a React environment with Vite.
First, we will install Vitest:
npm install -D vitest
After we will install the necessary libraries:
npm install vitest @testing-library/react @testing-library/jest-dom --save-dev
Now let’s create the directory structure for the tests, outside our src folder:
And within components, we will create an example component to test that we’ll call Button.tsx:
Now let’s create the associated test, inside of tests/components/ we create
Button.test.tsx
And now to execute the tests we will add the following script within package.json:
"test": "vitest run --coverage"
Returns only the HTML translated, without any additions.
"test": "vitest run"
To implement tests that check if our component is rendering within the document, we need to install the following:
The React testing library.
npm install --save-dev @testing-library/react
Configuration for Vitest
npm install --save-dev @vitest/config
Now we create a file called vitest.config.ts or vitest.config.js (if we’re not using TypeScript)
Now we must import at the beginning of our files:
import '@testing-library/jest-dom/vitest';
And now the code would be like this:
Add extra coverage to sonarqube.
Returns only the HTML translated, without any addition.
To set up coverage we have to create the lcov.info format.
We need to go to vitest.config.ts
And now it will generate the corresponding file when we run the tests:
npm test
Dentro de coverage estará este archivo:
And now within sonar-project.properties
sonar.javascript.lcov.reportPaths=coverage/lcov.info
