►
Description
Community call demo taken from the SharePoint Framework Special Interest Group recording at 31st of January 2019. In this video Andrew Connell (Voitanos) shows how to simplify SPFx testing config with Jest Presets.
Presenter - Andrew Connell (Voitanos) - @andrewconnell
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
Why
I
like
it
so
out
of
the
box,
the
SharePoint
framework,
yeoman
generator
scaffolding-
is
going
to
generate
your
project
in
the
project
that
you
get
is
really
gonna
be
set
up
initially
to
work
with
mocha
and
chai,
which
mocha
is
a
test
runner
and
test
library
that
you
can
use
to
write
unit
tests
and
chai
is
an
assertion.
Library
kind
of
goes
hand
in
hand.
A
You
think
mocha
and
chai
is
the
tea
and
coffee
and
anyway,
so
the
way
that
this
is
how
things
were
when
they,
when
sure
point
framework
originally
shipped
and
when
it
first
came
out,
I
won't
separate
these
Stephanie
the
the
way
that
things
originally
shipped.
We
were
using
these
these
tools
primarily
for
testing
internally
Microsoft
they
actually
switched
over
and
they
use
a
different
tool.
A
So
it
takes
it's
slow.
It's
a
slow
process
to
get
your
tests
going
and
on
a
default
SharePoint
install
on
a
relatively
new
laptop
fast
machine
on
an
out-of-the-box
experience,
you're
a
lebackes
project.
It
can
take
up
to
10
seconds
just
to
get
your
first
test
to
start
running
so
that
that
was
a
little
too
that
wasn't
really
a
fun
night.
A
great
experience
for
me,
so
I
was
trying
to
find
something.
It
would
be
a
little
bit
faster
and
there's
another
tool
out
there.
A
A
So
what
I
would
recommend
it
to
try
and
take
that
you
consider
is
to
get
rid
of
mocha
and
chai
for
your
testing
solution
and
your
Java
Script
projects
and
instead
be
coupled
them
and
use
jess
and
then
also
D
couple
your
tests
from
the
SharePoint
framework
build
process.
Now,
in
order
to
get
this
to
work,
it
does
require
a
little
bit
of
setup
work.
So
let
me
kind
of
walk
through
a
little
bit
of
what
this
is
and
don't
worry.
I'm
gonna
give
you
the
bad
story
and
then
a
better
story.
A
So
the
way
you're
gonna
do
this.
The
way
you
set
up
your
projects
for
working
with
jess.
Is
you
get
a
multi-step
process,
so
you
don't
have
to
do
the
very
first
one,
but
to
keep
it
clean.
You're
gonna
want
to
remove
mocha
and
chai,
specifically
the
typescript
type
declarations
from
your
project.
You
can
see
that
the
first
line
a
little
code
snippet
you
see
down
there
at
the
bottom,
then
you're
gonna
install
the
gist
tool,
which
is
just
a
little
runtime
utility.
A
That
includes
not
only
the
test
Runner
and
the
harness,
but
it
also
includes
everything
else
that
you
used
to
get
with
both
mocha
and
chai.
So
again,
mocha
was
a
test
runner
and
a
test
library.
We
get
that
as
two
and
one
and
Jess
and
then
chai
was
an
assertion
library.
So
when
you
run
your
tests
for
a
test
to
fail,
you
would
have
to
generally
throw
a
an
exception
or
throw
an
error
and
what
an
assertion
library
does.
A
It
allows
you
to
say
things
like
I
expect
this
variable
to
equal
one
and
if
it
doesn't
and
write
this
error
message
out
and
then
it
just
makes
it
a
little
bit
cleaner
to
write
your
tests.
Just
has
an
assertion
library
in
it
already,
so
you
don't
need
you
don't
need
two
things.
You
just
need
the
one
for
everything,
because
we're
using
typescript
and
just
is
by
default.
It
could
it's
expecting
javascript.
A
You
have
to
add
in
a
preprocessor
that
tells
just
to
compile
all
the
typescript
down
to
JavaScript
first
and
then
you're
also
going
to
want
to
install
some
type
declarations
to
making
working
with
the
assertion
libraries
a
little
bit
easier
now.
The
last
thing
you
end
up
having
to
do
is
you're
going
to
end
up
creating
some
sort
of
adjust
configuration
and
what
this
does
is
it
tells
you
can
do
all
this
on
the
command
line.
Every
time
you
run
it,
but
that's
a
pain.
A
So
you
can
create
a
configuration
object
that
lives
either
in
the
package.json
file
or
is
going
to
live
in
a
separate
config
file,
and
what
that
does.
Is
it
just
sets
all
the
default
settings
that
you
would
need
inside
of
jess
when
you
run
it
so
telling
it
to
use
the
preprocessor
and
where
should
it
look
for
test
files
and
where
should
I
look
for
code
files,
etc?
A
The
last
thing
you
do
is
that
I
would
recommend
you
do
at
least
is
to
update
your
test
script
that
you
have
in
the
package.json
file,
so
that
you
can
just
run
npm
tests
and
it
will
do
all
the
stuff
that
it
needs
to
run
just
and
to
plug
in
the
configuration
file
and
make
your
life
a
heck
of
a
lot
easier.
You
can
see
there
from
the
code
at
the
bottom.
That's
a
lot
of
stuff
to
do,
though.
A
Now
that's
one
thing
that
we
want
I
wanted
to
look
at,
but
the
next
thing
is
what,
if
you're
going
to
be
using
react.
So
when
you
are,
when
you
want
to
test
your
react
components,
you
generally
want
to
test
the
rendering
of
these
and
when
I
say
rendering
I
don't
mean
like
the
way
it
shows
up
on
the
screen.
I
mean,
let's
see
the
resulting
markup
that
comes
out
that
would
be
rendered
by
the
browser.
A
I,
don't
care
how
its
rendered
I
just
want
to
make
sure
that
the
mark-up
is
correct,
because
well,
that's
really.
The
only
thing
that
I
can
really
test
for
in
a
really
easy
and
fast
way,
just
by
default
includes
something
called
the
react
test
render
and
what
that
is.
Is
it
just
allows
you
to
give
it
a
react
component
and
it
can
render
out
the
component
and
spit
out
the
HTML
and
do
the
test
for
has
a
concept
called
shallow
rendering?
A
So
if
you
have
nested
components,
it's
only
going
to
render
out
the
one
that
you're
telling
it
you
want
it
to
render
so
other
nested
components
inside
of
it
won't
be
rendered
out
as
well.
So
you
don't
get
a
whole
tree.
You
just
test
the
one
that
you're
looking
at
has
a
concept
of
snapshots,
which
is
basically
going
to
say:
here's
where
the
HTML
should
look
like
and
if
it's
not
then
throw
an
error.
Now
this
render
is
nice,
but
it's
pretty
simple.
A
A
So
the
OP,
the
identity
object.
Proxy
is
just
saying:
don't
do
anything
with
this,
just
treat
it
as
an
inert
thing,
just
kind
of
bypass
it.
Otherwise
you
get
these
weird
things
that
show
up
all
right.
So
that's
just
some
of
the
other
configuration
you
do
when
you're
doing
your
your
testing
here.
Currently,
it's
turned
into
a
weather
weather
update
in
the
chat.
So
then
you
say
well:
I
want
to
go
into
the
next
level
here.
A
I
want
to
do
is
something
a
little
bit
more
with
the
rendering
and
there's
a
company
called
Airbnb
everybody's,
probably
heard
of
it.
What
they
did
is
they
created
a
better
rendering
engine
than
what
we
get
out
of
the
box
in
react,
and
this
engine
is
called
enzyme
and
what's
so
cool
about
this?
Is
that
it's
designed
to
kind
of
sit
on
top
of
the
out-of-the-box
renderer,
but
it
gives
us
a
lot
of
really
cool
capabilities
and
makes
things
a
lot
easier.
A
For
example,
it's
very
easy
to
get
access
to
a
component,
that's
been
rendered
and
then
simulate
the
clicking
of
a
button
and
reacting
to
those
different
events
in
order
to
use
it,
though,
you've
got
to
have
this
other
thing
installed
and
you
guys
may
be
looking
at
this
and
rolling
your
eyes
going.
Geez
he's
telling
me
all
this
stuff
that
I
have
to
do
to
get
this
to
work.
I
mean
trust.
Me,
things
are
going
to
get
better
in
just
a
minute.
So
how
do
you
set
up
enzyme?
Oh
my
god!
A
A
When
you
run
go
run
that
setup
file
that
sets
up
ends
on
it's
a
lot
of
stuff
to
do,
and
then,
let's
throw
a
little
bit
more
complexity
onto
it.
There
are
two
different
versions
of
react
that
a
lot
of
our
SharePoint
framework
projects
are
using
today.
It
wasn't
until
just
recently
that
the
SharePoint
framework
version
1.7
came
out
that
read
support
for
react
16
prior
to
that,
we
were
on
react.
15!
A
Well,
there's
a
bit
of
a
challenge
here,
because
when
you
look
at
the
tools
that
we
use
for
react,
16,
some
of
those
tools
are
expecting
us
to
use
the
latest
version
of
typescript
which
we're
not
doing
today
in
the
SharePoint
framework.
There
was
a
thing
in
the
chat
just
few
minutes
ago,
where
we
may
see
that
change
in
1.8
but,
for
example,
the
TS,
the
typescript
preprocessor,
expects
you
to
be
using
typescript
version
3
and
we're
still
on
2.4.
A
A
These
things
get
expensive,
and
so
you
need
the
profit
to
be
able
to
pay
for
all
the
food
that
these
things
are
gonna
use.
If
you
want
to
learn
more
about
it,
I've
got
a
blog
post.
That
explains
it,
but
here's
the
easy
part
I'm
gonna
do
a
demo
in
just
a
second.
If
you're
not
using
react,
it's
very
simple,
you
just
go
say:
NPM
install
or
in
my
case
I'm
using
yarn
yarn.
A
So
let's
take
a
look
at
this.
So
if
I
jump
over
here
to
my
machine,
what
I've
got
is
a
just
a
standard,
SharePoint
framework
project
that
is
using
react,
so
you
can
see
I'm
using
react.
16
now
notice
a
little
bit
farther
down
that
in
the
dev
dependencies
I
don't
have
any
mention
of
react
or
sort
of
just
anywhere
and
in
addition
over
here
in
my
tests
you
see
I'm
using
gulp
tests.
So
this
is
just
a
standard.
Out-Of-The-Box
SharePoint
framework
web
part
done
as
react.
A
So
what
I'm
going
to
do
is
I'm
going
to
set
this
thing
up
for
working
with
just
and
are
just
preset
that
I've
talked
about
disappear
minutes
ago.
So
I'm
gonna
do
that
by
saying
you,
darn,
add
or
NPM
install
install
jest
and
then
I'm
gonna
install
the
preset
called
jest
preset.
Sp
FX
react
16
dash
D
from
across
the
fingers,
and
the
demo
work
just
fine
this
morning
before
the
session.
So
we'll
double
check.
It
looks
good
now
everything
should
have
been
cached.
It
should
go
nice
and
quick.
A
There
we
go
and
better
when
the
2100
turns
into
4900
and
then
3300
shut
up,
we're
done
alright.
So
what
did
that
just
do
to
our
project?
It
did
a
couple
things
so,
first
of
all,
I
scroll
down
you'll
see
that
I
have
just
installed
and
I
had
this
preset
installed,
and
what
did
that
do
so
under
the
covers
here?
What
that
did?
A
It
also
has
the
configuration
here
for
using
pins
on
it's
already
got
that
set
up,
and
it's
created
its
own
configuration
file
for
all
the
stuff
that
you
need
in
order
to
do
use
jest
and
enzyme,
and
all
that
in
your
machine,
so
makes
your
life
a
heck
of
a
lot
easier
here.
It
even
has
my
mouse
go,
come
back
where.
A
A
A
A
A
I
did
it
inside
of
a
VM,
so
things
were
a
little
bit
slower,
but
you
can
see
everything
ran
within
eight
seconds
with
these
tests
of
not
only
testing
a
testable
service
but
also
testing
an
actual
component
with
the
rendering,
and
you
can
see
here
it
even
generate
a
snapshot
so
the
next
time
I
run.
It
should
be
a
little
bit
faster,
but
it's
gonna
match
that
snapshot.
A
Three
four
five
six
come
on
go
before
eight.
There
we
go
two
seconds
faster.
We
can
see
that
the
snapshot
was
valid.
So
if
I
go
back
and
look
at
the
code
here
and
open
this
up
and
look
in
the
source
and
my
projects
a
little
messy
now
as
I
just
threw
those
files
into
wherever
we
have
it.
Here's
the
snapshot
using
the
enzyme
to
JSON
or
not
enzyme
enzyme
to
JSON
snapshot
as
well.
So,
let's
make
sure
like
a
hell
of
a
lot
easier.
A
A
There
you
go
David
Warrior,
just
posted
in
the
chat,
so
you
take
a
look
at
that.
If
you
want
to
learn
more
about
how
this
stuff
works
and
what
you
know,
understanding
how
the
thing
how
the
pieces
are
set
together,
the
one
thing
that
I
will
I
will
tell
you
when
you
use
this.
Let
me
open
up
a
browser,
real
quick
here.
B
A
All
right
so,
let's
say
worse
at
home,
so
go
to
the
project,
so
you're
gonna
run
into
you
may
run
into
something
with
your
project
here
and
if
you
look
at
the
issues,
you'll
see
this
you'll
see
this
the
same
command
where
people
keep
mentioning
the
same
thing
of
a
challenge
here,
where
they
talk
about
they're,
getting
like
a
something
we're
think
the
things
are
not
running
because
of
your
it,
not
importing
stuff
correctly,
and
the
reason
for
this
is
under
the
covers.
Just
is
ignoring
all
of
the
stuff.
A
It's
not
processing
any
of
this
stuff
or
transpiling
anything
from
the
node
modules,
folder
all
of
the
packages
or
most
a
lot
of
the
packages
that
are
done
by
for
the
SharePoint
framework
and
are
done
and
other
related
packages
are
all
done
using
es6
or
all
the
transpiled
down
to
es6
and
shipped
that
way,
just
by
default
is
not
expecting
that
it's
expecting
them
to
be
as
es5
and
so
you'll
start
to
see
these
errors.
That
pop
up
with
things
like
I,
don't
understand
what
the
word
import
is
because
that's
not
an
es5
term.
A
It's
me
a
six-term
when
you
see
these
kinds
of
things,
keep
take,
take
a
second
and
think
about
what
are
you
trying
to
do,
because
what
I
see
most
of
the
time
is
that
you're
really
going
to
want
to
mock
these
up?
You
want
to
ignore
these
things,
and
if
you
look
at
the
issues
here,
I
actually
give
you
a
couple
examples
of
how
you
get
around
it,
trying
to
find
a
cleaner
solution
to
it,
but
effectively.
What
you're
going
to
do
is
like,
if
you're
doing
your
testing,
you
shouldn't
be
testing.
A
You
shouldn't
be
running
a
unit
test
that
checks
to
see
what
the
current
value
of
my
SharePoint
environment
is
in
my
in
localhost
or
in
a
live
environment,
you're
testing
that
doesn't
matter
right
that
doesn't
matter
it's
irrelevant,
in
fact,
because
you're
not
in
either
one
of
those
environments.
You
really
want
to
mock
that
up
and
have
that
have
a
hard-coded
value
get
returned
back
to
you.
A
When
you're
testing
of
just
testing
the
system
under
test
your
code,
you
don't
want
to
test
Microsoft's
code,
you
don't
want
to
test
some
other
web
service
or
anything,
that's
not
stuff
that
you
can
impact,
and
even
if
it
was
you
don't
need
to
be
filing
a
bug
in
your
project
for
I've
broken
whatever
a
broken
widget,
that's
coming
from
somebody
else's.
You
know
UI
components
in
this
case
here:
I'm,
not
I'm,
not
referring
to
the
patterns
and
practices
project
you
want
it.
You
want
to
keep
them
separate.
A
So
that's
everything
that
I
want
to
cover
with
this
I
hope.
This
was
useful
to
to
you,
those
those
libraries
or
those
packages
are
out
there
for
anybody
to
use.
If
you
want
to
use
them,
they
are
also
part
of
the
patterns
and
practices
generator
that
Stefan
Bower
has
done.
So
if
you
want
to
end
up
using
react
in
there,
we
are
using
those
pieces
as
well
so
make
sure,
like
the
hell
a
lot
easier.
Now
you
don't
remember
all
these
different
birds.