How confident are you in your React app? Does your UI render after you add a new item to the nav menu? What about style changes - do you know how a font change affects the rest of your app? If you want to have confidence in your React app, you need to have tests. Unfortunately, most testing frameworks are hard to set up, and it takes too long to run them. But this is not the case with Jest! Jest allows React developers to get a quick test result for any change on the app. And setting up Jest on React has never been easier than today! In this talk, we look at how React apps are tested E2E and why Jest stands out compared to other test frameworks. We do a live demo while implementing several main test scenarios using Jest - get ready to code along!

1. Testing React with
Jest:
Validate Your Components Quickly!
@DmitryVinnik 1

2. What do developers
love the most?
@DmitryVinnik 2

3. @DmitryVinnik dvinnik.dev
3

4. @DmitryVinnik dvinnik.dev
4

5. More often than not
@DmitryVinnik 5

6. @DmitryVinnik dvinnik.dev
6

7. But I hope one day
@DmitryVinnik 7

8. What are our goals?
@DmitryVinnik dvinnik.dev
8

9. Testing
@DmitryVinnik 9

10. What is testing?
@DmitryVinnik 10

11. Why do we test?
@DmitryVinnik 11

12. Testing
@DmitryVinnik 12

13. Testing
@DmitryVinnik 13
Confidence

14. Testing
@DmitryVinnik 14
Confidence Documentation

15. Testing
@DmitryVinnik 15
Confidence Documentation
Productivity

16. Testing
@DmitryVinnik 16
Confidence Documentation
Standardization
Productivity

17. How do we test?
@DmitryVinnik 17

18. Test Pyramid
↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost
@DmitryVinnik

19. Enough Theory!
@DmitryVinnik 19

20. Let’s practice a little
@DmitryVinnik 20

21. Testing React
@DmitryVinnik 21

22. What do we need?
@DmitryVinnik 22

23. Testing React
@DmitryVinnik 23

24. Testing React
@DmitryVinnik 24
React

25. @DmitryVinnik 25

26. @DmitryVinnik 26

27. @DmitryVinnik 27

28. @DmitryVinnik 28

29. @DmitryVinnik 29

30. Testing React
@DmitryVinnik 30
React

31. Testing React
@DmitryVinnik 31
React Jest

32. @DmitryVinnik 32

33. @DmitryVinnik 33

34. @DmitryVinnik 34

35. Let’s take a closer look
@DmitryVinnik 35

36. @DmitryVinnik 36

37. @DmitryVinnik 37

38. @DmitryVinnik 38

39. @DmitryVinnik 39

40. @DmitryVinnik 40

41. @DmitryVinnik 41

42. @DmitryVinnik 42

43. @DmitryVinnik 43

44. @DmitryVinnik 44

45. @DmitryVinnik 45
youtu.be/7r4xVDI2vho

46. In short
@DmitryVinnik 46

47. Jest
@DmitryVinnik 47

48. Test Platform
@DmitryVinnik 48

49. Testing React
@DmitryVinnik 49
React Jest

50. Testing React
@DmitryVinnik 50
React Jest
React
Testing
Library

51. @DmitryVinnik 51

52. @DmitryVinnik 52

53. @DmitryVinnik 53

54. Tldr
@DmitryVinnik 54

55. Testing Library
@DmitryVinnik 55

56. Testing Tool
@DmitryVinnik 56

57. To compare
@DmitryVinnik 57

58. @DmitryVinnik 58

59. Testing React
@DmitryVinnik 59
React Jest
React
Testing
Library

60. Testing React
@DmitryVinnik 60
React Jest
Puppeteer
React
Testing
Library

61. @DmitryVinnik 61

62. @DmitryVinnik 62

63. @DmitryVinnik 63

64. @DmitryVinnik 64

65. In short
@DmitryVinnik 65

66. Puppeteer
@DmitryVinnik 66

67. Testing Browser
@DmitryVinnik 67

68. Testing React
@DmitryVinnik 68
React Jest
Puppeteer
React
Testing
Library

69. Remember Test
Pyramid?
@DmitryVinnik 69

70. Test Pyramid
@DmitryVinnik
↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost

71. Only works in
an ideal world
@DmitryVinnik 71

72. What about
the real world?
@DmitryVinnik 72

73. @DmitryVinnik 73

74. Let’s see
testing in action
@DmitryVinnik 74

75. @DmitryVinnik 75

76. React Testing Types
@DmitryVinnik 76

77. React Testing Types
@DmitryVinnik 77
Simple DOM
Tests

78. @DmitryVinnik 78

79. @DmitryVinnik 79

80. @DmitryVinnik 80

81. @DmitryVinnik 81

82. @DmitryVinnik 82

83. @DmitryVinnik 83

84. React Testing Types
@DmitryVinnik 84
Simple DOM
Tests

85. React Testing Types
@DmitryVinnik 85
Simple DOM
Tests
Snapshot
Tests

86. @DmitryVinnik 86

87. @DmitryVinnik 87

88. @DmitryVinnik 88

89. @DmitryVinnik 89

90. @DmitryVinnik 90

91. @DmitryVinnik 91

92. @DmitryVinnik 92

93. React Testing Types
@DmitryVinnik 93
Simple DOM
Tests
Snapshot
Tests

94. React Testing Types
@DmitryVinnik 94
Simple DOM
Tests
Snapshot
Tests
E2E Tests

95. @DmitryVinnik 95

96. @DmitryVinnik 96

97. @DmitryVinnik 97

98. @DmitryVinnik 98

99. React Testing Types
@DmitryVinnik 99
Simple DOM
Tests
Snapshot
Tests
E2E Tests

100. Call to Action
@DmitryVinnik 100

101. Call to Action
Don’t Avoid
Testing
@DmitryVinnik 101

102. Call to Action
Don’t Avoid
Testing
Don’t Go
Overboard
@DmitryVinnik 102

103. Call to Action
Don’t Avoid
Testing
Don’t Go
Overboard
Contribute Back
@DmitryVinnik 103

104. About Me
Twitter: @DmitryVinnik
Blog: dvinnik.dev
LinkedIn: in/dmitry-vinnik/
Email: dmitry@dvinnik.dev
104