A negliglência é tomada pela insegurança

Muitos componentes são criados e é normal que exista muitas interações de lógica e de estilo entre eles. Nossa aplicação vai ganhando corpo e a negligência pela criação de testes acaba dando uma sensação de insegurança quando é preciso modificar algo que já foi feito há muito tempo. Ainda pode ser pior se o que precisa ser modificado sem foi feito por você. Aí é que é preciso mais tempo para entender aquilo e o que precisa mudar para consertar algum bug ou trazer alguma melhoria.

Eu passei por isso e a única solução foi refatorar uma grande quantidade de código para que atendesse às novas especificações. Com os testes desde o início, era bem provável que não precisasse fazer todo esse retrabalho e focar apenas nas modificações necessárias e garantir que as rotinas de testes não venha com erros.

Então, resolvi compartilhar um pouco dessa minha trajetória com testes no React e, mais especificamente, testes de interface (UI Testing).

UI Testing

O próprio nome já entrega. UI Testing são testes voltados para interface. Normalmente, dois testes são realizadas todos os dias sem que se perceba. São os Structural Testing e Interaction Testing. Quando se observa o posicionamento dos elementos criados dentro de uma página web é feito um Structural Testing, mesmo que seja manual. Quando se observa o comportamento (cliques de botões, por exemplo) de um componente no React é feito um Interaction Testing.

Quando é preciso lidar com muitas telas e muitas interações, a forma manual e habitual para fazer esses testes torna-se cansativo e ineficaz. Então, Enzyme e StoryShoots foram criados para nos ajudar.

Enzyme

Enzyme é um utilitário de testes de JavaScript feito para o React para facilitar a vida dos programadores na hora de declarar, manipular e estudar a saída de seus componentes. Por de trás do panos, Enzyme faz uso do jQuery para atingir os elementos de seus componentes e realizar ações de cliques ou verificar tamanho, cor, etc.

StoryShots

StoryShots é um addon feito para o Storybook para integrar os Snapshots do Jest, esse que é outro utilitário de testes de JavaScript para escrever testes unitários. StoryShots irá capturar o estado atual da estrutura da interface da aplicação naquele momento. É como se fosse tirada uma foto. Se qualquer mudança que tenha impacto na estrutura aconteça, o teste não é aceito e duas coisas devem ser consideradas:

• Realmente foi preciso mudar a estrutura então é necessário atualizar a StoryShot.
• Um mudança inesperada aconteceu e é preciso retornar ao código e corrigir os problemas para que o teste da StoryShot seja aceito.

Começando com o bom e velho setup

Para facilitar, a aplicação será criada a partir do Create React App para agilizar as configurações iniciais de repositório. Para isso, vamos instalar globalmente esse pacote

yarn global add create-react-app
create-react-app ui-easy-test
cd ui-easy-test

Instalando o Storybook

Assim como o CRA, é preciso instalar o CLI do storybook para ter uma configuração inicial sem grandes esforços. Dentro da pasta ui-easy-test execute os comandos para ter o Storybook nesse projeto.

yarn global add @storybook/cli
getstorybook
yarn run storybook

Agora, se irmos até http://localhost:9009 vemos a interface padrão do Storybook com dois exemplos de stories. Foram criados duas pastas por padrão .storybook e src/stories que irão guardar as configurações do storybook e a adição de addons e as stories propriamente ditas, respectivamente.

Criando nosso componente

Para os estudos adiante vamos criar nosso primeiro componente no projeto dentro da pasta src/components chamado Toggler .

Um toggler simples que modifica seu estado de ativo para inativo e vice-versa e muda sua label de acordo com seu estado.

Criando nossa primeira story

Agora que temos esse componente, é preciso criar uma story. Por padrão, todas as stories que estiverem dentro do arquivo index.jsdentro da pasta src/stories serão automaticamente adicionador ao Storybook. Portanto, vamos criar nossa primeira story.

Um conjunto de stories pode ser criado a partir de storiesOf . Seu primeiro parâmetro é o nome desse conjunto e cada story é individualmente chamada em cada add() subsequente. Seu primeiro parâmetro é o nome da story e seu segundo parâmetro é uma função que deve retornar um elemento DOM, no nosso caso, o componente Toggler , para que esse seja renderizado no Storybook.

Até aí tudo bem. Temos nosso conjunto de stories e nosso componente, mas está faltando instalar o Enzyme e o StoryShot.

Instalando e configurando o Enzyme

yarn add enzyme --dev
yarn add enzyme-adapter-react-16 --dev
yarn add react-test-renderer --dev

