Skip to content

use jest for testing

Administrator requested to merge jest into master

Created by: sqs

Goal: help people write reliable UI code by making it easier to write and run tests.

Using Facebook's jest for tests helps us achieve this goal because:

  • jest has great first-class support for testing React components (see https://jestjs.io/docs/en/tutorial-react) and is by far the most popular way that people test React components, so the bugs are ironed out and the tooling is good
  • jest can run all of our tests (shared/, web/, and client/browser/ -- and unit tests AND e2e tests) from the same runner (yarn test in the root dir)
  • jest has a great --watch UI and a good vscode-jest extension
  • debugging tests in VS Code works with no additional effort
  • jest requires a lot less configuration and code to set up testing and coverage than Mocha (no --require ts-node --require source-map-support mocha.opts --require long-stack-traces --require esm ..., no test-time bundling required using unit-test-utils.ts, etc.)

Note: Most of the diff is from https://github.com/skovhus/jest-codemods, which automatically updates our test code to use jest style (describe, test, expect, etc., not it and assert).

jest appears to be the most popular tool for solving the problem that we have (testing a large web/multi-platform application), and it was surprisingly painless to set up and a joy to use.

TODOs:

  • Make it pass on Buildkite
  • Ensure e2e, screenshots-after-failures, and coverage still work on Buildkite
  • Test on macOS
  • Add docs to repo

Usage:

This is also documented in doc/dev/testing.md and doc/dev/web_app.md.

  • To run all unit tests, run yarn test from the root directory.
  • To run unit tests in development (only running the tests related to uncommitted code), run yarn test --watch.
    • And/or use vscode-jest with jest.autoEnable: true (and, if you want, jest.showCoverageOnLoad: true)
  • To debug tests in VS Code, use vscode-jest and click the Debug code lens next to any test('name ...', ...) definition in your test file (be sure to set a breakpoint or break on uncaught exceptions by clicking in the left gutter).
  • e2e tests:
    • To run e2e tests for the browser extension: cd client/browser && yarn test-e2e
    • To run e2e tests for the browser extension: cd web && yarn test-e2e
  • You can also run yarn test from any of the individual project dirs (shared/, web/, client/browser/).

Usually while developing you will either have yarn test --watch running in a terminal or you will use vscode-jest.

Notes:

  • There are no regressions. The following are all preserved as before: Puppeteer screenshots after test failures, jsdom tests, e2e tests, Codecov and lcov coverage, VS Code integration, etc.
  • You will need to write tests using jest matchers (or jest async matchers for async code), not assert. They are very similar.
  • You need to use test() instead of it() for defining test cases.

Merge request reports