1
00:00:01,170 --> 00:00:02,910
Instructor: In the last section, we wrote out our

2
00:00:02,910 --> 00:00:05,100
simulate-change event handler right here,

3
00:00:05,100 --> 00:00:07,830
and we made sure that we passed in a fake event object

4
00:00:07,830 --> 00:00:10,770
that will be provided to our callback function.

5
00:00:10,770 --> 00:00:13,740
So now, we get to move on to the next step in this diagram.

6
00:00:13,740 --> 00:00:16,170
So on here, we had said that we were going to

7
00:00:16,170 --> 00:00:18,450
attempt to force the component to update.

8
00:00:18,450 --> 00:00:20,490
And when we went through this checklist right here,

9
00:00:20,490 --> 00:00:23,640
originally, I had kind of skipped over this step right here.

10
00:00:23,640 --> 00:00:25,200
So now, it's time to talk about

11
00:00:25,200 --> 00:00:28,290
why we need to actually force the component to update.

12
00:00:28,290 --> 00:00:30,810
So the reason is actually kind of straightforward.

13
00:00:30,810 --> 00:00:33,210
Let's go back to our actual component definition

14
00:00:33,210 --> 00:00:35,040
inside of our CommentBox file

15
00:00:35,040 --> 00:00:37,503
and we'll take a look at that event handler.

16
00:00:38,490 --> 00:00:39,540
So here's CommentBox,

17
00:00:39,540 --> 00:00:42,750
and here's our handleChange event handler.

18
00:00:42,750 --> 00:00:44,250
So remember, when we reviewed

19
00:00:44,250 --> 00:00:46,710
how this entire component worked a moment ago,

20
00:00:46,710 --> 00:00:49,230
we had said that setState gets called right here,

21
00:00:49,230 --> 00:00:51,753
and that forces our component to re-render.

22
00:00:52,710 --> 00:00:53,610
When it re-renders,

23
00:00:53,610 --> 00:00:56,940
we take the new value of this.state.comment

24
00:00:56,940 --> 00:00:59,280
and shove it into the text area.

25
00:00:59,280 --> 00:01:00,540
Now, the key step in there

26
00:01:00,540 --> 00:01:04,110
is that we want our component to re-render automatically

27
00:01:04,110 --> 00:01:05,790
when we call setState.

28
00:01:05,790 --> 00:01:07,590
And as we very well know about React,

29
00:01:07,590 --> 00:01:09,120
anytime we call setState,

30
00:01:09,120 --> 00:01:12,180
boom, our component automatically re-renders.

31
00:01:12,180 --> 00:01:14,910
But there's a tiny little detail in there

32
00:01:14,910 --> 00:01:16,860
that you need to be aware of.

33
00:01:16,860 --> 00:01:19,620
When you and I call setState,

34
00:01:19,620 --> 00:01:23,073
it triggers our component to be re-rendered asynchronously.

35
00:01:24,270 --> 00:01:26,280
In other words, when we call setState,

36
00:01:26,280 --> 00:01:30,210
it does not cause our component to instantly re-render like,

37
00:01:30,210 --> 00:01:32,280
right here, right away.

38
00:01:32,280 --> 00:01:34,860
Like right here, re-render.

39
00:01:34,860 --> 00:01:37,230
It does not instantly occur.

40
00:01:37,230 --> 00:01:40,920
Instead, it queues up a request for an update

41
00:01:40,920 --> 00:01:42,540
inside of React.

42
00:01:42,540 --> 00:01:43,447
And React says,

43
00:01:43,447 --> 00:01:45,510
"Oh, it looks like someone just called setState.

44
00:01:45,510 --> 00:01:48,120
Yeah, I'll get around to updating that component

45
00:01:48,120 --> 00:01:50,040
when I feel like it."

46
00:01:50,040 --> 00:01:53,790
And so that might be at some point in time in the future.

47
00:01:53,790 --> 00:01:54,990
So when you and I

48
00:01:54,990 --> 00:01:58,530
get this handleChange callback right here called

49
00:01:58,530 --> 00:02:00,150
and setState is invoked,

50
00:02:00,150 --> 00:02:03,270
it does not immediately update our component.

