1
00:00:00,870 --> 00:00:02,220
Instructor: At the end of the last section,

2
00:00:02,220 --> 00:00:03,840
we spoke about how we're probably gonna have

3
00:00:03,840 --> 00:00:05,760
to do that same beforeEach thing

4
00:00:05,760 --> 00:00:07,770
for creating our new component instance

5
00:00:07,770 --> 00:00:09,780
for every test inside this file.

6
00:00:09,780 --> 00:00:11,340
And then we also very briefly mentioned

7
00:00:11,340 --> 00:00:14,190
that we still have to do that component cleanup right here.

8
00:00:14,190 --> 00:00:17,340
That needs to occur after every test we run.

9
00:00:17,340 --> 00:00:19,410
So let's first get started by extracting

10
00:00:19,410 --> 00:00:21,330
this common setup logic right here

11
00:00:21,330 --> 00:00:23,400
into a beforeEach statement.

12
00:00:23,400 --> 00:00:25,290
So we're gonna do the exact same thing

13
00:00:25,290 --> 00:00:29,340
that we just did inside of our App.test.js file.

14
00:00:29,340 --> 00:00:31,860
At the top, I'll first declare a new variable

15
00:00:31,860 --> 00:00:34,950
with the let keyword of wrapped.

16
00:00:34,950 --> 00:00:36,780
So that's going to initialize that variable

17
00:00:36,780 --> 00:00:39,540
in the scope of this entire file.

18
00:00:39,540 --> 00:00:41,090
I'll then define my beforeEach,

19
00:00:42,360 --> 00:00:45,753
and I'll make sure I pass it an arrow function, like so.

20
00:00:47,160 --> 00:00:49,590
Now inside the beforeEach statement,

21
00:00:49,590 --> 00:00:52,800
I will assign a value to the wrapped variable.

22
00:00:52,800 --> 00:00:57,270
So I'll say mount CommentBox.

23
00:00:57,270 --> 00:00:58,860
So now just like before,

24
00:00:58,860 --> 00:01:00,420
every time we're about to run a test,

25
00:01:00,420 --> 00:01:01,710
we're gonna create a new instance

26
00:01:01,710 --> 00:01:03,540
of the CommentBox and assign the result

27
00:01:03,540 --> 00:01:05,820
to this wrapped variable.

28
00:01:05,820 --> 00:01:08,700
So now we can clean up the wrapped variable declaration

29
00:01:08,700 --> 00:01:10,143
inside of our it statement.

30
00:01:11,280 --> 00:01:12,363
And that looks good.

31
00:01:13,740 --> 00:01:16,256
Now, I'll very quickly save this file

32
00:01:16,256 --> 00:01:19,290
and make sure that my tests are still passing.

33
00:01:19,290 --> 00:01:21,810
So back over here, it looks like we're good to go.

34
00:01:21,810 --> 00:01:23,820
So now we need to take care of that other task

35
00:01:23,820 --> 00:01:24,930
that we spoke about.

36
00:01:24,930 --> 00:01:27,570
We need to make sure that after every single test

37
00:01:27,570 --> 00:01:29,400
inside this file has been executed,

38
00:01:29,400 --> 00:01:32,430
we attempt to unmount or clean up the component

39
00:01:32,430 --> 00:01:34,440
that we created so that that component

40
00:01:34,440 --> 00:01:37,590
does not somehow pollute or otherwise interfere

41
00:01:37,590 --> 00:01:39,603
with other tests inside this file.

42
00:01:40,680 --> 00:01:43,560
So this is going to be some common cleanup code

43
00:01:43,560 --> 00:01:48,270
that needs to run after every other test inside this file.

44
00:01:48,270 --> 00:01:49,410
So as you might guess,

45
00:01:49,410 --> 00:01:51,660
just like this beforeEach statement right here,

46
00:01:51,660 --> 00:01:53,700
we have access to another helper

47
00:01:53,700 --> 00:01:56,043
from Jest called afterEach.

48
00:01:57,281 --> 00:02:00,570
afterEach is the exact opposite of beforeEach.

49
00:02:00,570 --> 00:02:02,730
So afterEach will run a function

50
00:02:02,730 --> 00:02:04,890
or a little chunk of code that you and I pass it

51
00:02:04,890 --> 00:02:08,130
after every single test is executed.

52
00:02:08,130 --> 00:02:10,532
So right underneath beforeEach right here,

53
00:02:11,370 --> 00:02:13,710
I'll define afterEach

54
00:02:13,710 --> 00:02:15,903
and I'll pass it an arrow function as well.

55
00:02:16,920 --> 00:02:18,510
So then inside of afterEach,

56
00:02:18,510 --> 00:02:20,130
we'll do our component cleanup,

57
00:02:20,130 --> 00:02:21,540
which is going to take the form

58
00:02:21,540 --> 00:02:24,750
of calling that wrapped things unmount method

59
00:02:24,750 --> 00:02:27,210
and you can see in the documentation for Enzyme,

60
00:02:27,210 --> 00:02:28,980
it's listed right here.

61
00:02:28,980 --> 00:02:30,330
If we click on unmount,

62
00:02:30,330 --> 00:02:32,220
it'll take us to the documentation.

63
00:02:32,220 --> 00:02:35,250
So all this function does is unmount the component

64
00:02:35,250 --> 00:02:37,620
from that fake DOM or from the DOM

65
00:02:37,620 --> 00:02:39,960
that is created by jsdom for us.

66
00:02:39,960 --> 00:02:41,670
It essentially takes that component

67
00:02:41,670 --> 00:02:43,620
out of the entire DOM structure.

68
00:02:43,620 --> 00:02:46,230
And so we don't have to worry about it somehow interfering

69
00:02:46,230 --> 00:02:49,533
with other components that are created in other tests.

70
00:02:51,420 --> 00:02:52,920
So inside of our afterEach,

71
00:02:52,920 --> 00:02:56,913
we'll simply call wrapped.unmount, like so.

72
00:02:58,170 --> 00:03:00,840
So now we can start to imagine the order of operations

73
00:03:00,840 --> 00:03:02,880
that occurs inside this file.

74
00:03:02,880 --> 00:03:04,560
When Jest first starts up,

75
00:03:04,560 --> 00:03:06,480
it's gonna find all the beforeEach statements

76
00:03:06,480 --> 00:03:08,760
inside of here, all the afterEach,

77
00:03:08,760 --> 00:03:10,620
and all the it statements.

78
00:03:10,620 --> 00:03:13,080
Then for every single it statement,

79
00:03:13,080 --> 00:03:14,630
we will execute the beforeEach,

80
00:03:15,480 --> 00:03:17,430
we'll execute the it,

81
00:03:17,430 --> 00:03:19,680
and then we'll execute the afterEach.

82
00:03:19,680 --> 00:03:21,600
And that process is gonna occur

83
00:03:21,600 --> 00:03:23,280
again and again and again

84
00:03:23,280 --> 00:03:25,950
for every it statement inside this file.

85
00:03:25,950 --> 00:03:28,740
So every it statement gets a brand new instance

86
00:03:28,740 --> 00:03:31,170
of CommentBox, the test runs,

87
00:03:31,170 --> 00:03:34,350
and then we do our cleanup automatically right here.

88
00:03:34,350 --> 00:03:36,600
So the pattern that you see inside this file right here

89
00:03:36,600 --> 00:03:38,310
is going to be a pattern that's repeated

90
00:03:38,310 --> 00:03:40,770
across just about every test file

91
00:03:40,770 --> 00:03:43,410
that we're gonna end up writing inside of our project.

92
00:03:43,410 --> 00:03:46,080
We've got our beforeEach to initialize our component,

93
00:03:46,080 --> 00:03:47,580
the afterEach to clean up,

94
00:03:47,580 --> 00:03:50,013
and then our list of it statements down below.

95
00:03:50,910 --> 00:03:52,200
So this looks pretty good.

96
00:03:52,200 --> 00:03:54,240
Let's make sure our tests are still passing

97
00:03:54,240 --> 00:03:56,580
and yep, it looks like we're good to go.

98
00:03:56,580 --> 00:03:58,020
So let's take a quick pause right here

99
00:03:58,020 --> 00:03:59,340
and we'll come back in the next section

100
00:03:59,340 --> 00:04:01,923
and continue testing our CommentBox component.