1
00:00:00,930 --> 00:00:02,880
Instructor: In the last section we finished up our tests

2
00:00:02,880 --> 00:00:04,920
around our app component.

3
00:00:04,920 --> 00:00:05,910
Now before we move on

4
00:00:05,910 --> 00:00:07,920
there's one little thing I want to change

5
00:00:07,920 --> 00:00:09,840
about our current project.

6
00:00:09,840 --> 00:00:12,270
So as you start to look at the top

7
00:00:12,270 --> 00:00:13,740
of our app dot test file,

8
00:00:13,740 --> 00:00:15,150
you'll notice that we're already starting

9
00:00:15,150 --> 00:00:17,340
to get these, kind of, import statements

10
00:00:17,340 --> 00:00:21,150
that have all these relative path references on them.

11
00:00:21,150 --> 00:00:22,770
So by default, when we're inside

12
00:00:22,770 --> 00:00:25,170
of any type of WebPAC based project

13
00:00:25,170 --> 00:00:27,270
or Node project for that matter,

14
00:00:27,270 --> 00:00:29,940
we always have to write out relative paths

15
00:00:29,940 --> 00:00:31,650
to the files that we're trying to import.

16
00:00:31,650 --> 00:00:32,520
So in other words

17
00:00:32,520 --> 00:00:34,710
because our app dot test dot JS file

18
00:00:34,710 --> 00:00:36,270
is inside the test directory,

19
00:00:36,270 --> 00:00:38,340
if we want to import app comment box

20
00:00:38,340 --> 00:00:40,380
or comment list we have to first write out

21
00:00:40,380 --> 00:00:43,080
an import that goes up one directory

22
00:00:43,080 --> 00:00:44,730
and then attempts to get access

23
00:00:44,730 --> 00:00:48,180
to the app file or a comment box or comment list.

24
00:00:48,180 --> 00:00:49,320
As we start implementing

25
00:00:49,320 --> 00:00:51,180
more tests inside this project,

26
00:00:51,180 --> 00:00:52,013
we're gonna end up

27
00:00:52,013 --> 00:00:55,080
with some pretty nasty path references.

28
00:00:55,080 --> 00:00:58,860
All because of this system of relative imports.

29
00:00:58,860 --> 00:01:00,960
So in this section we're gonna do a little bit

30
00:01:00,960 --> 00:01:04,290
of tweaking of our React project configuration here.

31
00:01:04,290 --> 00:01:05,370
And we're going to make all

32
00:01:05,370 --> 00:01:09,750
of our import statements instead use absolute references.

33
00:01:09,750 --> 00:01:11,730
So with an absolute reference we

34
00:01:11,730 --> 00:01:14,640
will instead give a path right here

35
00:01:14,640 --> 00:01:18,750
that is always absolute to the SRC directory.

36
00:01:18,750 --> 00:01:21,060
So in other words, if we're inside of app dot test

37
00:01:21,060 --> 00:01:21,893
and we want to get

38
00:01:21,893 --> 00:01:23,970
at our app dot JS file right here,

39
00:01:23,970 --> 00:01:25,590
we would write out an import statement

40
00:01:25,590 --> 00:01:27,780
that looks into components

41
00:01:27,780 --> 00:01:30,930
and then attempts to get at app dot JS.

42
00:01:30,930 --> 00:01:33,780
Now to be clear, this is not a required step.

43
00:01:33,780 --> 00:01:35,970
This is not related to testing at all.

44
00:01:35,970 --> 00:01:37,020
This is just a step

45
00:01:37,020 --> 00:01:39,450
that's gonna make our lives a little bit easier.

46
00:01:39,450 --> 00:01:41,010
And this is something that you can use

47
00:01:41,010 --> 00:01:44,943
on any React or Create React app project that you work on.

48
00:01:45,840 --> 00:01:48,510
So let's do this little tweak to our configuration

49
00:01:48,510 --> 00:01:49,650
that's going to make our project

50
00:01:49,650 --> 00:01:52,890
instead use absolute imports.

51
00:01:52,890 --> 00:01:54,450
So to do this, all we have to do

52
00:01:54,450 --> 00:01:57,810
is create a new file inside of our route directory.

53
00:01:57,810 --> 00:01:59,430
So I'm gonna make a new file

54
00:01:59,430 --> 00:02:02,133
and I'm going to name it dot ENV.

55
00:02:03,000 --> 00:02:04,500
So no file extension.

56
00:02:04,500 --> 00:02:05,520
Just dot.

57
00:02:05,520 --> 00:02:07,563
Just ENV, nothing else.

58
00:02:09,330 --> 00:02:10,470
Then inside of here,

59
00:02:10,470 --> 00:02:13,620
I'm gonna write out node underscore path

60
00:02:13,620 --> 00:02:16,773
equals SRC forward slash like so.

61
00:02:17,610 --> 00:02:19,010
So that's all we have to do.

62
00:02:19,890 --> 00:02:21,840
I'll then save this file.

63
00:02:21,840 --> 00:02:24,390
And then we need to restart our test runner

64
00:02:24,390 --> 00:02:27,060
and we also have to restart our server,

65
00:02:27,060 --> 00:02:28,380
our development server as well.

