Dans cette formation React Testing Library, vous allez apprendre à rédiger des tests unitaires pour : - Tester le comportement des composants React, - Évaluer votre programme - Mesurer la qualité logicielle, - Et, éviter les régressions pour réduire la dette technique Dans tout cycle de développement, les tests unitaires sont importants pour s’assurer que le programme fonctionne comme entendu et que celui-ci corresponde aux besoins des utilisateurs cibles. Les tests s’imposent à l'équipe de développement pour vérifier et valider que le comportement de l’application logicielle est conforme au cahier des charges. C’est un métier à part entière avec plusieurs niveaux de tests. Ce que nous allons voir, dans ce programme, sont les tests unitaires des composants React. # Le DOM Testing Library On découvre, en premier, le DOM Testing Library comme solution légère pour tester les nœuds du DOM avec un tour rapide de l'API, guide d'installation, puis un exemple d'usage des méthodes utilitaires pour tester les composants avec DOM Testing Library.

1. Formation
React Testing Library
Une formation
Sandy LUDOSKY

2. Une formation
Introduction
1. Dom Testing Library
2. React Testing Library
3. React Testing Library Reference API
○ méthodes utilitaires
○ render options
○ render results & queries
4. Events : tester les interactions utilisateurs
5. Test Driven Development avec RTL
6. React Hooks Testing Library
7. Tester les méthodes asynchrones
Conclusion
Plan de la formation

3. Une formation
Développeurs Front
Intégrateurs web
Chefs et facilitateurs de projet
Public concerné

4. Une formation
Connaissances requises
HTML, CSS & JS
Node
Une première expérience avec ReactJS
les composants : state et props
les hooks
les gestionnaires d’événements

6. Présentation du projet
Une formation
Sandy LUDOSKY

7. Une formation
Présentation du projet
Démos & travaux pratiques
Test Driven Development
Appels réseau & Promise

8. Ressources et outils
Une formation
Sandy LUDOSKY

9. Une formation
Ressources & outils
Visual Studio Code
Node.js & Npm
React 17+ / React CLI
React Developer Tools
Redux Developer Tools

10. Une formation
Visual Studio Code

11. Une formation
Node.js & Npm

12. Une formation
React
React 17+ / React CLI
React Developer Tools

13. Une formation
Les ressources
Les fichiers téléchargeables 📁
Les outils ⚙
Ressources

14. Une formation
Sandy LUDOSKY
Découvrir DOM Testing Library

15. Une formation
DOM Testing Library
Libraire légère qui fournit les méthodes
utilitaires pour tester les noeuds du DOM
react-dom/test-utils

16. Une formation
Propriétés
Ecrire des tests maintenables
Tester les composants
Tester interactions utilisateurs

17. Une formation
Sandy LUDOSKY
Découvrir React Testing
Library

18. Une formation
React Testing Library
S’appuie sur la librairie DOM Testing
Librairie pour tester les composants React
react-dom/test-utils
react-testing-library

19. Une formation
Propriétés
Ecrire des tests maintenables
Tester les composants
Tester interactions utilisateurs

20. Une formation
Sandy LUDOSKY
Découvrir les Principes & usages
de React Testing Library

21. Une formation
Guide d’usage
Tests expérience utilisateur
Requête des nodes du DOM
Pas de test des détails d’implémentation

22. Une formation
Sandy LUDOSKY
Conclusion

23. Une formation
Sandy LUDOSKY
Découvrir les méthodes et fonctions
avec React Testing Library Référence
API

24. Une formation
Méthodes et fonctions
Render
Rerender
beforeEach et afterEach
debug() & cleanup()

25. Une formation
Sandy LUDOSKY
Tester avec la méthode
render

26. Une formation
Méthode render
Renvoie un container
Affiche un composant
Attache une div au DOM
document.body

27. export function render(
ui: React.ReactElement,
options?: Omit<RenderOptions,
'queries'>,
): RenderResult

28. import { render } from'@testing-
library/react'
render(<div />)

29. it("renders component", () => {
const { container } = render(<App />)
expect(container).toBeDefined()
})

30. Une formation
Méthode render
it()
render()
expect()
describe()

31. Une formation
Sandy LUDOSKY
Appliquer la méthode render

32. import { render } from'@testing-
library/react'
render(<div />)

33. it("renders component", () => {
const { container } = render(<App />)
expect(container).toBeDefined()
})

34. Une formation
Démo

35. Une formation
Sandy LUDOSKY
Tester les mises à jour rerender

36. Render results : rerender
f
rerender: (ui:
React.ReactElement) => void

37. Une formation
Sandy LUDOSKY
Appliquer le test des mises à
jours avec rerender

38. Méthode rerender
f
rerender: (ui:
React.ReactElement) => void

39. Une formation
Démo

40. Une formation
Sandy LUDOSKY
Déboguer avec debug()

