Obrigado pela apresentação! Foi muito esclarecedora sobre a importância dos testes no frontend e as ferramentas disponíveis para isso, como Jest, Enzyme e outros. Achei interessante como você destacou os diferentes níveis de renderização com Enzyme (shallow, mount e render) e como cada um atende a necessidades específicas. Vou certamente aplicar esses conceitos nos meus projetos daqui pra frente.

2. Treinamento
Be React. Do Tests!

3. Cronograma
● Porque testar o frontend?
● Problemas de testar frontend
● Falhas de Software
● Benefícios x Prejuízos
● Estudo de caso (implementação de testes)

4. Porque testar o frontend?

5. Pré-ValidaçãoPorque testar o frontend?
Há um grande número de erros sutis que podem ocorrer no
frontend.
● Pequenas mudanças no CSS que causam erros;
● Alterações nos arquivos JS que quebra coisas;
● Agregar mudanças quando não se é necessário;
● Regressões de performance;

6. Pré-ValidaçãoPorque testar o frontend?
Além disso, o desenvolvimento frontend está se tornando mais
crítico à medida que o mercado amadurece. Por isso, nós
precisamos das mesmas habilidades de teste que o backend detém
a anos.
● Testar a velocidade de carregamento da página;
● Testar a velocidade de renderização;
● Aderir a um orçamento de desempenho;
● Verificar mudanças visuais;
● Responsabilizar-se pelas alterações de código;

7. Problemas de testar frontend

8. Pré-ValidaçãoProblemas de testar frontend
Fazer testes front-end é difícil. Ferramentas front-end ainda
estão caminhando e nos últimos anos tivemos uma explosão de
novidades que nos ajudou muito a avançar na profissionalização da
área. Porém, testes ainda é um dos pontos fracos. Conseguimos
testar muito bem JavaScript usando Jasmine, QUnit e tantos
outros, mas testes CSS ainda é um problema grande.

9. Falhas de Software
“Os custos associados às falhas de software
justificam um processo de testes cuidadoso
e bem planejado.”
Custo das falhas de software em 2017:
US$1.700.000.000.000,00
(US$1,7 trilhões)
fonte: Tricentis - Software Fail Watch (5ª edição)

10. Pré-ValidaçãoFalhas de software
US$ 3.000.000,00
(aprox. R$7 milhões)

11. Pré-ValidaçãoFalhas de software
US$ 6.000.000,00
(aprox. R$14 milhões)

12. Pré-ValidaçãoFalhas de software
US$ 11.000.000,00
(aprox. R$35 milhões)

13. Pré-ValidaçãoFalhas de software
US$ 440.000.000,00
(aprox. R$900 milhões)

14. Pré-ValidaçãoFalhas de software
5 mortes
(aprox. 11 feridos)

15. Pré-ValidaçãoFalhas de software
28 mortos
(aprox. 100 feridos)

16. Pré-ValidaçãoEvolução
Best Price:
US$25,00

17. Benefícios x Prejuízos

18. Pré-ValidaçãoBenefícios x Prejuízos
● Prazo x Qualidade;
● Documentação do código;
● Mudanças na arquitetura;
● Código enxuto e bem definido;
● Entregas com reduzidas possibilidades de erros;

19. Jest
Enzyme

20. Pré-ValidaçãoJest
Ferramenta de testes dos mesmos criadores do React.
Testes unitários para JavaScript. Framework agnostic.
https://facebook.github.io/jest/

21. Pré-ValidaçãoQuem usa

22. Pré-ValidaçãoMatchers comuns
● toEqual
● toBeNull
● toBeUndefined
● toBeDefined
● toBeTruthy
● toBeFalsy

23. Pré-ValidaçãoExemplos
test('null', () => {
const n = null;
expect(n).toBeNull();
expect(n).toBeDefined();
expect(n).not.toBeUndefined();
expect(n).not.toBeTruthy();
expect(n).toBeFalsy();
});

24. Pré-ValidaçãoMatchers para números
test('two plus two' , () => {
const value = 2 + 2;
expect(value).toBeGreaterThan( 3);
expect(value).toBeGreaterThanOrEqual( 3.5);
expect(value).toBeLessThan( 5);
expect(value).toBeLessThanOrEqual( 4.5);
// toBe and toEqual are equivalent for numbers
expect(value).toBe( 4);
expect(value).toEqual( 4);
});

25. Pré-ValidaçãoMatchers para números
test('adding floating point numbers', () => {
const value = 0.1 + 0.2;
//expect(value).toBe(0.3); This won't work
because of rounding error
expect(value).toBeCloseTo(0.3); // This works.
});

