Instructor: In the last section we finished up our tests
around our app component.
Now before we move on
there's one little thing I want to change
about our current project.
So as you start to look at the top
of our app dot test file,
you'll notice that we're already starting
to get these, kind of, import statements
that have all these relative path references on them.
So by default, when we're inside
of any type of WebPAC based project
or Node project for that matter,
we always have to write out relative paths
to the files that we're trying to import.
So in other words
because our app dot test dot JS file
is inside the test directory,
if we want to import app comment box
or comment list we have to first write out
an import that goes up one directory
and then attempts to get access
to the app file or a comment box or comment list.
As we start implementing
more tests inside this project,
we're gonna end up
with some pretty nasty path references.
All because of this system of relative imports.
So in this section we're gonna do a little bit
of tweaking of our React project configuration here.
And we're going to make all
of our import statements instead use absolute references.
So with an absolute reference we
will instead give a path right here
that is always absolute to the SRC directory.
So in other words, if we're inside of app dot test
and we want to get
at our app dot JS file right here,
we would write out an import statement
that looks into components
and then attempts to get at app dot JS.
Now to be clear, this is not a required step.
This is not related to testing at all.
This is just a step
that's gonna make our lives a little bit easier.
And this is something that you can use
on any React or Create React app project that you work on.
So let's do this little tweak to our configuration
that's going to make our project
instead use absolute imports.
So to do this, all we have to do
is create a new file inside of our route directory.
So I'm gonna make a new file
and I'm going to name it dot ENV.
So no file extension.
Just dot.
Just ENV, nothing else.
Then inside of here,
I'm gonna write out node underscore path
equals SRC forward slash like so.
So that's all we have to do.
I'll then save this file.
And then we need to restart our test runner
and we also have to restart our server,
our development server as well.
And after we restart those
we're gonna go through our project
and update a couple of import statements.
So I'm gonna go back over to my terminal.
I'll find my test suite and I'm going to restart it.
And I'll do the same
with my running development server as well.
So that's NPM run start for the development server.
So while those are starting up
and if you see an error in any of them.
That's totally fine.
While those are starting up I'm going
to flip back over to my editor
and we're going to update a couple of file references.
So we'll first get started
inside of our app dot test dot JS file.
We've got three import statements inside of here
that are currently using a relative imports.
So we're gonna refactor all three of these
to instead use absolute import paths from the SRC directory.
Oh, automatic change over there.
So I want to go from the SRC directory
into components and then get each of those three files.
So I'm going to now do components.
App.
Components, comment box, and components comment list
like so.
Now the benefit to this
is that I can now move this test file around
if I need to or I can move around
those other component files around if I want to
and it's not going to break any of these import statements.
Well it'll break them
but I can much more easily do a global find and replace.
Excuse me, that's what I meant to say.
We can much more easily do a global find
and replace if we start to move around any of these files.
Okay, so let's go and fix up our app dot JS file as well.
So inside of here, no longer are we going
from the same directory.
We're going to instead do components comment box
and components comment list.
And the last step will be inside of our index dot JS file.
So inside of here, we no longer need dot slash components.
It will be just components slash app.
All right, so I've updated all three of those files.
I should now still be able to go back over
to my application inside the browser
and see it successfully refresh.
So everything looks good over here
and I should also be able to go back over
to my running test suite
and see all my test passing as well.
So everything looks good over here as well.
All right, like I said, this is entirely an optional change.
This is not at all tied to testing
in any way, shape, or form
but when we start doing testing
and we start getting these crazy relative paths,
it makes life a lot easier.
So let's take a pause right here.
We'll come back to the next section
and continue working on our test setup.