React + enzyme + jest (config)

Maycon Alves
Jul 24 · 2 min read

Vamos parar de quebrar tanto a cabeça e vamos entender o que estamos testando. Mas antes de tudo vamos começar pelo começo, bora configurar esse parada.

Bora criar um setup rápido para podermos começar a codar nessa bagaça. Então abra o terminal execute o comando:

create-react-app nome-da-sua-pasta

Em seguida vamos instalar o enzyme, pois o jest já vem nativo com versões mais novas do cra (ainda bem 🙏) e vamos criar um setup para nossos testes rodarem na boa. Executem o comando dentro da pasta do seu projeto

yarn add -D enzyme enzyme-adapter-react-16

Precisamos adicionar o enzyme e seu adpter para o react 16. E agora vamos criar o arquivo src/setupTest.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

Por padrão o CRA reconhece esse arquivo, sem precisar de mais nenhuma configuração.

Agora vamos modificar o nosso arquivo App.test.js para usarmos o enzyme no teste:

import React from 'react'
import { shallow } from 'enzyme'
import App from './App'
it('renders without crashing', () => {
const component = shallow(<App />)
expect(component.find('div')).toHaveLength(1)
})

Basta rodar o comando yarn test e o resultado esperado deve ser esse:

Pronto estamos prontos para começar a entender o que testar, por quê testar e como testar. Mas para esse tutorial não ficar tão longo, vou dividi-lo em algumas partes, então espero que tenha gostado de aprender a montar um setup bem rápido e fácil.

Espero que tenham gostado e vejo vocês em breve…

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Maycon Alves

Written by

Front-end Development

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade