TDD

React Native TDD

Para se fazer testes unitarios no react native utilizaremos duas ferramentas, o Jest que é um test runner javascript do Facebook e o Enzyme que é uma utiliy feita pelo Airbnb para testes de componentes react.

Instalação e configuração

Primeiro vamos instalar as dependências necessárias, execute o seguinte comando:

npm install enzyme enzyme-adapter-react-16 react-dom

Agora dentro do seu projeto abra o arquivo package.json e faça as alterações:

...
"jest": {
    "preset": "react-native",
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ]
  }
...

Crie uma pasta na raiz do seu projeto chamada jest e crie um arquivo setup.js adicione o seguinte código:

import Enzyme from "enzyme"
import Adapter from "enzyme-adapter-react-16"

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

Feito isso, estamos prontos para criarmos nossos testes

Testes

Com jest e enzyme conseguimos testar se um determinado componente foi renderizado, para isso entre na pasta __tests__ e crie um arquivo chamado button.test.js o .test serve para o jest conseguir indentificar que esse arquivo é um arquivo de testes, poderia ser também button.spec.js. Agora vamos criar nosso primeiro teste, dentro do arquivo de teste coloque o seguinte código:

import React from "react"
import { shallow } from "enzyme"
import TestButton from "../src/button"

describe("rendering", () => {
  let wrapper
  beforeEach(() => {
    wrapper = shallow(<TestButton />)
  })
  it("should render a button", () => {
    expect(wrapper.find("Button")).toHaveLength(1)
  })
})

Aqui estamos usando o shallow para renderizar o componente passado. O expect retorna o Button caso ele ache dentro do componente TestButton e utilizamos o toHaveLength(1) para verificar a quantidade de resultados. Se essa quantidade for 1 então o teste passa, se não, errou.

Vamos rodar nosso teste então, obviamente ele irá falhar pois não criamos ainda o componente button. Para rodar o teste rode o comando

npm run test

Você deve ver a uma mensagem de erro dizendo que o componente não foi encontrado, Então vamos criar ele. Na raiz do seu projeto crie um arquivo TestButton.js e coloque o seguinte código:

import React from "react"

import { View, Button } from "react-native"

const TestButton = props => {

  return (
    <View>
      <Button />
    </View>
  )
}
export default TestButton

Agora se rodarmos nossos testes novamente e tudo estiver ok, ele irá passar

Testando props

Vamos criar um teste agora para testar o valor da prop title do Button. Em nosso arquivo de teste adiciona o seguinte teste dentro do describe

it("should render a button with Submit title", () => {
    expect(wrapper.find("Button").prop("title")).toBe("Submit")
})

O código é auto explicativo, estamos buscando a prop title do componente Button e verificando se o valor dela é Submit, ao executar o teste irá gerar um erro pois essa prop ainda não existe, vamos agora no nosso componente e criar ela, ficando:

  <Button title="Submit" />

Se rodarmos agora o teste, ele irá passar com sucesso.

Isso é apenas o básico de testes em react native existe uma ifinidade de testes que se pode fazer com jest + enzyme, para mais informações verifique as docs.

Jest docs: https://jestjs.io/docs/en/getting-started

Enzyme docs: https://airbnb.io/enzyme/