26. Pré-ValidaçãoMais matchers...
// Strings
expect('Christoph').toMatch(/stop/);
// Arrays
expect(shoppingList).toContain('beer');
// Exceptions
expect(compileAndroidCode).toThrow();

27. Pré-ValidaçãoBefore and After
beforeEach(() => {
initializeCityDatabase();
});
afterEach(() => {
clearCityDatabase();
});
test('city database has Vienna', () => {
expect(isCity('Vienna')).toBeTruthy();
});

28. Pré-ValidaçãoBuilt-in mocking
● Implementação manual.
● Criado para mockar chamadas a funções de
classes testadas.
● Não é tão direcionado para mockar
componentes React. (Falaremos sobre isso)

29. Pré-ValidaçãoTestando componentes React
A maneira simples de testar a consistência: Snapshots
test('renders correctly', () => {
const tree = renderer
.create(<Link
page="http://www.facebook.com">Facebook</Link>)
.toJSON();
expect(tree).toMatchSnapshot();
});

30. Pré-ValidaçãoSnapshot
Automaticamente o framework cria um objeto que
representa o componente e salva numa pasta de
testes.
Testa a consistência do componente.

31. Pré-ValidaçãoComponentes com componentes filhos
Por que é preciso uma ferramenta específica para mockar React.
<MyComponent>
<OtherComponent>Hello</OtherComponent>
</MyComponent>

32. Pré-Validação
Ao testar "<MyComponent>" eu estaria automaticamente
testando "<OtherComponent>".

33. Pré-Validação
"Uma unidade é a menor parte testável de
um programa de computador."
https://pt.wikipedia.org/wiki/Teste_de_unidade
(Testar componentes separadamente e não suas dependências)

34. Enzyme
Uma ferramenta de testes para facilitar a manipulação,
verificação e mockagem de componentes React.
http://airbnb.io/enzyme/

35. Runners
Pode ser executado com diversos frameworks de testes:
● Jest
● Karma
● Mocha
● JSDOM
● Outros

36. Exemplos de uso
test('renders child elements' , () => {
const wrapper = shallow((
<MyComponent>
<div className="unique" />
</MyComponent>
));
expect(wrapper.contains( <div className="unique" />)).to.equal(true);
});

37. Exemplos de uso
test('renders the title', () => {
const wrapper = render(<Foo title="unique" />);
expect(wrapper.text()).to.contain('unique');
});

38. E por que não Jest "puro"?
● Enzyme identifica a saída do render() do componente
React.
● Respeita o ciclo de vida dos componentes
(componentDidMount, componentWillUpdate, etc)
● Consegue carregar os componentes sem
necessariamente carregar componentes filhos e suas
dependências.

39. Renderização de componentes
import { shallow, mount, render } from 'enzyme';
const shallow_wrapper = shallow(<MyComponent />);
const mount_wrapper = mount(<MyComponent />);
const render_wrapper = render(<MyComponent />);

40. Shallow
Renderiza os componentes como uma unidade.
Assegura que seus testes não afetarão componentes filhos
e comportamentos de dependências.

41. Full Rendering (mount)
Renderiza o componente reproduzindo o comportamento
dele ser renderizado na tela.
Toda a infraestrutura de DOM, ciclo de vida do componente
e componentes filhos são carregadas.

42. Static Rendering (render)
Renderiza o componente como HTML estático. Bom para
verificar a estrutura HTML gerada.
O retorno do render é similar ao dos métodos anteriores,
mas este usa uma solução de terceiros de HTML parsing
mais otimizada.

43. Enzyme Matchers
● .contains(nodeOrNodes) => Boolean
● .exists() => Boolean
● .instance() => ReactComponent
● Outros

44. Eventos
.simulate(event[, ...args]) => Self
component.find('a').simulate('click');

45. Como começar a usar da maneira fácil
$ npm install -g create-react-app
$ create-react-app myapp
● React boilerplate
● Jest included

46. Configurando o Enzyme
$ npm install enzyme enzyme-adapter-react-16
$ npm install react-test-renderer

47. Configurando o Enzyme
// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

48. Olha o bizu!
// src/setupTests.js
global.window = {
localStorage: {}
}

49. Mocking required files
// MyTest.test.js
jest.mock('../../package.json', () => {
return {
description: 'Description',
version: 'test',
copyright: 'My Company',
dependencies: {'dep_lib': '0.0'}
}
});

50. E aí?
Dúvidas?