Create React APP + AVA Test Runner

Criar um projeto react com Create React APP (https://github.com/facebook/create-react-app#quick-overview)

npx create-react-app [nome do seu projeto]

Ejetar configurações do Create React APP.

Isso vai ser util para realizar a troca do Test Runner, do Jest para o AVA

yarn eject

Remover o Test Runner atual (Jest) e suas configurações do package.json

yarn remove jest --save
rm -rf config/jest/
rm -f scripts/test.js

Adicionar o AVA Test Runner

Eu não obtive sucesso ao tentar usar a versão beta do AVA, ele não reconheceu algumas configurações do Babel, e por esse motivo nós vamos usar a última versão instável AVA v0.25.0

yarn add [email protected] --dev

É necessário alterar o comando de test para que passe a utilizar o AVA como Test runner, os scripts do seu package.json devem ficar da seguinte forma:

// ...
"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "NODE_ENV=test ava"
},
// ...

Configurando o AVA para executar testes em ES6.

Existem várias configurações que podem ser feitas no AVA, você encontra todas elas na documentação, mas a mais importante neste momento sáo as configurações babel e require

require: é responsável por carregar módulos antes dos testes, quando dizemos módulos estamos falando de um pacote NPM ou um arquivo de setup inicial.
babel: configuração de babel especifica para os testes, usaremos a opção inherit, que utiliza a configuração padrão do babel aplicada em seu projeto.

Instale o babel-register

yarn add babel-register

e adicione a seguinte configuração no seu package.json:

"ava": {
  "require": [
    "babel-register" 
  ],
  "babel": "inherit"
},

IMPORTANTE: Nós não vamos entrar no mérito da configuração para carregamento do CSS ou SVG, mas isso pode ser feito de acordo com seu gosto, então para que possamos seguir com nosso setup, remova as importações de qualquer arquivo que não seja JS de dentro do src/App.js.

Escrevendo testes com AVA

Após realizar a configuração necessária, perceba que ao rodar o comando de teste yarn test, ainda temos o seguinte erro:

ReferenceError: it is not defined

Isso porque o AVA tem sua maneira de escrever testes, que deixa explicito o import das funções utilizadas, refatore o arquivo src/App.test.js. Você pode ver como escrever testes em AVA na documentação

Mesmo refatorando seu teste, você ainda vai obter o seguinte erro:

ReferenceError {
  message: 'window is not defined',
}

Isso é porque o AVA é um test runner, e você precisa simular a DOM para conseguir testar componentes React, pra isso a gente vai utilizar o JSDOM e vamos adicionar o setup inicial dos testes naquela configuração de require do AVA.

Instalando JSDOM:

yarn add --dev jsdom

Crie um arquivo config/setupTest.js com a seguinte configuração:

/* eslint-env browser */ 
// browser
const { JSDOM } = require('jsdom');
const dom = new JSDOM(`<body></body>`);
 
global.document = dom.window.document;
global.window = dom.window;
global.navigator = dom.window.navigator;

E adicione a referência deste arquivo ao seu package.json no require, e sua configuração AVA passa a ser:

"ava": {
  "require": [
    "babel-register",
    "./config/polyfills.js",
    "./config/setupTest.js"  
  ],
  "babel": "inherit"
},

Neste momento você já consegue escrever seus testes com AVA, eu recomendo para realizar testes mais precisos nos componentes o uso do Enzyme.

Esse gist gerou um projeto de exemplo que pode ser acessado em (https://github.com/igr-santos/create-react-app-ava)

igr-santos/Create-react-app-with-ava.md

Create React APP + AVA Test Runner