10. How to test components?

One of the most popular libraries for testing in JavaScript is jest.

It is a test runner library that allows running tests in a standarized manner and structuring them properly.

It provides a set of functions for writing individual unit tests as well as parameterized tests (the same test for many different arguments and expected responses).

For testing React components, you can use react-testing-library.

This library provides functions for rendering individual components and ways to access a stripped-down DOM tree.

Based on this, actions can be performed on the rendered component, such as clicking, typing, etc.

Thanks to access to the stripped-down DOM tree, assertions from the jest library and react-testing-library itself can be applied.

test(`renders the Button component`, () => {
    const {getByText} = render(<Button label={"Click Me"}/>) // react-testing-library renders button and returns method to access rendered component by text inside
    const button = getByText("Click Me");
    expect(button).toBeInTheDocument();
});