--config
flag and testMatch option
@babel/preset-env.modules
to false
in .babelrc.js
prevents transpiling of our code, so
that tools like webpack can use tree
shaking before transpilation. For tests
we want modules transformed so that we
don't get ES6 errors.
.babelrc.js
we can check if we are in the test
environment; if so, we configure modules
to commonjs
for @babel/preset-env, otherwise disable module
transpilation entirely.
NODE_ENV
set to test.
babelrc.js
and uses that to run tests.
jsdom
to make window
accessible in our tests. This is useful,
but if we're in a Node environment,
then we're taking a performance hit
by loading a module that we likely
don't need.
jsdom
is loaded or not by making use of the testEnvironment
property in jest.config.js, or by running Jest with a flag:
.css
and other asset files into Javascript
files is non-standard JS, and one of the
reasons behind using loaders in
webpack.
.css
import in auto-scaling-text.js, and simply expects it to be a node
module, which it isn't.
moduleNameMapper
in jest.config.js.
undefined.
identity-obj-proxy
which is specifically built to improve
mocking of imports.
moduleNameMapper
is order-dependent, so we add a test to
match for .module.css
before .css, which then results in identity-obj-proxy
outputting a more meaningful class on
our component which we can then test
for.
.toMatchSnapshot
serialises objects and evaluates changes
to objects.
react-testing-library's container
property on the return value of render
always wraps components in a div. If you
want to evaluate your component
exclusively, you should use container.firstChild
emotion. When the CSS changes, we get a new
classname, but we have no idea what that
actually means.
emotion
we can use jest-emotion's serializer to output the actual
CSS in our snapshot, revealing the
implication of the updated
snapshot.
jest-serializer-path, can be used to modify snapshots. jest-serializer-path
normalises absolute paths to project
root to prevent conflicts between
different devs' systems.
babel
to transform them. We only want this
done when tests are run, as Webpack
should be left responsible handling
dynamic imports for dev and
production.
emotion
serialiser in other components,
too.
setupFiles
- this is an array of files that
are run before Jest is loaded. This is useful for anything
that doesn't need Jest to
be loaded.
setupTestFrameworkScriptFile
- a path to a file that we want
run once Jest has loaded. This
file is needed if we are going
to do things like add snapshot
serialisers, mocks, etc.
resolve.modules
property to configure Webpack to
evaluate paths in addition to node_modules
to import modules. This is useful on
large projects, and allows one to
specify imports without incredibly long
or tedious local import paths.
calculator.js
where loadable
is being used to import calculator-display
dynamically, but as if it were a
module.
moduleDirectories
in the Jest config. moduleDirectories
is isomorphic to Webpack's resolve.modules, allowing module imports to resolve
for local files.
loadable
has a preloadAll
method which can be used in async tests
to load all dynamic modules. Without
preloading the dynamic imports our
components with dynamic imports will
output the loading content.
react-testing-librarys debug
method that render
returns to evaluate the container
that render also returns.
moduleDirectories, making it easier to access the
utility.
react-testing-library
from that file, mititigating the need to
import both the utility and react-testing-library
into our test, and can override react-testing-librarys render
function so that our tests look the
same, while benefitting from being
wrapped in Providers
automatically.
moduleDirectories
will result in eslint not being able to
lint files, and catch errors like typos
in imports.
moduleDirectories
to resolve modules
--runInBand
flag to speed up debugging.
coverage
folder, which should not be committed to
the project.
collectCoverageFrom
in jest.config.js, passing an array of paths that should
be evaluated for coverage.
collectCoverageFrom
also indicates to Jest to include
everything that may not even have a test
file.
coverageThreshold
property to configure our
thresholds.
coverageThreshold
property with fine-grained
thresholds.
npx
we can run the codecov
binary to send code coverage reports to
codecov.io
.travis.yml
we can use the after_script
property to instruct Travis what to do
once tests pass. This is when we'd
want to run the codecov
binary.
--watch
mode watches files for changes, and puts
tests into interactive mode.
u
update all failed
snapshots
i
interactively update failed
snapshots
u
update the current
snapshot
s
skip the current
snapshot
q
quit interactive
snapshot updating
f
run only failing tests
a
run all tests
o
run tests only for files that
are modified
p
filter by filename regex
pattern
c
clear filters
t
filter by test name regex
pattern. This behaves in a
similar way to using test.only
to run only specified
tests
Enter
rerun the current tests
nom run test:watch
locally and npm test
on CI, we can use is-ci-cli
to run one script or another, based on
whether we are in a CI environment or
not:
p
and t
in Jest's watch
mode is useful, but we can get even
better feedback using jest-watch-typeahead.
jest-watch-typeahead
is a plugin for watch
which can be installed and then
configured under the watchPlugins
entry in jest.config.js
--config
flag and testMatch option
--config
flag. This allows us to easily run
separate configs for client-side and
server-side code.
rootDir
prop to be set in configs, which it will
use as the root.
package.json.
projects
property in the config accepts an array
of configs to run at the same
time.
--showConfig
flag:
project
configuration property, which will be
applied specifically to that config, and
a global
property, which will be applied to all
configs.
displayName
property to each project config. When
tests are run, they are output with
their displayNames prepended.
package.json
we no longer need to run separate
scripts for our tests because Jest will
be running multiple projects.
projects
property allows us to run multiple
configs at the same time, but if we only
want to run tests for a single project
we have to go back to the command line
and run only that project.
jest-watch-select-projects
plugin we get a new P
command in --watch
mode that allows us to toggle projects,
allowing us to run only the projects
we're interested in.
projects
property in our Jest config.
jest-runner-eslint, to lint our files.
--findRelatedTests
flag that will find all files related to
a specific test. This can be used to
speed up tests if only a few files have
changed.
husky
and lint-staged
to evaluate these files
dynamically.
husky
allows us to configure git hooks, and lint-staged
allows us to run commands on staged
files. If those commands pass when a
commit is attempted, the commit will be
made, otherwise the commit will be
prevented.
package.json:
husky, via our precommit
script, to run lint-staged.
lint-staged.config.js
we can pass a list of files directly to
Jest to have only those tests run before
the commit is made:
lint-staged, triggered by our precommit
hook that is run by husky.