51
00:02:03,270 --> 00:02:04,980
And that's an issue for you and I

52
00:02:04,980 --> 00:02:06,660
with our test file over here

53
00:02:06,660 --> 00:02:09,300
because the instant that we simulate that change

54
00:02:09,300 --> 00:02:10,979
right after that line of code,

55
00:02:10,979 --> 00:02:13,200
you and I want to write an expression

56
00:02:13,200 --> 00:02:15,727
that immediately looks at that component and says,

57
00:02:15,727 --> 00:02:18,390
"Oh yeah, the new value is now available."

58
00:02:18,390 --> 00:02:20,370
So we cannot do that instantly

59
00:02:20,370 --> 00:02:22,350
because setState is asynchronous

60
00:02:22,350 --> 00:02:24,000
and we have to kind of wait

61
00:02:24,000 --> 00:02:26,073
for the actual re-render to kick in.

62
00:02:27,420 --> 00:02:28,830
Now, in order to get around that,

63
00:02:28,830 --> 00:02:30,090
in order to make sure that you and I

64
00:02:30,090 --> 00:02:34,020
don't have to wait for the re-render to be issued by React,

65
00:02:34,020 --> 00:02:36,300
we're going to, instead, force our component

66
00:02:36,300 --> 00:02:38,160
to automatically re-render itself.

67
00:02:38,160 --> 00:02:40,020
We're going to force it to re-render.

68
00:02:40,020 --> 00:02:41,850
So that's the purpose of this step right here.

69
00:02:41,850 --> 00:02:44,490
We want to make sure, 100% sure,

70
00:02:44,490 --> 00:02:46,500
that that component re-renders itself

71
00:02:46,500 --> 00:02:49,320
and a new value is shoved into that text area

72
00:02:49,320 --> 00:02:51,513
so that we can then write an assertion.

73
00:02:52,470 --> 00:02:54,210
Now, to force the component to update,

74
00:02:54,210 --> 00:02:57,000
fortunately, Enzyme, again, has our back.

75
00:02:57,000 --> 00:03:00,030
So if we, again, go look at the Enzyme documentation,

76
00:03:00,030 --> 00:03:01,383
we can find,

77
00:03:02,550 --> 00:03:04,170
where was it?

78
00:03:04,170 --> 00:03:05,550
U's, we're looking for U's.

79
00:03:05,550 --> 00:03:08,190
Update right here, towards the bottom.

80
00:03:08,190 --> 00:03:11,190
So if we call update on a reference to a component,

81
00:03:11,190 --> 00:03:13,410
that will force the component to re-render itself.

82
00:03:13,410 --> 00:03:14,710
And that's pretty much it.

83
00:03:15,780 --> 00:03:18,360
So back over inside of our test file,

84
00:03:18,360 --> 00:03:20,460
after simulating that change event,

85
00:03:20,460 --> 00:03:24,333
I will call wrapped.update.

86
00:03:25,950 --> 00:03:27,060
Like so.

87
00:03:27,060 --> 00:03:28,920
And then right after that, so like right here,

88
00:03:28,920 --> 00:03:30,840
we can actually write out our assertion

89
00:03:30,840 --> 00:03:32,130
to look at that text area

90
00:03:32,130 --> 00:03:35,370
and make sure that it has received the correct value.

91
00:03:35,370 --> 00:03:36,690
And in our case, the correct value

92
00:03:36,690 --> 00:03:39,000
is going to be the string of new comment right here.

93
00:03:39,000 --> 00:03:40,110
Because that's, essentially,

94
00:03:40,110 --> 00:03:42,270
the value that we tricked our component

95
00:03:42,270 --> 00:03:44,610
into thinking that it just received.

96
00:03:44,610 --> 00:03:46,110
All right, so let's take a quick pause right here.

97
00:03:46,110 --> 00:03:47,250
We'll come back in the next section,

98
00:03:47,250 --> 00:03:50,460
and we'll figure out how to actually write the expectation

99
00:03:50,460 --> 00:03:52,020
that we'll make sure that the text area

100
00:03:52,020 --> 00:03:53,733
received the appropriate value.