41. debug()
f
const { debug } = render(<App />)

42. it("renders component", () => {
const { debug } = render(<App />)
debug()
})
debug()
f

43. Une formation
Démo

44. Une formation
Sandy LUDOSKY
Préparer et répéter
beforeEach & afterEach

45. Une formation
beforeEach
Pour préparer
S’applique à tous les tests
S’applique avant chaque test

46. beforeEach
f
beforeEach(() => {
console.log("s’affiche avant chaque
test")
});

47. Une formation
afterEach
Pour nettoyer
S’applique à tous les tests
S’applique après chaque test

48. afterEach
f
afterEach(() => {
console.log("s’affiche après chaque
test")
});

49. Une formation
Démo

50. Une formation
Sandy LUDOSKY
Nettoyer après chaque test
cleanup()

51. Une formation
cleanup
Pour préparer
S’applique à tous les tests
S’applique avant chaque test

52. cleanup
f
beforeEach(() => {
console.log("s’affiche avant chaque
test")
});

53. Une formation
Démo

54. Sandy LUDOSKY
Découvrir les options render dans
React Testing Library Référence API
Une formation

55. Une formation
Render options
Container & baseElement
Queries
Wrapper
hydrate (vs. render)

56. container & baseElement
Une formation
container => baseElement
<div />
attaché au document.body
retourne composant à tester

57. queries
import {queries} from '@testing-library/react'
import App from './App’
const {getByRole, getByText} = render(<App />)

58. import {queries} from '@testing-library/react'
// Example, a function to traverse table contents
import * as tableQueries from 'my-table-query-library'
import Table from './Table’
const {getByRowColumn, getByText} = render(<Table />,
{
queries: {...queries, ...tableQueries},
})
queries

59. wrapper
Une formation
Enrober le composant rendu
Render custom est réutilisable

60. hydrate
Une formation
Rendre les composants avec hydrate
utile pour le SSR

61. Une formation
Sandy LUDOSKY
Spécifier un container

62. Une formation
Container
container => baseElement
<div />
attaché au document.body
retourne composant à tester

63. const table = document.createElement('table')
const {container} = render(<TableBody {...props} />, {
container: document.body.appendChild(table),
})
Spécifier un container

64. Une formation
Sandy LUDOSKY
Enrichir l’API de nouvelles
queries

65. API de nouvelles queries
import * as tableQueries from 'my-table-query-library'
import {queries} from '@testing-library/react'
const {getByRowColumn, getByText} = render(<MyTable
/>, {
queries: {...queries, ...tableQueries},
})

66. Une formation
Sandy LUDOSKY
Créer des render réutilisables

67. render réutilisables
const customRender = (ui, options) =>
render(ui, {wrapper: Wrapper, ...options})
export {customRender as render}

68. Une formation
Sandy LUDOSKY
Découvrir render results & queries

69. Une formation
render results & queries
container
asFragment
rerender
unmount
debug
...queries (getByText, ….)

70. Une formation
Sandy LUDOSKY
Découvrir un exemple
De render results

71. Une formation
Démo

72. Une formation
Sandy LUDOSKY
Découvrir les render results
queries

73. Une formation
render results & queries
getByText
getByLabelText
getByPlaceholderText
getByDisplayValue
getByAltText
getByTitle
getByRole (level, within)
getByTestId

74. Une formation
Démo

75. Une formation
Sandy LUDOSKY
Events
Tester les interactions
utilisateurs

76. fireEvent()
fireEvent(node: HTMLElement, event: Event)

77. fireEvent.change(getByLabelText(/username/i),
{target: {value: 'a'}})
fireEvent()

78. Une formation
Tester les intéractions
fireEvent()
fireEvent.change()
fireEvent.click()
fireEvent.submit()

79. Une formation
Sandy LUDOSKY
Tester les interactions utilisateurs
fireEvent.change

80. Une formation
Démo

81. Une formation
Sandy LUDOSKY
Tester les interactions utilisateurs
fireEvent.click

82. Une formation
Démo

83. Une formation
Sandy LUDOSKY
Tester les interactions utilisateurs
fireEvent.submit

84. Une formation
Démo

85. Une formation
Sandy LUDOSKY
Tester les interactions utilisateurs
fireEvent.keydown

86. Une formation
Démo

87. Une formation
Sandy LUDOSKY
Test Driven Development
RTL

88. Une formation
Démo

89. Une formation
Sandy LUDOSKY
Découvrir React Hooks Testing
Library

90. Une formation
React hooks testing library
Tester hook en dehors du composant
Tester un custom hook

91. Une formation
React hooks testing library
testing-library/react-hooks-testing-library

92. React hooks testing library
const { result } = renderHook(()
=> useHook())

93. Une formation
Sandy LUDOSKY
React Hooks Testing Library
Démo

94. Une formation
Démo