66
00:02:28,380 --> 00:02:29,730
And after we restart those

67
00:02:29,730 --> 00:02:30,900
we're gonna go through our project

68
00:02:30,900 --> 00:02:34,110
and update a couple of import statements.

69
00:02:34,110 --> 00:02:36,390
So I'm gonna go back over to my terminal.

70
00:02:36,390 --> 00:02:39,063
I'll find my test suite and I'm going to restart it.

71
00:02:40,020 --> 00:02:40,890
And I'll do the same

72
00:02:40,890 --> 00:02:43,590
with my running development server as well.

73
00:02:43,590 --> 00:02:46,140
So that's NPM run start for the development server.

74
00:02:47,130 --> 00:02:48,330
So while those are starting up

75
00:02:48,330 --> 00:02:50,040
and if you see an error in any of them.

76
00:02:50,040 --> 00:02:51,120
That's totally fine.

77
00:02:51,120 --> 00:02:52,590
While those are starting up I'm going

78
00:02:52,590 --> 00:02:54,360
to flip back over to my editor

79
00:02:54,360 --> 00:02:57,450
and we're going to update a couple of file references.

80
00:02:57,450 --> 00:02:58,470
So we'll first get started

81
00:02:58,470 --> 00:03:01,200
inside of our app dot test dot JS file.

82
00:03:01,200 --> 00:03:03,780
We've got three import statements inside of here

83
00:03:03,780 --> 00:03:06,330
that are currently using a relative imports.

84
00:03:06,330 --> 00:03:08,010
So we're gonna refactor all three of these

85
00:03:08,010 --> 00:03:12,303
to instead use absolute import paths from the SRC directory.

86
00:03:13,530 --> 00:03:16,290
Oh, automatic change over there.

87
00:03:16,290 --> 00:03:18,510
So I want to go from the SRC directory

88
00:03:18,510 --> 00:03:22,170
into components and then get each of those three files.

89
00:03:22,170 --> 00:03:24,870
So I'm going to now do components.

90
00:03:24,870 --> 00:03:26,490
App.

91
00:03:26,490 --> 00:03:31,320
Components, comment box, and components comment list

92
00:03:31,320 --> 00:03:32,880
like so.

93
00:03:32,880 --> 00:03:33,930
Now the benefit to this

94
00:03:33,930 --> 00:03:36,420
is that I can now move this test file around

95
00:03:36,420 --> 00:03:38,160
if I need to or I can move around

96
00:03:38,160 --> 00:03:40,830
those other component files around if I want to

97
00:03:40,830 --> 00:03:44,010
and it's not going to break any of these import statements.

98
00:03:44,010 --> 00:03:44,910
Well it'll break them

99
00:03:44,910 --> 00:03:48,360
but I can much more easily do a global find and replace.

100
00:03:48,360 --> 00:03:49,830
Excuse me, that's what I meant to say.

101
00:03:49,830 --> 00:03:51,480
We can much more easily do a global find

102
00:03:51,480 --> 00:03:55,080
and replace if we start to move around any of these files.

103
00:03:55,080 --> 00:03:58,800
Okay, so let's go and fix up our app dot JS file as well.

104
00:03:58,800 --> 00:04:00,960
So inside of here, no longer are we going

105
00:04:00,960 --> 00:04:02,340
from the same directory.

106
00:04:02,340 --> 00:04:06,130
We're going to instead do components comment box

107
00:04:07,020 --> 00:04:08,703
and components comment list.

108
00:04:09,810 --> 00:04:13,173
And the last step will be inside of our index dot JS file.

109
00:04:14,130 --> 00:04:17,459
So inside of here, we no longer need dot slash components.

110
00:04:17,459 --> 00:04:20,163
It will be just components slash app.

111
00:04:21,029 --> 00:04:24,900
All right, so I've updated all three of those files.

112
00:04:24,900 --> 00:04:26,490
I should now still be able to go back over

113
00:04:26,490 --> 00:04:28,980
to my application inside the browser

114
00:04:28,980 --> 00:04:30,780
and see it successfully refresh.

115
00:04:30,780 --> 00:04:32,880
So everything looks good over here

116
00:04:32,880 --> 00:04:34,260
and I should also be able to go back over

117
00:04:34,260 --> 00:04:35,340
to my running test suite

118
00:04:35,340 --> 00:04:37,050
and see all my test passing as well.

119
00:04:37,050 --> 00:04:39,600
So everything looks good over here as well.

120
00:04:39,600 --> 00:04:43,440
All right, like I said, this is entirely an optional change.

121
00:04:43,440 --> 00:04:45,570
This is not at all tied to testing

122
00:04:45,570 --> 00:04:47,220
in any way, shape, or form

123
00:04:47,220 --> 00:04:48,810
but when we start doing testing

124
00:04:48,810 --> 00:04:52,020
and we start getting these crazy relative paths,

125
00:04:52,020 --> 00:04:54,420
it makes life a lot easier.

126
00:04:54,420 --> 00:04:55,800
So let's take a pause right here.

127
00:04:55,800 --> 00:04:57,000
We'll come back to the next section

128
00:04:57,000 --> 00:04:59,073
and continue working on our test setup.