Last updated
Running snapshot tests
This guide describes how to use the test setup in the Sharetribe Web Template
Table of Contents
The Sharetribe Web Template uses the
Jest testing framework as its test runner. The
setup the template uses is based on how testing is implemented in
create-react-app. For reference, see the testing section in the
create-react-app documentation.
Running the tests
To start the test watcher that automatically updates when files change, run
yarn testIf you want to run the tests once and not start the watcher, run
CI=true yarn testNote that this also runs the linter.
Information
In some environments, alternative test watcher doesn't always work and it can die unexpectedly. If that happens to you, you might want to install Watchman. Read more about this issue.
Extending tests
Most tests included in the template are snapshot tests:
“A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component.”
A failing snapshots can be updated through the Jest watch mode. Even though most tests in the template are UI-focused, some tests are written with unit-testing in mind.
Test files can be found next to the code they are testing and can be
identified by a .test.js suffix. Snapshots are located in a nested
folder __snapshots__.
├── ManageListingCard.example.js
├── ManageListingCard.js
├── ManageListingCard.module.css
├── ManageListingCard.test.js
├── MenuIcon.js
├── Overlay.js
├── Overlay.module.css
└── __snapshots__
└── ManageListingCard.test.js.snapThe template does not include full test coverage; the template is intended to be extended and customized which quickly renders the default tests obsolete. The default tests are there to provide a good starting point for writing tests.
Jest
Jest is a JavaScript test runner that runs tests
in a Node environment. The test runner accesses the DOM using the
jsdom library. As the tests are run
in a Node environment, they are not exact portrayals of real browser
behaviour. This provides good iteration speed and a well-adjusted
balance between accuracy, simplicity, and performance.
Jest provides detailed documentation on their testing framework. If you are interested in extending the in-built tests provided with the templated, the following guides can provide additional insight:
- Getting Started
- Tutorial - React
- Tutorial - Async
- Snapshot Testing blog post
- API Reference lists the global environment with the available functions and the assertion matchers