►
Description
Automated testing by a developer is still a topic that is heavily contested. Developers continue to struggle to understand how to test their apps, when to test, and how to put this all together into a continuous integration pipeline. This process can be surprisingly simple with the combination of the right tools. In this live-coding session developers will learn how to create a web-app using React. Afterward, we will shift-left by adding some automated unit tests using Jest. Next, we will shift-right by adding some functional tests using Cypress.io. Finally, the developers will learn how to continuously build and test the web app through a Github workflow. By the end of the session, the developers will: - Learn a bit about unit testing with Jest - Learn Cypress for functional testing - Put all of this together into a CI pipeline that builds and tests in a continuous manner
A
In
this
tutorial,
we
will
learn
how
to
create
a
very
simple
react:
web
app
in
under
five
minutes,
we'll
learn
how
to
code
component
tests
by
using
react
testing
library
how
to
shift
right
by
adding
automated
visual
testing
using
webdriver,
io
and
screener,
and
finally,
we're
going
to
put
it
all
into
a
ci
pipeline
using
github
actions
with
station
execution
and
true
continuous
integration.
My
name
is
nikola
advalatkin,
I'm
a
principal
solutions,
architect
at
sauce,
labs
and
creator
of
ultimateqa.com.
A
A
A
A
A
A
A
A
But
what
you
can
see
here
is
we
have
a
test
that
will
render
the
learn
react.
Link
here
we
use
a
method
called
render
and
we
are
rendering
our
app
component
and
next
you
can
see
that
we
are
using
the
screen
to
get
an
element
by
text,
called,
learn,
react
and
then,
finally,
we
are
expecting
that
link
element
to
be
in
the
document.
A
This
is
a
just
expect
and
to
be
in
the
document.
Is
the
react?
Testing
library
assertion?
That's
fantastic
because
now
we
have
a
unit
test,
that's
already
ready
for
us
and
it
can
run
regardless
of
whether
our
application
is
up
or
not.
So
if
I
close
down
our
app
and
then
come
back
here
and
rerun
the
tests,
they
will
still
continue
to
work
because
they
don't
need
a
server.
A
So
the
easiest
way
to
get
started
with
github
actions
is
to
come
over
here
to
the
actions
tab
in
your
github
repo,
making
sure
that
you
have
one
created
and
then
you
can
come
and
say
a
new
workflow
github
actions
will
provide
you
some
suggested,
workflows
and
then
notice.
It
notices
that
we
are
obviously
using
node.js,
and
so
then
it
can
recommend
us
a
potential
workflow.
A
This
one
right
here
looks
fantastic,
so
let's
go
ahead
and
click
it.
It
already
comes
with
a
bunch
of
steps
that
have
been
configured
for
us
and
the
other
nice
thing
about
creating
your
yaml
file
here
is
that
you
also
get
a
little
ide
that
you
can
use.
For
example,
you
can
see
that
if
we
don't
do
something
right
like
let's
say
we
do
something
like
this.
A
So
this
is
what
our
ci
pipeline
should
look
like
and
let's
go
over
it
step
by
step.
By
the
way
you
can
see,
it's
automatically
gets
created
in
a
dot,
github,
slash,
workflows,
folder,
and
then
you
give
your
file
a
name,
I'm
calling
our
ci
pipeline
ci.
You
can
call
it,
of
course
anything
you
want
and
then
at
the
very
top
I
am
setting
three
environment
variables.
A
These
environment
variables
are
the
screener
api,
key
source,
username
and
source
access
key.
They
are
coming
from
secrets
variable
that
is
part
of
github
actions
and
then
coming
from
the
key
called
screener
api
key
here:
source
username
and
source
access
key.
So
the
value
from
here
is
retrieved
and
stored
in
the
environment,
variable
on
the
left
hand
side.
So
where
are
these
values
coming
from?
Let
me
show
you
that
it's
very
intuitive
in
github
actions
you
come
to
settings
scroll
down
to
secrets.
You
can
see.
A
A
Next,
here
we
are
defining
the
jobs
that
we
want
to
execute,
we're
saying
we're
going
to
run
on
ubuntu
latest.
There
are
multiple
types
of
different
kind
of
vms
available
for
you
to
execute
on,
and
I'm
going
to
be
running
on
node
version
14..
You
can
execute
on
other
node
versions.
If
you
want,
of
course,
and
then
we
are
using
the
steps,
a
lot
of
these
steps
were
previously
provided
for
us,
and
I've
made
some
modifications
to
help
you
get
started
faster
with
your
ci
pipeline.
A
So
the
very
first
thing
we
want
to
do
is
install
dependencies,
and
here
we
are
doing
exactly
what
we
were
doing
in
our
command
line
for
our
application,
and
so
we
would
have
done
cd,
my
app
right
and
then
done
an
npm
install.
However,
I'm
simply
using
npmci,
which
is
actually
faster
in
github
actions,
because
it
ends
up
caching
our
dependencies.
So
this
is
the
recommended
action
to
take
in
ci
next
we're
going
to
build
the
app
right.
A
This
was
just
cd
to
my
app
and
doing
an
npm
run,
build
to
make
sure
we
have
a
production
version,
because
whenever
we
do
an
npm
start
here
and
our
application
comes
up
here
in
localhost
3000
and
we
take
a
look
at
our
react
developer
tools-
we
can
see
it's
red
and
it
says
this
page
is
using
the
development
build
of
react,
which
we
obviously
don't
want
to
use
for
production.
We
want
to
use
the
c.
A
We
want
to
use
the
production
build,
and
so
that's
how
you
do
with
npm
run
build
next
we're
executing
our
component
tests
after
our
app
is
built.
We
simply
do
the
same
thing
by
navigating
to
that
directory
and
of
running
the
tests
exactly
as
you
saw
before,
and
then.
Finally,
we
are
starting
up
our
application,
actually
starting
the
server
by
doing
npm
start
and
then
we're
doing
a
weight
on
command.
A
That
will
wait
for
the
app
to
start
up
for
up
to
60
seconds
before
erroring
out,
and
we
will
expand
this
pipeline
as
we
expand
our
testing.
So
once
it's
ready.
The
only
reason
I
recommended
to
use
the
ui
was
to
help
you
with
the
intellisense,
but
ultimately
the
best
way
to
do
it
is
to
come
to
my
app
and
then
make
sure
we're
gonna
add
a
github,
we're
gonna,
do
that
github,
slash,
workflows,
oops
and
then
we're
gonna
add
a
new
file
here.
Let's
call
it
ci.yamo.
A
A
A
I
made
one
mistake
here:
I
should
have
put
github
workflows
in
the
very
root,
not
inside
of
my
app.
So
what
you'll
see
is
I
moved
that
to
the
correct
location?
Did
another
push,
and
so
now
we
have
a
ci
pipeline
that
started
executing
here's.
The
name
called
ci2,
exactly
the
name
that
we
gave
it
in
the
gmo
file
and
it
did
fail
after
nine
seconds.
So
let's
go
ahead
and
take
a
look
at
exactly
what
happened.
A
A
A
A
So
if
we
take
a
look
of
where
we
are
in
our
testing
journey,
you
can
see
based
on
this
table,
that
we've
actually
got
a
pretty
long
way
to
go
before
our
app
is
fully
tested.
It's
a
really
tiny
app
that
we
haven't
even
made
any
functional
changes
to,
and
so
far
the
only
thing
that
we
know
about
this
application
without
testing
it
manually
is
that
a
url
with
the
correct
text
does
exist
in
the
dom
of
the
application.
A
We've
validated
that
with
a
component
test
which
came
with
our
app
create
react
app,
and
we
did
that
using
react.
Testing
library
ingest
how
about
actually
knowing
whether
the
url
is
correct
right.
It
may
be
there
with
the
right
text,
but
does
it
go
to
the
right
location?
So,
let's
go
ahead
and
write
up
another
test
for
that.
A
The
very
first
thing
that
we
want
to
do
is
make
sure
that
we
are
running
our
test
suites
here
in
and
then
we
can
add
a
test.
That
looks
like
this,
where
we
say
where
that
we're
testing
that
a
url
is
correct,
rendering
our
component
as
before,
getting
our
link
element
as
before.
However,
now
we
are
going
to
validate
that
the
href
of
the
link
element
will
contain
ultimateqa.com
because
that's
where
we
want
our
url
to
navigate
to
and
then
once
we
hit
save
watch
this
window
in
the
bottom
right.
A
It's
going
to
execute
all
of
the
tests
in
this
file
here,
the
first
one
passed,
which
makes
sense,
but
the
second
one
failed.
The
url
is
correct.
It's
saying
that
we
expected
ultimateqa.com,
but
we
got
react
js.org
and
that's
because
we
need
to
make
an
update
to
our
application
to
go
to
ultimateqa.com.
A
A
Instead,
we
are
going
to
learn
testing,
so
let's
put
learn,
testing
and
dev
and
hit
save
now,
and
our
tests
both
have
failed
and
the
reason
that
they
both
have
failed
is
we
can
take
a
look
at
our
logs
and
it's
saying
that
it's
unable
to
find
an
element
with
the
text
learn
react
and
then
it
spits
out
the
dom
for
us
here
showing
everything
that
it
is
visible.
And,
of
course
this
is
the
text
that
exists.
A
However,
the
this
exercise
also
showed
us
that
having
text
as
a
check
in
our
test
is
not
really
a
good
strategy,
because
we
can
often
change
the
text
of
our
links,
and
so
we
can
instead
use
a
better
strategy
such
as
supplying
a
data
dash
attribute,
and
so
here
we
can
do
a
data
test
id
and
we
can
call
it
a
learn.
Link
we'll
hit
save
here,
we'll
come
back
to
app.test
and
now,
instead
of
getting
by
text
we
can
get
by
id.
So
let's
go
and
do.
A
A
A
A
A
A
So
once
all
the
installation
is
done,
the
only
other
thing
that
you'll
need
to
install
is
the
wdio
sync
service,
and
so
once
you
have
everything
installed,
this
is
what
our
package
json
looks
like
everything
that
we
added.
If
we
look
at
the
diff
you
can
see,
we've
got
a
few
w
d.
I
o
services
added
for
our
testing
purposes.
A
Webdriver
io
tests
by
default
go
to
test
specs
directory,
and
in
here
I
created
a
visual.spec.js
file
and
in
here
we're
going
to
have
our
visual
test.
This
visual
test
uses
the
standard,
describe
it
format,
and
then
the
commands
come
from
the
browser
object,
which
is
a
global
object
from
web
drive.
Io
we
navigate
to
a
url,
and
then
we
execute
two
important
commands.
A
First,
we
do
an
init
which
will
provide
a
name
for
the
app
that
we're
testing.
So
we
can
say
my
react
app
for
example,
and
then
the
next
one
we're
gonna
do
is
a
snapshot.
This
is
capturing
a
snapshot
of
the
page
that
we
want
to
test,
and
so,
in
this
case
it's
our
home
page,
and
so
we
are
calling
it
home.
A
Page
so
the
config
file
for
web
drive
io
lives
over
here
and
there's
a
lot
going
on
in
here,
but
that
we
can
take
a
look
at
only
the
important
components.
So
here
I've
created
two
constants
called
visual
options
and
source
options.
Where
I
am
setting
some
api
keys
here,
I'm
setting
the
screener
api
key.
A
A
The
very
first
one
is
this
one
here
on
this
viewport
size,
which
is
the
most
popular
desktop
and
running
on
windows,
10
and
chrome,
and
then
the
other
type
of
browser
that
we're
running
on
is
mac
os
safari
on
this
resolution,
which
is
an
iphone
x,
viewport
size.
And
of
course
we
can
have
a
lot
more
resolutions
here
and
what's
going
to
happen,
is
our
visual
spec
is
going
to
run
on
both
of
these
platforms.
At
the
same
time,
we
can
of
course
run
it.
A
A
A
The
build
has
failed
and
the
reason
why
it
failed
is
because
we
have
two
brand
new
snapshots
that
we've
never
accepted
before
what
screener
is
currently
telling
us
is
that
hey
I've
got
these
two
snapshots
of
these
resolutions
of
this
page
here
of
the
home
page,
and
I
don't
know
whether
they
are
acceptable
to
you
or
not.
So
we
can
open
each
one
up
and
take
a
look.
Does
this
look
good
to
us
and
correct?
Yes,
it
does.
A
We
can
come
here
and
set
this
as
a
baseline
from
this
point
forward,
every
single
automated
test
will
validate
against
this
version
of
the
baseline,
and
this
is
the
bigger
resolution
here
and
this
one
looks
fantastic
to
us
as
well.
Let's
go
ahead
and
accept
it,
and
so
now,
from
this
point
forward
and
new
executions
will
run
against
those
baselines.
A
A
A
A
This
link
right
here
to
chat,
be
instead
of
learn
testing.
We
can
change
it
to
something
else.
We
can
say,
learn
testing
with
nikolai
and
mia
fantastic,
our
application
rebuilt-
and
this
is
what
it
looks
like,
and
we
can
even
run
our
tests
to
make
sure
that
everything
is
working
as
before
our
component
tests,
both
of
them
working
successfully.
Because
remember
we
added
that
nice
data
test
id
attribute,
and
now
we
can
check
in
these
changes
and
see
what
happens
to
our
visual.
A
A
A
screener
uses
a
smart,
hybrid
div,
meaning
that
it
analyzes
the
dom
and
element
shifts,
and
it
identifies
exactly
the
two
elements
that
we
have
changed
and
so
now,
as
far
as
to
decide
whether
this
is
a
valid
change
or
not,
and
yes,
this
is
a
valid
change
and
it
looks
fantastic
and
we
want
to
use
this
as
the
new
version
of
the
baseline.
So
we're
going
to
accept
this
one.
A
A
A
So
thank
you
so
much
for
tuning
in
today
to
watch
my
tutorial.
In
summary,
we
learned
how
to
create
a
simple
react.
Web
app
using
create
react
app.
We
added
component
tests
using
react,
testing
library.
We
shifted
right
by
adding
visual
tests
using
webdriver,
io
and
screener,
and
then
we
put
it
all
into
a
ci
pipeline
using
github
actions
that
executes
on
push
and
pull
requests.