1
00:00:06,480 --> 00:00:08,400
- In this section, we're
going to take a look

2
00:00:08,400 --> 00:00:10,710
at how to use JSDOM.

3
00:00:10,710 --> 00:00:15,330
JSDOM is a pure-JavaScript
library that implements HTML

4
00:00:15,330 --> 00:00:17,250
and the document object model.

5
00:00:17,250 --> 00:00:20,700
Effectively, JSDOM is an emulation library

6
00:00:20,700 --> 00:00:24,750
that mimics a subset of
a browser's capabilities.

7
00:00:24,750 --> 00:00:26,640
It behaves like a mock browser

8
00:00:26,640 --> 00:00:30,150
in which we can execute
our JavaScript tests.

9
00:00:30,150 --> 00:00:32,910
So, under normal circumstances,

10
00:00:32,910 --> 00:00:34,960
when you're running your JavaScript code,

11
00:00:36,030 --> 00:00:37,350
full steam ahead,

12
00:00:37,350 --> 00:00:40,110
obviously your JavaScript
would run inside a browser,

13
00:00:40,110 --> 00:00:41,070
and that's fine,

14
00:00:41,070 --> 00:00:44,220
it can access the document
object inside a browser.

15
00:00:44,220 --> 00:00:47,280
But, when you are running JavaScript tests

16
00:00:47,280 --> 00:00:50,010
those tests do not run inside the browser,

17
00:00:50,010 --> 00:00:52,410
so we have to have something
else that provides us

18
00:00:52,410 --> 00:00:55,080
a document object that
we can test against.

19
00:00:55,080 --> 00:00:57,210
And that's what JSDOM gives us.

20
00:00:57,210 --> 00:01:00,750
JSDOM is effectively a mock browser.

21
00:01:00,750 --> 00:01:02,520
It provides a document object,

22
00:01:02,520 --> 00:01:05,190
and a document object model API,

23
00:01:05,190 --> 00:01:08,490
and our code then executes against JSDOM

24
00:01:08,490 --> 00:01:11,280
instead of executing
against an actual browser.

25
00:01:11,280 --> 00:01:14,460
Our code and our tests are
exactly the same as before,

26
00:01:14,460 --> 00:01:17,400
except they execute in
a different environment.

27
00:01:17,400 --> 00:01:20,790
So, in our tests, we can write code

28
00:01:20,790 --> 00:01:24,573
to load content into the
document object model.

29
00:01:26,700 --> 00:01:28,440
Our actual code that we're trying to test

30
00:01:28,440 --> 00:01:31,980
can use the DOM API to access content,

31
00:01:31,980 --> 00:01:33,570
add elements, remove elements,

32
00:01:33,570 --> 00:01:34,530
that kind of thing.

33
00:01:34,530 --> 00:01:37,020
And then in our tests, we can make sure

34
00:01:37,020 --> 00:01:39,840
that the document object model is correct.

35
00:01:39,840 --> 00:01:44,550
Has my code updated the
document object model correctly?

36
00:01:44,550 --> 00:01:48,150
Right, so we're gonna see how
to do that in this section.

37
00:01:48,150 --> 00:01:52,830
Jest, luckily for us, already
includes the JSDOM library.

38
00:01:52,830 --> 00:01:55,530
So there's very little
work that you need to do

39
00:01:55,530 --> 00:01:57,513
to use JSDOM in Jest.

40
00:01:58,440 --> 00:02:01,200
There is one slight
caveat, and that's this,

41
00:02:01,200 --> 00:02:05,550
by default Jest runs in node JS mode.

42
00:02:05,550 --> 00:02:06,570
So in other words,

43
00:02:06,570 --> 00:02:09,510
it assumes that your JavaScript tests

44
00:02:09,510 --> 00:02:12,333
will be executing
effectively on the server.

45
00:02:13,170 --> 00:02:16,800
If you've got Jest code that
wants to access a webpage,

46
00:02:16,800 --> 00:02:20,970
then you've gotta tell Jest
to run in JSDOM mode instead.

47
00:02:20,970 --> 00:02:24,480
Okay, so by default,
Jess runs in server mode

48
00:02:24,480 --> 00:02:26,640
and it doesn't create a document object.

49
00:02:26,640 --> 00:02:29,490
You have to set a flag
that tells Jest to run in

50
00:02:29,490 --> 00:02:33,720
JSDOM mode, so that it
enables client-side testing,

51
00:02:33,720 --> 00:02:37,890
you can then write tests
using the document object.

