Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get start with react-test-library.

Get start with react-test-library.

C66863aa3cc145cf7d5ff8e1c40a7db8?s=128

Simone Amorim

September 22, 2020
Tweet

Transcript

  1. React -by SIMONE AMORIM testing-library

  2. O que devo testar? O teste deve parecer o mais

    possível da interação do usuário com nosso código.
  3. O que devo testar? Não testamos se o valor de

    uma prop está correto. Testar o comportamento do usuário final e não do código. Em vez de nos concentrarmos no código e em como ele funciona, simplesmente assumimos a perspectiva do usuário.
  4. Acessando e renderizando a árvore do DOM

  5. Qual devo usar?

  6. screen queryBy* 03 • igual ao getBy* • para elementos

    fora do DOM • retorna null findBy* 02 • assíncronas • aguarda uns 5min pra checar o DOM • gera um erro getBy* 01 • síncronas • confere o elemento no DOM • retorna um erro
  7. Qual devo usar?

  8. Qual devo usar? Test IDs 03 • getByTestId Queries semânticas

    02 • getByAltText • getByTitle Queries acessíveis para qualquer pessoa. 01 • getByRole • getByLabelText • getByPlaceholderText • getByText • getByDisplayValue
  9. screen.getByRole("") Você deveria usar IDs apenas como última alternativa!

  10. Qual devo usar?

  11. Qual devo usar?

  12. Qual devo usar?

  13. debug() Permite imprimir a árvore do DOM

  14. Interagindo com elementos do DOM

  15. Existem duas formas de interagir com eventos.

  16. None
  17. Esperando por dados

  18. None
  19. Qual devo usar?

  20. Qual devo usar?

  21. Mocking requisições da API

  22. None
  23. Referências • Which query should I use? • Common mistakes

    with React Testing Library • Accessibility tree (AOM) • Testing Playground • Considerations for fireEvent • Fix the "not wrapped in act(...)" warning
  24. Vlws Galera! SIMONE AMORIM FEEDBACKS SÃO BEM VINDOS