Testando arquivos JSX no React. Jets React Test Files

Você desenvolvedor já deve ter se deparado com erros em códigos que já estavam em produção mas não apresentavam alertas em testes manuais. Isso se dá pelo simples fato de não conseguirmos testar todas as respostas atreladas (atadas) a uma função se não a invocarmos.

Isso seria deveras demorado toda vez que os códicos fossem atualizados.

Uma das características mais comum entre desenvolvedores de estrutura compartilhada é a incerteza na versão de produção quando ocorrem pequenas adaptações nos códigos.

Erros de natureza numérica, por exemplo, podem ocorrer com uma simples alteração no banco de dados. Onde uma determinada função de soma aguarda entradas numéricas ao invés disso recebe NULL ou String (texto) causando transtorno para o sistema.

Por este motivo a utilização de controle de versões, repositórios git, servem tanto para compartilhar com a equipe seu avanço no aprimoramento do sistema como para retroagir (downgrade) a versão que apresenta falhas e erros, retornando para a versão funcional.

Entretanto, você não veio até aqui para ler sobre git e sim sobre testes automáticos. Basicamente os testes automáticos são montados para executar todas as funções internas de determinados arquivos, aguardando respostas esperadas, certas ou erradas.

Para simplificar o que foi dito, uma função de soma pode retornar resposta verdadeira esperada e outra resposta errada (também esperada) a fim de comprovar o que deve ou não retornar.

Exemplo simples

function sum(a, b) {
  return a + b
}

Devo esperar que sum(2,5) é igual a 7.
Também espero que sum(null,7) seja 7 ou Null. porém retornará NaN.

Com este cenário posso criar testes automáticos com respostas erradas ou certas, de modo a aprimorar a função evitando erros em sua utilização.

Criando o arquivo Teste

A nomenclatura basicamente segue alguns padrões, a mais conhecida é acrescentar a palavra “.test” antes da extensão. Exemplo:

App.js = App.test.js.
Soma.jsx = Soma.test.jsx.

No React você importa a função ou arquivo desta forma:

import {name} from ‘./name’;
export name; //export

No Nodejs é semelhante:

const name = require('./name'); 
module.exports.name = name; //export

Testando função

Testaremos a reposta da função const sum =(a,b) => a+b

test(‘testing funciona sum’, () =>{
  expect(dum(2,5)).toBe(7); // true
  expect(dum(2,10)).toBe(12); // true
  expect(dum(5,5)).not.toBe(0); // true
  expect(dum(NULL,5)).not.toBe(0); // true
  expect(dum(NULL,NaN)).toBe(0); // FALSE
});
//export here

Veja que não está previsto NULL ou NaN dentro da função. Não tratamos este tipo de entrada, então supostamente o returno diferiria de 0, seria algo como NaN (Not a Number).

Testando componentes

Você não necessariamente precisa testar funções ou classes, pode observar abaixo a construção de um arquivo de natureza React, um componente.

App.js

//imports here
function App (props){
  return(
    <h1>Hello Word</h1>
  );
}
export default App;

App.test.js

//imports here
test(‘testing component App, React Element’ () =>{
  const root = document.createElement(‘div’);
  ReactDOM.render(<App>,root)
  expect(root.querySelector(‘h1’).textContent).toBe(‘Hello Word’);
});

[Finalizar publicação]