Het testen van een Reactjs-component kan worden gedaan met behulp van verschillende tools en technieken. Hier zijn de stappen:
1. Jest: Dit is een test-runner van Facebook. Gebruik het om je tests uit te voeren. Je kunt jest gebruiken om mock-functies, timers enzovoort te creëren.
1. React Testing Library: Dit is een zeer lichte oplossing voor het testen van React-componenten. Het voorziet in de mogelijkheid om in je tests te zoeken naar componenten op dezelfde manier als de gebruiker dat zou doen. In plaats van kunstmatige test-id’s toe te voegen, kun je de tekst en labels zoeken.
Install it with: `npm install —save-dev @testing-library/react`1. Schrijf je tests: Maak een nieuw bestand naast je component met dezelfde naam, maar append met `.test.js` of `.spec.js`. Bijvoorbeeld als je een component `MyComponent.js` hebt, het testbestand moet `MyComponent.test.js` of `MyComponent.spec.js` zijn.
1. Wat te testen: Test eerst of de component foutloos wordt weergegeven. Test vervolgens alle belangrijke functies van de component.
1. Shallow rendering: Shallow rendering is nuttig om eenheidstests voor de componenten te beperken, zodat ze zich niet bezighouden met het gedrag van de subcomponenten.
Bijvoorbeeld:
```
import { render, fireEvent } from ‘@testing-library/react’;
import MyComponent from ‘./MyComponent’;
test(‘display a blank login form, with remember me checked by default’, async () => {
const { findByLabelText, findByText } = render(
Bijvoorbeeld:
```
import React from ‘react’;
import renderer from ‘react-test-renderer’;
import Link from ‘../Link’;
test(‘renders correctly’, () => {
const tree = renderer
.create(Facebook)
.toJSON();
expect(tree).toMatchSnapshot();
});
```
1. Voer de tests uit met de opdracht `npm test`. De test-runner (Jest) zal automatisch alle testbestanden uitvoeren en de resultaten in de terminal laten zien.
