Vamos começar pelos TESTES

Então é hora de começar nossa aplicação e vamos usar uma abordagem orientada a testes. O Create React App vem pré-empacotado com o Jest test-runner. Quando criamos a nossa aplicação ganhamos um teste simples para garantir que conseguimos renderizar nosso componente. Vamos dar uma olhada nisso!

O primeiro teste que temos em nossa aplição é o src/App.test.js e se você executar o comando npm test, em seu terminal, verá algo como essa saída:

Ele irá ficar parado aí aguardando por alterações em seus arquivos de testes para executar novamente. Então se quiser sair basta pressionar q.

Snapshot Testing

Já temos um teste que garante que conseguimos renderizar nosso componante App. Agora vamos capturar um snapshot dele para garantir que um refactory não vai provocar nenhum reflexo indesejado em nossa interface com o usuário.

Um típico cenário de teste com snapshot, tira uma "foto" do componente e compara com a última imagem salva do componente. O teste vai falhar se as duas imagens não combinarem: sendo essa uma mudança inesperada ou mesmo que o snapshot precise ser atualizado.

Então, vamos instalar o pacote para criar esse snapshot:

❯ npm install --save-dev react-test-renderer

Vamos aproveitar e começar a organizar nossos testes seguindo a convenção sugerida na documentação.

❯ mkdir -p src/__tests__
❯ mv src/App.test.js src/__tests__

Vamos agora, adicionar esse teste ao nosso arquivo App.test.js:

import renderer from 'react-test-renderer';
import App from '../App';

it('renders correctly', () => {
  const tree = renderer.create(
    <App />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

Se você deixou o teste executando no terminal, perceba o aviso de que foi escrito um snapshot. Você, também, pode rodar os testes novamente com npm t que é um atalho para npm test.

O snapshot vai estar em src/__tests__/__snapshots__/App.test.js.snap e vai parecer como esse:

exports[`test renders correctly 1`] = `
<div
  className="App">
  <div
    className="App-header">
    <img
      alt="logo"
      className="App-logo"
      src="logo.svg" />
    <h2>
      Welcome to React
    </h2>
  </div>
  <p
    className="App-intro">
    To get started, edit 
    <code>
      src/App.js
    </code>
     and save to reload.
  </p>
</div>
`;

Agora não precisamos mais executar a aplicação inteira para verificar visualmente se alguma mudança inesperada impactou nossa interface com o usuário (UI).

CHECKPOINT:

❯ git add .
❯ git commit -am "added our first snapshot test"

Atualizando os snapshots que falharam

Nesse ponto, vamos traduzir algumas mensagens e ver como nosso teste vai se comportar. Ao traduzir as mensagens em App-header e App-intro no arquivo App.js quebramos o teste que verifica se os snapshots estão batendo.

Então precisamos atualizar nosso snapshot apertando u e teremos nossos testes passando novamente e a mensagem de que um snapshot foi atualizado.

Até agora, o arquivo App.js deve ser um pouco diferente dos arquivos JavaScript que você esta acostuma a ver. Então, vamos para a próma seção entender melhor o que é esse arquivo maluco!