alright so another way out his storybook
portion squared I think that was a good
time to start working on the unit tests
and as I mentioned before for this
tutorial we’re going to be using the
chest framework so let’s go to the gets
started section so what we need to do is
we need to install just as a dev
dependency but to make it work in a
react project we have to do more setup
than that so besides installing just on
its own we also need to install quite a
few other dependencies so we need to
install babel just as well as babel core
so let’s go ahead and copy those two and
i’m going to go back to the terminal so
let’s do in theme install – d just as
well as babel jest and also babel core
with that version so let’s install all
of those so now once we do that let’s
try it NP x jest and we’re gonna see
that we don’t have any unit tests to run
so let’s actually go back to our source
folder so inside of ellipsis folder i’m
going to create a new file let’s call it
ellipsis dot test is now as you can see
from the regex in the terminal there’s
quite a few different ways that you can
approach this so for example you can
create a test directory with two hundred
scores before and after it’s going to
look for every single javascript or JSX
file and it’s also going to look for any
optional spec or test keyword before the
extension name so in this case i’m going
to follow this convention filename or
component name dot stas so from here we
can do imports of ellipses and in fact
let’s import from this directory so we
already have a Perl file so we’re just
gonna import the default from there and
let’s go to the snapshot testing section
so from here we can copy the base
example so let me go back let me paste
it I’ll just put in the ellipses in here
I’ll remove the link and now to convert
our component into JSON format we need
to install another dependency called
react test renderer so let me switch
back I’ll do a quick install of that
dependency I’m gonna save the file so
we’re gonna render ellipses without any
props so this will be the ellipses
component and as you can see we got a
few warnings from es Lent so in order to
go around that we can install a plug-in
which is called es lint plugin just so
now this one can help us set up
reasonable defaults in fact if you look
at you recommended
we can extend from plug-in just
recommend it so let’s do exactly that
I’m gonna install the plug-in let’s
install it and then I’ll switch back in
here I’m gonna copy this string so we
can extend the recommended configuration
and now in ESL and RC JSON I’m going to
add this string it to the end of the
array so let’s save the file and now if
we go back to our ellipsis test as you
can see the warnings go away so now
let’s go back to the terminal and I’ll
try to do MPX just so as you can see
we’re gonna have a failed test in this
case it’s failing to interpret the
import syntax and I think I know why so
if we go back to our bubble or see what
we are doing at the moment is that we’re
telling bubble to ignore es modules so
it’s not going to transpile them down to
common GS and now because of that our
unit tests are gonna be failing because
no GS cannot interpret the import-export
syntax on its own so what we can do is
we can set up a dedicated section for
unit tests now for that we can add a
special key known as environment env and
instead of that object we’re gonna
specify a test environment and this is
what we’re gonna put the presets and
it’s simply going to be an array of
vowel and without any configuration so
using the default config and also babble
slash react this way for our unit test
we’re going to be using this config and
this is gonna apply the babel end and
bowel react presets using the defaults
but to build a package using roll-up
we’re gonna be using this setup at the
top
right so let’s go back and try to run it
again so i’m gonna do + px’ jest and now
we’re getting a syntax error of
unexpected token because we’re trying to
import styles and I’ll just is not able
to interpret the style.css file in its
own now that’s easy to fix
so if I go back to the just
configuration there’s a section for
using just with web pack so now if we
scroll down a bit you’re gonna find a
section for handling static assets so
for something like this we can create a
file we can call it style Mach is and
it’s going to export an empty object and
this one is going to be used for our
Styles
so all of the class names are gonna be
looked up off of that object so I’m
going to copy this configuration for
just we’re gonna have to go back to our
package JSON and now in here I’m going
to add a section at the bottom we don’t
care about image files but we do
about CSS files though so I’m just going
to target any CSS files and from there
we’re gonna go to the mocks directory
and I’m just gonna call it styles ayahs
so let’s create a new directory mocs
let’s create the file and we’ll just to
a module dot exports of an object so now
if you run the test again it looks like
I messed up the import and of course if
we go back in here this is supposed to
be a named import because we’re
exporting an ellipses component from
indexed areas let me see that and I’m
gonna run the test again right so this
time it succeeds so we get a single test
passing and now if we go back we’re also
going to notice a snapshot directory and
then this one is gonna contain the
snapshot file so this will basically be
the output of our component you know if
our component changes in any way so
let’s say if I were to go back and let’s
say I was to add and you Devon here now
if you run the test you’re gonna see
that this time it fails because
something changed in a snapshot now of
course we can also update them so it’s
to npx just – you to update these
snapshots this time it’s passing but if
I bring it back if we do in VX just once
again it’s gonna fail and of course this
way we can just simply update the
snapshots whenever the code changes so
in the same fashion we’re gonna create
tests for the other components I’m just
gonna copy it and paste it to ring and
ripple directories so this one is gonna
be running at SJS and this one is gonna
be rippled so we’re going to import ring
and let’s also output it and I’ll do the
same thing for ripple so let’s put it in
there and now go back and let’s do npx
just so this will generate the two
snapshots for the two new tests and now
instead of running the test from the
terminal we can actually create a script
so go back to package.json
let’s create a test script so this will
simply invoke just like this so from
then on we can do npm tests this will do
the same thing so it’s gonna run all the
unit tests in our suite but we can also
have just to run in the background and
also monitor the changes in e file
system so let’s add another test we’re
gonna call this one test call and watch
and we could do just with the – – watch
option so in contrast if we do and
run test : watch this one is not going
to exit in fact it’s going to look for
changes in our file system and let’s see
if I go back once again I add something
to the ellipsis let’s say YZ span and I
save it this time it’s going to fail
because one of these snapshots is not
matching but if I change it back its
back to green so this way we can
actually work on the components and have
the test suite run in the background so
it’s pretty useful now besides that we
can also get the coverage report from
our tests so I’m going to do NPM test
but this time I’m going to pass in the
coverage option to just and because it’s
going to just and not the test script
itself I’m gonna also have to put the
two dashes in front so let’s try that
and this time as you can see we get a
full coverage report for three of our
components in fact if we go back to our
project
we now have a coverage folder so now if
we copy the path to the index file I’ll
go back to Chrome and let’s open it and
this time as you can see we get a nice
UI this way we could see the coverage
report for all of our components this
way we can see if there’s any code
that’s not covered in our components now
the only issues we’ll have to add that
folder to get ignore let’s see we have
the coverage folder that we need to add
I’m gonna also have to add it to es lint
ignore and just for a good measure I’m
also going to add it to prettier ignore
so this way if we accidentally try to
save a file in that report it doesn’t
get messed up so finally I’m going to
add a new script so let’s go back I’ll
add a test call on coverage so let’s do
just dash dash coverage so once that’s
done let’s do get status once again I’m
going to add all files and let’s do a
commit add just snapshot test and let’s
push it so now it would also be nice to
test the files that are going into a
commit so let’s say if I go to the
ellipsis component if I were to modify
it there’s nothing that prevents me from
doing a git add on that file and then
doing a commit knowing that the test
command will fail but the commit itself
will succeed because we don’t have any
tests running on a commit if I were to
do NPM tests of course it’s going to
fail so what we need to do is we need to
add a pre-commit hook so let me just do
a git reset to undo the commit so now if
I go back to the package.json
well we’re going to add a command to run
the test suite now the issue with this
command is that it’s going to run the
entire test suite and even though we
only have three small tests eventually
the code base is going to grow so
there’s going to be a lot more tests to
run it would be better if you could only
test the files that were modified so in
this case only the ellipses component
was changed so it only makes sense to
test that individual components well if
I were to go to the CLI options section
in the documentation for chests there is
an option known as find related tests
and this one is perfect for our use case
which is the pre-commit hook so what we
can do is we can go back in here I’m
gonna add a new script let’s do test
staged this way we’re gonna test the
staged files so let’s do find related
tests like this and I’ll change the
script in the event stage section from
NPM tests to NPM run tests staged so if
I were to go and see the changes we have
package.json and the ellipses component
stage story a commit so now if I do get
add package.json alone let’s do a git
commit test this one will succeed
because no unit test related files were
modified but if I do get add let’s do –
B so I’ll add the component let’s do
another commit once again test as you
can see this one does fail because one
of these snapshot is not matching the
JSON of the components so I’ll go back
to the terminal
let me just do a git reset once again
and I’ll undo the change in the ellipses
component but I’m going to leave off the
test staged command so we’re gonna use
it in the future when working on the
project so let’s do a git status once
again let’s add package.json once again
commit run just on pre commit so now if
I do a git log we now have the commit so
we should be able to push and we should be done now
portion squared I think that was a good
time to start working on the unit tests
and as I mentioned before for this
tutorial we’re going to be using the
chest framework so let’s go to the gets
started section so what we need to do is
we need to install just as a dev
dependency but to make it work in a
react project we have to do more setup
than that so besides installing just on
its own we also need to install quite a
few other dependencies so we need to
install babel just as well as babel core
so let’s go ahead and copy those two and
i’m going to go back to the terminal so
let’s do in theme install – d just as
well as babel jest and also babel core
with that version so let’s install all
of those so now once we do that let’s
try it NP x jest and we’re gonna see
that we don’t have any unit tests to run
so let’s actually go back to our source
folder so inside of ellipsis folder i’m
going to create a new file let’s call it
ellipsis dot test is now as you can see
from the regex in the terminal there’s
quite a few different ways that you can
approach this so for example you can
create a test directory with two hundred
scores before and after it’s going to
look for every single javascript or JSX
file and it’s also going to look for any
optional spec or test keyword before the
extension name so in this case i’m going
to follow this convention filename or
component name dot stas so from here we
can do imports of ellipses and in fact
let’s import from this directory so we
already have a Perl file so we’re just
gonna import the default from there and
let’s go to the snapshot testing section
so from here we can copy the base
example so let me go back let me paste
it I’ll just put in the ellipses in here
I’ll remove the link and now to convert
our component into JSON format we need
to install another dependency called
react test renderer so let me switch
back I’ll do a quick install of that
dependency I’m gonna save the file so
we’re gonna render ellipses without any
props so this will be the ellipses
component and as you can see we got a
few warnings from es Lent so in order to
go around that we can install a plug-in
which is called es lint plugin just so
now this one can help us set up
reasonable defaults in fact if you look
at you recommended
we can extend from plug-in just
recommend it so let’s do exactly that
I’m gonna install the plug-in let’s
install it and then I’ll switch back in
here I’m gonna copy this string so we
can extend the recommended configuration
and now in ESL and RC JSON I’m going to
add this string it to the end of the
array so let’s save the file and now if
we go back to our ellipsis test as you
can see the warnings go away so now
let’s go back to the terminal and I’ll
try to do MPX just so as you can see
we’re gonna have a failed test in this
case it’s failing to interpret the
import syntax and I think I know why so
if we go back to our bubble or see what
we are doing at the moment is that we’re
telling bubble to ignore es modules so
it’s not going to transpile them down to
common GS and now because of that our
unit tests are gonna be failing because
no GS cannot interpret the import-export
syntax on its own so what we can do is
we can set up a dedicated section for
unit tests now for that we can add a
special key known as environment env and
instead of that object we’re gonna
specify a test environment and this is
what we’re gonna put the presets and
it’s simply going to be an array of
vowel and without any configuration so
using the default config and also babble
slash react this way for our unit test
we’re going to be using this config and
this is gonna apply the babel end and
bowel react presets using the defaults
but to build a package using roll-up
we’re gonna be using this setup at the
top
right so let’s go back and try to run it
again so i’m gonna do + px’ jest and now
we’re getting a syntax error of
unexpected token because we’re trying to
import styles and I’ll just is not able
to interpret the style.css file in its
own now that’s easy to fix
so if I go back to the just
configuration there’s a section for
using just with web pack so now if we
scroll down a bit you’re gonna find a
section for handling static assets so
for something like this we can create a
file we can call it style Mach is and
it’s going to export an empty object and
this one is going to be used for our
Styles
so all of the class names are gonna be
looked up off of that object so I’m
going to copy this configuration for
just we’re gonna have to go back to our
package JSON and now in here I’m going
to add a section at the bottom we don’t
care about image files but we do
about CSS files though so I’m just going
to target any CSS files and from there
we’re gonna go to the mocks directory
and I’m just gonna call it styles ayahs
so let’s create a new directory mocs
let’s create the file and we’ll just to
a module dot exports of an object so now
if you run the test again it looks like
I messed up the import and of course if
we go back in here this is supposed to
be a named import because we’re
exporting an ellipses component from
indexed areas let me see that and I’m
gonna run the test again right so this
time it succeeds so we get a single test
passing and now if we go back we’re also
going to notice a snapshot directory and
then this one is gonna contain the
snapshot file so this will basically be
the output of our component you know if
our component changes in any way so
let’s say if I were to go back and let’s
say I was to add and you Devon here now
if you run the test you’re gonna see
that this time it fails because
something changed in a snapshot now of
course we can also update them so it’s
to npx just – you to update these
snapshots this time it’s passing but if
I bring it back if we do in VX just once
again it’s gonna fail and of course this
way we can just simply update the
snapshots whenever the code changes so
in the same fashion we’re gonna create
tests for the other components I’m just
gonna copy it and paste it to ring and
ripple directories so this one is gonna
be running at SJS and this one is gonna
be rippled so we’re going to import ring
and let’s also output it and I’ll do the
same thing for ripple so let’s put it in
there and now go back and let’s do npx
just so this will generate the two
snapshots for the two new tests and now
instead of running the test from the
terminal we can actually create a script
so go back to package.json
let’s create a test script so this will
simply invoke just like this so from
then on we can do npm tests this will do
the same thing so it’s gonna run all the
unit tests in our suite but we can also
have just to run in the background and
also monitor the changes in e file
system so let’s add another test we’re
gonna call this one test call and watch
and we could do just with the – – watch
option so in contrast if we do and
run test : watch this one is not going
to exit in fact it’s going to look for
changes in our file system and let’s see
if I go back once again I add something
to the ellipsis let’s say YZ span and I
save it this time it’s going to fail
because one of these snapshots is not
matching but if I change it back its
back to green so this way we can
actually work on the components and have
the test suite run in the background so
it’s pretty useful now besides that we
can also get the coverage report from
our tests so I’m going to do NPM test
but this time I’m going to pass in the
coverage option to just and because it’s
going to just and not the test script
itself I’m gonna also have to put the
two dashes in front so let’s try that
and this time as you can see we get a
full coverage report for three of our
components in fact if we go back to our
project
we now have a coverage folder so now if
we copy the path to the index file I’ll
go back to Chrome and let’s open it and
this time as you can see we get a nice
UI this way we could see the coverage
report for all of our components this
way we can see if there’s any code
that’s not covered in our components now
the only issues we’ll have to add that
folder to get ignore let’s see we have
the coverage folder that we need to add
I’m gonna also have to add it to es lint
ignore and just for a good measure I’m
also going to add it to prettier ignore
so this way if we accidentally try to
save a file in that report it doesn’t
get messed up so finally I’m going to
add a new script so let’s go back I’ll
add a test call on coverage so let’s do
just dash dash coverage so once that’s
done let’s do get status once again I’m
going to add all files and let’s do a
commit add just snapshot test and let’s
push it so now it would also be nice to
test the files that are going into a
commit so let’s say if I go to the
ellipsis component if I were to modify
it there’s nothing that prevents me from
doing a git add on that file and then
doing a commit knowing that the test
command will fail but the commit itself
will succeed because we don’t have any
tests running on a commit if I were to
do NPM tests of course it’s going to
fail so what we need to do is we need to
add a pre-commit hook so let me just do
a git reset to undo the commit so now if
I go back to the package.json
well we’re going to add a command to run
the test suite now the issue with this
command is that it’s going to run the
entire test suite and even though we
only have three small tests eventually
the code base is going to grow so
there’s going to be a lot more tests to
run it would be better if you could only
test the files that were modified so in
this case only the ellipses component
was changed so it only makes sense to
test that individual components well if
I were to go to the CLI options section
in the documentation for chests there is
an option known as find related tests
and this one is perfect for our use case
which is the pre-commit hook so what we
can do is we can go back in here I’m
gonna add a new script let’s do test
staged this way we’re gonna test the
staged files so let’s do find related
tests like this and I’ll change the
script in the event stage section from
NPM tests to NPM run tests staged so if
I were to go and see the changes we have
package.json and the ellipses component
stage story a commit so now if I do get
add package.json alone let’s do a git
commit test this one will succeed
because no unit test related files were
modified but if I do get add let’s do –
B so I’ll add the component let’s do
another commit once again test as you
can see this one does fail because one
of these snapshot is not matching the
JSON of the components so I’ll go back
to the terminal
let me just do a git reset once again
and I’ll undo the change in the ellipses
component but I’m going to leave off the
test staged command so we’re gonna use
it in the future when working on the
project so let’s do a git status once
again let’s add package.json once again
commit run just on pre commit so now if
I do a git log we now have the commit so
we should be able to push and we should be done now
Please follow and like us: