Testing `react-native` applications

README.md

Sobre

Não é simples fazer testes de aplicações react-native no device, por isso a maior parte das pessoas preferem testar separadamente os componentes (test unitários) usando o node.js e usar outras ferramentas para test de integração.

Dessa forma os testes unitários são como qualquer outro teste node.js. Você é livre para usar qualquer framework de testes, apesar da documentação oficial recomendar o uso do jest.

Pontos chave

• Referências: Por se tratar de uma tecnologia em franca fase de desenvolvimento, muitas das referências para react-native estão desatualizadas ou imprecisas. Tome bastante cuidado principalmente no que se refere a syntax de ES5 e ES6;

• React: Os princípios de testes de componentes são os mesmos do react, porém é importante observar bem os exemplos porque existe diferenças na forma de procurar elementos no DOM virtual:

  • No react se uso o id como prop de identificação dos nós, no react-native usamos o key, porém o enzyme não entende isso, e selecionar um nó pode ser complicado;
  • window e document não estão disponíveis e erros bizarros podem sair disso;

• Mock: Como os componentes nativos dos devices não vão estar disponíveis durante os testes, é preciso "mocar" eles, restringindo os testes ao que poderia ser considerado um "virtual dom". Esse ponto não chega ser ruim nos testes, só é preciso tomar cuidado, e as vezes é trabalhoso fazer o mock, principalmente de dependências de terceiros;

• Babel: Como todo o react-native é baseado no uso do babel, é preciso configura-lo corretamente, tomando cuidado com:

  • require de imagens: RealOrangeOne/react-native-mock#11
  • componentes relativos a plataformas (.ios.js e .android.js): RealOrangeOne/react-native-mock#17
  • as pasta node_modules são ignoradas por padrão, por isso é preciso forçar a transpilação de dependências que não tenham sido publicadas com a sua transpilação, isso é muito comum com dependências escritas apenas para react-native.

• Exemplo: Um ponto chave para entender como as coisas podem ser feitas é olhar uma referência, infelizmente muita delas estão desatualizadas, a melhor que achei até aqui foi: https://github.com/AddJam/react-native-mocha-enzyme-example/

Documentação

Documentação oficial: https://facebook.github.io/react-native/docs/testing.html

App de exemplo de testes oficial: https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js

Artigos

Artigo simples é o melhor ponto de partida: https://medium.com/@thisbejim/testing-react-native-components-with-enzyme-d46bf735540#.8zqo7fz7m

Se você prefere usar mocha: https://blog.formidable.com/unit-testing-react-native-with-mocha-and-enzyme-51518f13ba73#.px5l2nft4

Artigo um pouco desatualizado, mas ainda sim importante para entender a evolução do processo (tem várias referências no final): http://www.schibsted.pl/blog/testing-react-native-components-with-jest/

Artigo simples mas bem elaborado: https://medium.com/@jcfrancisco/unit-testing-react-native-components-a-firsthand-guide-cea561df242b#.sl9mn640y

Bibliotecas

Essencial para os mocks dos componentes originais: https://github.com/lelandrichardson/react-native-mock

Camada extra sobre as biblioteca oficial de utilidades do react, que adiciona uma serie de facilidades no processamento virtual dos componentes: https://github.com/airbnb/enzyme

Outras:

- https://github.com/producthunt/chai-enzyme