Como testar componentes React

16 de ago. de 2022

Nível: Intermediário

Índice:

O que é?
Dependências principais
Setup de configuração
Criando o projeto
Dependências
Limpando
Primeiro teste
Rodando o teste
Evento de clique

O que é um TDD?

Se você ainda não sabe o que é, recomendo ver este artigo antes de seguir.

Dependências principais

Para testar seus componentes React, você precisa de algumas dependências, a primeira é a mesma que utilizamos neste artigo e uma específica para testar seus componentes React.

”Putz” , más porque precisamos de 2 dependências para rodar os testes? Só o Jest não da conta? A Resposta seria depende.

Quando trabalhamos com React, a coisa fica um pouco diferente.

Vamos começar pelo Jest puro.

O Jest é programado para rodar somente scripts puros, quando vamos rodar somente no terminal.

Aqui estão os principais e mais usados executores de testes(puros): Jasmine, Mocha, Tape e Jest.

Beleza, más e aí, como fica o React?

booora lá…

Para testar um componente React, a gente precisa ter uma dependência que forneça toda a API necessária para podermos testar os componentes, caso queira se aprofundar, segue a Documentação do React.

Para isso, temos várias bibliotecas que faz esse maravilhoso trabalho para nós. Vou citar 2 mais usadas, Enzyme e Testing Library, utilizaremos o Testing Library.

Bom, já sabemos as diferenças e as dependências que precisamos, vamos para prática!

Setup de configuração

Suas versões do NodeJS, NPM e Yarn precisa ser igual ou superior a: NodeJS: 10.16 NPM: 5.6 Yarn: 0.25

Criando o projeto

Neste exemplo, vamos utilizar o CRA(create-react-app), com seu terminal aberto, digite:

 npx create-react-app react-test --template typescript

Caso queira se aprofundar, segue a documentação oficial do create-react-app.

Abra seu editor de código:

code ./react-test

Dependências

Por padrão o CRA já traz todo o pacote de teste necessário, segue a lista que está no seu package.json:

Limpando

Para um melhor entendimento, apague tudo que estiver dentro da pasta src.

Lá dentro crie os arquivos index.tsx e App.tsx.

No arquivo index.tsx coloque:

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

No arquivo App.tsx coloque:

import React from "react"

function App() {
  return <div className="App"></div>
}

export default App

Pronto, temos um componente App.tsx retornando um Hello World.

Primeiro teste

Crie um arquivo com o nome setupTests.ts na pasta src e coloque essa importação:

import "@testing-library/jest-dom"

Ela serve para importar a API do Jest-DOM, para mais detalhes acesse aqui.

Crie um arquivo com o nome App.test.tsx na pasta src.

Cole esse código:

import React from "react"
import { render, screen } from "@testing-library/react"
import App from "./App"

test("renders learn react link", () => {
  render(<App />)

  const linkElement = screen.getByText(/hello world/i)

  expect(linkElement).toBeInTheDocument()
})

Temos 3 importações, a primeira é o React, a segunda são 2 métodos do @testing-library/react e a terceira é o componente.

Vamos falar da segunda importação:

render() - Um metodo do React Test Library que renderiza nosso componente.

screen() - Ele serve para encontrar elementos(texto por exemplo) em uma pagina.

Mais a baixo temos o teste, se você já acompanhou o, post anterior, irá se familiarizar com esse cenário.

Passamos para o render nosso <App />, para renderiza-lo.

Utilizamos o screen e suas API’s para buscar um texto usando o método getByText(). É bem semelhante ao document.querySelector, passamos uma expressão regex como valor.

Por último colocamos um expect passando nosso elemento encontrado como parâmetro e chamamos um método toBeInTheDocument que verifica se esse elemento foi renderizado.

Todos os métodos você encontra na própria documentação.

Conforme o tempo, você vai decorando eles…

Rodando o teste

Em seu terminal rode:

yarn test

npm run test

Se seu terminal te respondeu com erro igual a este, estamos no caminho certo…

Lendo o erro, você consegue identificar que ele esta tentando buscar dentro do seu componente o texto hello world e não foi encontrado nada.

Volte para seu App.tsx e insira o texto hello world:

import React from "react"

function App() {
  return <div className="App">Hello World</div>
}

export default App

Rode novamente:

yarn test

npm run test

Pimba! Funcionou!

Testando evento de clique

Agora vamos dificultar um pouco as coisas.

Vamos criar um teste onde irá ter um botão, quando clicado nesse botão irá incrementar + 1.

Seu src/App.test.tsx irá ficar assim:

import React from "react"
import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

import App from "./App"

describe("App component", () => {
  it("should render the component", () => {
    render(<App />)
    const button = screen.getByTestId("count-button")

    expect(button).toBeInTheDocument()
  })

  it("should increase the amount", () => {
    render(<App />)
    const countButton = screen.getByTestId("count-button")
    const countValue = screen.getByTestId("count-value")

    userEvent.click(countButton)

    expect(countValue).toHaveTextContent("1")
  })
})

src/App.tsx:

import React, { useState } from "react"

function App() {
  const [count, setCount] = useState(0)

  function handleCount() {
    setCount(oldCount => oldCount + 1)
  }

  return (
    <div className="App">
      <div data-testid="count-value">{count}</div>
      <button data-testid="count-button" onClick={handleCount}>
        +
      </button>
    </div>
  )
}

export default App

Em seu terminal use:

yarn test

npm run test

Rodou perfeitamente!

Vamos entender algumas coisas novas adicionadas ao teste:

userEvent - É um pacote do React Testing Library contendo varios metodos para simular uma interação de um usuário, sendo mais simples, é um simulador de click’s.

Para cada teste, ou melhor, para cada describe precisamos chamar o metodo render novamente . Assim que o teste acaba, o React Testing Library desmonta nosso componente, acoplando ele somente para aquele container de teste.

Simples não é?

Agora é contigo! Teste, refatore e teste novamente, siga esse loop e verás resultados!