Testes em React

Repositório dedicado a estudos de testes unitários, de integração e e2e no frontend.

Estudo baseado no curso Testes no React do Zero ao Avançado: Vitest, Cypress do Daniel Lopes.

Dependências para realizar testes

@testing-library/jest-dom

Responsável por disponibilizar uma DOM virtual onde elementos html podem ser realizados

@testing-library/react

Biblioteca react para o testing-library. Assim como existem para vue e angular.

@testing-library/user-events

Utilizado para realizar eventos de usuário nos testes: click, hover, keyboard, etc.

@vitest/coverage-v8

Gera relatório de cobertura de testes

vitest

Responsável por disponibilizar de forma global os métodos de teste: describe, it, test, expect, etc.

O que são Mocks?

Simulação de um objeto, função ou módulo. Ele isola o código que está sendo testado, facilitando prever comportamentos. Além disso, evita chamar funções pesadas, como chamadas a APIs.

O mock pode ser feito de algumas formas

• Mockando do 0:

export function exampleFunction() {
    // Lógica da função
}

export function exampleMockFunction() {
    // Lógica da função mockada
}

• Usando as bibliotecas de teste

// Quando o teste encontrar o método `useNavigate` ele irá usar o mock
vi.mock("react-router-dom", () => ({
    useNavigate() {
        return vi.fn()
    }
}))

TDD (Test Driven Development)

O teste é escrito antes do código ser feito, seguindo os seguintes passos:

1. Escrever o teste
2. Falhar o teste
3. Implementar o código
4. Passar o teste
5. Refatorar o código para melhorar a qualidade

Mockimplementation

Serve para mudar o comportamento interno de uma função, método ou componente.

Link: vi.fn().mockImplementation((props) => props.children)

SpyOn

Modifica o mock de um módulo apenas uma vez.

vi.spyOn(rrd, "useParams").mockImplementationOnce(() => ({ id: undefined }));