52
00:02:37,890 --> 00:02:39,960
So the JSDOM intro folder

53
00:02:39,960 --> 00:02:42,780
is where we're going to be
looking in this section.

54
00:02:42,780 --> 00:02:46,920
This is what it looks like,
lesson 8, JSDOM intro.

55
00:02:46,920 --> 00:02:51,750
If you open that folder in a
code editor it looks like this.

56
00:02:51,750 --> 00:02:55,080
I've got two tests, one
test that's gonna fail,

57
00:02:55,080 --> 00:02:56,910
and one test that's gonna pass.

58
00:02:56,910 --> 00:02:59,760
Okay? So we'll have a look
at the test that fails first

59
00:02:59,760 --> 00:03:01,410
and we'll see why it fails.

60
00:03:01,410 --> 00:03:03,180
And then we'll have a look
at the test that passes

61
00:03:03,180 --> 00:03:06,090
afterwards and we'll see why that passes.

62
00:03:06,090 --> 00:03:09,240
So, first of all, this
test is going to fail.

63
00:03:09,240 --> 00:03:11,190
This is the first test.

64
00:03:11,190 --> 00:03:15,030
In my test I grab the document object,

65
00:03:15,030 --> 00:03:17,520
and I assume that it exists.

66
00:03:17,520 --> 00:03:21,090
So what could possibly
go wrong in that test?

67
00:03:21,090 --> 00:03:22,290
Well the problem is,

68
00:03:22,290 --> 00:03:26,610
that by default, Jest thinks
we're running in server mode,

69
00:03:26,610 --> 00:03:30,420
and that on the server you
don't need a document object.

70
00:03:30,420 --> 00:03:34,290
So if I ran this test Jest would fail,

71
00:03:34,290 --> 00:03:36,423
because it doesn't have a document object.

72
00:03:37,620 --> 00:03:41,490
The default test
environment there's no JS,

73
00:03:41,490 --> 00:03:46,080
server-side, not JSDOM, not browser side.

74
00:03:46,080 --> 00:03:50,130
Therefore, Jest doesn't
create a document object.

75
00:03:50,130 --> 00:03:52,410
Therefore, this test is going to fail.

76
00:03:52,410 --> 00:03:55,323
If I run that test,
you'll see that it fails.

77
00:03:56,208 --> 00:03:58,800
And the error message, you can see here,

78
00:03:58,800 --> 00:04:01,263
is complaining about the document object.

79
00:04:02,190 --> 00:04:04,350
The document object is not defined.

80
00:04:04,350 --> 00:04:07,020
And the reason for that
again, is because Jest thinks

81
00:04:07,020 --> 00:04:10,920
that this test is a
server test on the server.

82
00:04:10,920 --> 00:04:13,080
There's no need for a
document object model.

83
00:04:13,080 --> 00:04:14,370
So the document object,

84
00:04:14,370 --> 00:04:17,043
Jest didn't create the document object.

85
00:04:17,910 --> 00:04:20,910
So, the fix is actually
quite straightforward.

86
00:04:20,910 --> 00:04:24,660
What you do is you embed a block comment,

87
00:04:24,660 --> 00:04:25,493
would you believe,

88
00:04:25,493 --> 00:04:27,300
at the beginning of your file.

89
00:04:27,300 --> 00:04:31,470
Typically, you can do this
file by file if you like,

90
00:04:31,470 --> 00:04:33,180
or you can do it kind of globally,

91
00:04:33,180 --> 00:04:35,100
across your whole test suite.

92
00:04:35,100 --> 00:04:36,960
So, we'll see that in a moment.

93
00:04:36,960 --> 00:04:38,280
Just for now,

94
00:04:38,280 --> 00:04:41,340
if you've got one file
you can have this comment,

95
00:04:41,340 --> 00:04:45,210
this block comment,
Jest environment JSDOM.

96
00:04:45,210 --> 00:04:49,020
I've set in the jest environment
document block comment

97
00:04:49,020 --> 00:04:50,190
to be JSDOM.

98
00:04:50,190 --> 00:04:51,690
And that flips the mode,

99
00:04:51,690 --> 00:04:55,950
Jest now thinks that we're
running in JSDOM mode.

100
00:04:55,950 --> 00:04:59,430
Oh, you're running your
tests in a browser?

101
00:04:59,430 --> 00:05:01,740
So JSDOM,

102
00:05:01,740 --> 00:05:06,360
sorry, Jest will create
a document object for us,

