Meetup React Sanca - 29/11/18 - React Testing

Talk a respeito de testes automatizados no frontend (E2E, integração, unitários e visual), dando destaque a aplicações React. A talk foca na utilização da biblioteca react-testing-library desenvolvida por Kent C. Dodds em 2018. Nela, explico o porquê de optarmos por ela, em quais casos ela melhor se aplica e dou alguns exemplos de utilização.

1. REACT TESTING
react-testing-library

2. AGENDA
●What to test
●Use cases
●Shallow rendering vs. DOM
●react-testing-library (RTL)
●Examples
●Pros
●Cons
●Visual regression tests

3. AUGUSTO
LAZARO
Software Engineer @ Entria
React, React Native, GraphQL, Relay,
MongoDB, Koa, TypeScript...


GitHub: @augustolazaro
Twitter: @augustoeml
Email: [email protected]

4. WHAT TO TEST*
e2e
Integration
Unit
enzyme ( )
react-testing-library

6. Shallow
rendering
DOM
VS.

7. Shallow
rendering
DOM
VS.
Coder User

8. react-testing-library

●https://github.com/kentcdodds/react-testing-library
●Kent C. Dodds
●Utility functions on top of react-dom and react-dom/test-utils
●DOM testing

“The more your tests resemble the way your software is used, the more
confidence they can give you.”

11. API
●getByText: Fetches a node by the node’s text content
●getByLabelText: Fetches a node by its corresponding HTML <label/>text.
●getByAltText: Fetches an image node by its alt text
●getByPlaceholderText: Fetches a text input by its placeholder text.
●getByTextId: An “escape hatch” for fetching nodes by its
data-testidattribute in cases where there is no text to fetch by.

12. dom-testing-library API
●wait
●waitForElement
●fireEvent: Fire DOM events

13. UTILS
●rerender: this function can be used to update props of the rendered
component
●unmount: This will cause the rendered component to be unmounted
●debug: console.log(prettyDOM(baseElement))

14. PROS
●Built-in wait command
●API focuses on fetching by visible text on the page
●Also available to React Native

15. CONS
●Mock is not that simple
●So as test different variations of a page

16. *Kent C. Dodds appreciation slide*

17. *WHAT TO TEST
Visual regression testing
●Based in snapshots
●Test what users see
●Code changes doesn’t matter
●Loki, BackstopJS, Diferencify

18. Thanks!

19. Any feedback?

entria.feedback.house/augusto.lazaro