Running snapshot tests

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 test

If you want to run the tests once and not start the watcher, run

CI=true yarn test

Note that this also runs the linter.

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.snap

The 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