Trabalhando e otimizando testes com mocks de componentes

Usar mock nos testes unitários é uma mão na roda quando se trata de otimizar os testes e até mesmo o desenvolvimento deles.

Como dito, quando falamos em mock, nada mais é do que criar uma implementação simbólica de uma função, hook, componente, seja como for. Esse será o ponto de partida. Claro que vale a pena verificar o que vale ou não a pena criar um mock, correto?

Primeiramente, vou ta explicando como funciona um mock de um componente, isso já vai valer para muita coisa, trago no próximo exemplo alguns métodos mais avançados, como mockImplementation, mockImplementationOnce.

Vamos lá, no react as vezes trabalhamos com muito componentes e às vezes eles já foram testado. Então, fica redundante durante um teste a gente tá chamando ele novamente, isso vai acontece muito se você usa composition pattern.

Exemplo:

import MenuButton from '../ui/MenuButton';

// ... Componente que usa o MenuButton

Aqui estamos importando esse MenuButton no menu, e sem seguida iremos testar no caso atual. Esse meu menu tem sua implantação interna e como agora iremos testar somente a ação de está sendo renderizado com as props recebidas, vamos mocar a importação do componente MenuButton.

vi.mock('MenuButton', () => ({
  MenuButton: () => <div data-testid="menuButton">menuButton</div>
}));

describe('Menu render', () => {
// ... teste

Assim fica o mock desse componente, veja que no primeiro argumento passamos o path e o segundo o que iria retornar, no caso, uma função que retorna um jsx. Então, agora na hora que o teste estiver sendo executado na DOM o que vai aparecer sera no Mock.

// SEM MOCK
 ✓ src/components/Menu/Menu.test.tsx (1)
   ✓ Menu render (1)
     ✓ should render correctly

 Test Files  1 passed (1)
      Tests  1 passed (1
   Duration  725ms

// COM MOCK

 ✓ src/components/Menu/Menu.test.tsx (1)
   ✓ Menu render (1)
     ✓ should render correctly

 Test Files  1 passed (1)
      Tests  1 passed (1)
    Duration  523ms

Como pode ver, um componente relativamente simples mas com um mock tivemos um ganho de tempo e performance

e isso, por hoje.