Hoje, estamos na versão 16.4 do React e para que o Enzyme funcione corretamente é preciso instalar o adapter do React 16. Além disso, o pacote react-test-renderer é instalado para garantir que os componentes possam ser renderizados isoladamente sem depender de um DOM, garantindo nossos testes sem se preocupar em renderizar algo além dos nossos componentes, seja ele um botão, um input ou um formulário.

Ótimo, agora que todos os pacotes foram instalados é preciso acrescentar algumas configurações extras para que nada dê errado. É preciso criar inicialmente o arquivosrc/setupTests.js com o trecho de código abaixo para que o Enzyme não aponte erros de Adapter ao longo dos testes. Esse arquivo é identificado automaticamente pelo Create React App com o objetivo de facilitar a configuração inicial dos nossos testes.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Primeiro teste com Enzyme e Jest

Agora podemos criar nosso primeiro teste utilizando o Enzyme e o Jest. Para que a aplicação identifique os testes com o comando yarn test é preciso criar arquivos com o padrão *.test.js . Vamos criar Toggler.test.js dentro da pasta src/components .

import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import Toggler from './Toggler';

describe('Assertions', function () {
  const activeLabel = 'Toggle me! ✅';
  const inactiveLabel = 'Toggle me! ❌';

  it('click once state.active should be true and label ' + activeLabel, () => {
    const wrapper = shallow(<Toggler />);

    wrapper.find('button').simulate('click');

    expect(wrapper.state().active).to.equal(true);
    expect(wrapper.text()).to.equal(activeLabel);
  });

  it('click twice state.active should be false and label ' + inactiveLabel, () => {
    const wrapper = shallow(<Toggler />);

    wrapper.find('button').simulate('click');
    wrapper.find('button').simulate('click');

    expect(wrapper.state().active).to.equal(false);
    expect(wrapper.text()).to.equal(inactiveLabel);
  });
});

Para os testes foi utilizado a biblioteca de assertions chai para facilitar as afirmações feitas com os resultados dos testes e o shallow render do Enzyme para que childrens dos componentes não afetem o resultado dos testes. (Para entender isso melhor tem esse ótimo artigo sobre Enzyme e Jest). describe e it são usados para descrever um conjunto de testes e um comportamento dele, respectivamente. Ambos têm um título como primeiro parâmetro e uma função como segundo parâmetro para a escrita dos testes. expect é o resultado que se espera do teste realizado.

Para os dois casos (Clicar duas vezes ou clicar uma vez), realizar a interação entre o clique do Togglerse espera um resultado específico do seu estado, assim como um tipo de Label. Se algum dos testes falhar, o problema irá aparecer no console (Experimente trocar algum dos resultados do expect de true para false). Se tudo ocorrer bem, teremos essa tela nos dizendo que tudo está bem e todos os testes passaram.

Instalando e Configurando o StoryShot

Para configurar o StoryShot é mais simples. Basta a gente instalar o addon com

yarn add @storybook/addon-storyshots --dev

criar o arquivo de teste storyshots.test.js dentro da pastasrc/stories

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

E é isso! Agora todas as nossas stories serão uma StoryShot. Nossa telinha de testes fica assim agora.

Se modificarmos por alguma razão a Label do nosso componenteToggler de Toggle Me! ✅ ou ❌ para apenas Toggle, todos os testes irão falhar.

Isso, porque mudamos a StoryShot (o console pergunta se queremos modificar apertando ‘u’ ou inspecionar as mudanças desse trecho) e porque os asserts não estão mais corretos, já que se esperava por uma das duas Labels antigas.

Tá. Mas, porque utilizar as duas ferramentas de teste juntas?

Enzyme é muito bom em estudar o comportamento dos componentes, mas sozinho não consegue estudar o posicionamento e estilo deles. É preciso utilizar o Jest Snapshot juntamente com o Enzyme para criar o mesmo resultado que o StoryShot, porém perdemos o ambiente fenomenal que o Storybook nos proporciona.

Exploramos pouco aqui, mas ele é uma excelente ferramenta para documentar nossos componentes (existe outros addons para isso!). Criar diversas interações com as props dos componentes, event handlers e por aí vai. Além do mais, StoryShot é bem simples de instalar quando se tem o Storybook configurado, então acho que vale dar uma chance à ele.

O que eu posso concluir sobre tudo isso é que eu fico feliz de finalmente tomar gosto pela programação orientada à testes (TDD) e buscar melhorar cada vez mais meus conhecimentos. É melhor construir uma base sólida desde o início para que as loucuras ao logo do projeto sejam tranquilamente ajustadas.

Foi um artigo longo e com muita teoria, mas mesmo assim, fiz um repo no Github para que eu posso continuar estudando e me aprimorar para escrever testes cada vez melhores.