103
00:05:06,360 --> 00:05:09,210
as if this document was a real webpage.

104
00:05:09,210 --> 00:05:11,400
This document object is actually provided

105
00:05:11,400 --> 00:05:14,684
by JSDOM virtually in pure JavaScript,

106
00:05:14,684 --> 00:05:16,920
but that doesn't affect our tests.

107
00:05:16,920 --> 00:05:19,200
As far as our tests are concerned,

108
00:05:19,200 --> 00:05:23,610
this behaves like a real webpage
that we can execute within.

109
00:05:23,610 --> 00:05:26,580
So, if we're running in JSDOM mode,

110
00:05:26,580 --> 00:05:30,960
then this document object
will be created by Jest,

111
00:05:30,960 --> 00:05:33,210
and it's gonna work.

112
00:05:33,210 --> 00:05:35,553
We've set the test environment to JSDOM,

113
00:05:36,450 --> 00:05:39,450
therefore Jest will
create a document object,

114
00:05:39,450 --> 00:05:42,300
and that test works successfully.

115
00:05:42,300 --> 00:05:45,543
So if I run that test, you'll
find that it works fine.

116
00:05:46,410 --> 00:05:49,860
And you can have a go at running
this test as well yourself,

117
00:05:49,860 --> 00:05:51,060
just to prove the point.

118
00:05:52,080 --> 00:05:53,580
Now, if you think about it,

119
00:05:53,580 --> 00:05:57,933
it would be okay to set that
flag on each individual file.

120
00:06:01,556 --> 00:06:02,506
In my example here,

121
00:06:03,840 --> 00:06:07,170
I have set the Jest
environment to be JSDOM.

122
00:06:07,170 --> 00:06:10,080
You can set that file by file if you like,

123
00:06:10,080 --> 00:06:12,900
but you can imagine that's
gonna get quite tiresome,

124
00:06:12,900 --> 00:06:13,833
quite quickly.

125
00:06:15,450 --> 00:06:19,410
So a better approach is
to set the flag globally.

126
00:06:19,410 --> 00:06:23,730
You can set in your Jest config JS file,

127
00:06:23,730 --> 00:06:24,930
you can set this.

128
00:06:24,930 --> 00:06:29,790
You can basically set a global
flag test environment JSDOM.

129
00:06:29,790 --> 00:06:32,790
Okay? So that means that all tests now

130
00:06:32,790 --> 00:06:35,430
will execute in JSDOM mode,

131
00:06:35,430 --> 00:06:39,150
therefore they'll have a document object.

132
00:06:39,150 --> 00:06:41,310
Now, you might have noticed,

133
00:06:41,310 --> 00:06:43,260
in my code suite,

134
00:06:43,260 --> 00:06:47,520
I do actually have a Jest config JS,

135
00:06:47,520 --> 00:06:49,440
but, I had it commented out.

136
00:06:49,440 --> 00:06:51,570
Okay? So basically when I ran my tests,

137
00:06:51,570 --> 00:06:54,390
this didn't actually apply.

138
00:06:54,390 --> 00:06:55,950
So, what I can do,

139
00:06:55,950 --> 00:06:58,860
is I can uncomment that code.

140
00:06:58,860 --> 00:07:00,937
If I uncomment that code,

141
00:07:00,937 --> 00:07:04,140
and then I ran the first test again,

142
00:07:04,140 --> 00:07:08,790
this first test would now
automatically run in JSDOM mode,

143
00:07:08,790 --> 00:07:10,860
because it's a global setting.

144
00:07:10,860 --> 00:07:12,663
So if I ran test one again,

145
00:07:13,860 --> 00:07:15,960
now it would work.

146
00:07:15,960 --> 00:07:17,910
Okay, so that's probably
the best thing to do.

147
00:07:17,910 --> 00:07:21,450
Probably in your test suite,
you're gonna have, you know,

148
00:07:21,450 --> 00:07:23,040
10, 20, 100

149
00:07:23,040 --> 00:07:26,220
individual test models.

150
00:07:26,220 --> 00:07:29,070
So rather than setting
each one individually

151
00:07:29,070 --> 00:07:31,020
to run in JSDOM mode,

152
00:07:31,020 --> 00:07:34,650
it's probably a better idea
to set it globally like this.

153
00:07:34,650 --> 00:07:37,380
Okay, and then all
tests will automatically

154
00:07:37,380 --> 00:07:40,053
enable you to implement DOM testing.