# Tests and mocking the API
# Unit tests with Jest
# Running unit tests
# Run unit tests
# Add '--coverage' for coverage or '-u' to update snapshots
yarn test:unit [-u] [--coverage]
# Run unit tests in watch mode
yarn test:unit:watch
# Introduction to Jest
For unit tests, we use Jest with the describe/expect syntax. If you're not familiar with Jest, I recommend first browsing through the existing tests to get a sense for them.
Then at the very least, read about:
- Jest's matchers for examples of other assertions you can make
- Testing async code
- Setup and teardown
# Unit test files
Configuration for Jest is in jest.config.js, support files are in tests/unit, but as for the tests themselves - they're first-class citizens. That means they live alongside our source files, using the same name as the file they test, but with the extension .unit.ts.
This may seem strange at first, but it makes poor test coverage obvious from a glance, even for those less familiar with the project. It also lowers the barrier to adding tests before creating a new file, adding a new feature, or fixing a bug.
# Unit test helpers
See tests/unit/setup.js for a list of helpers, including documentation in comments.
# Unit test mocks
Jest offers many tools for mocks, including:
- For a function, use
jest.fn(). - For a source file, add the mock to a
__mocks__directory adjacent to the file. - For a dependency in
node_modules, add the mock totests/unit/__mocks__.
# Integration tests with Jest
Similar to unit tests, Jest is used for running integration tests against the backend. For this, an instance of the server runs without mocks and a GraphQL client is used to send queries to the server. Jest is used to test the response of the server and to assert that side effects (such as writing to DB) are correct.
# Integration test files
All the integration test files are placed in server/tests/*.int.ts.
# Integration test helpers
Setup and helpers are located in server/tests/setup.ts.
# End-to-end tests with Cypress
# Running end-to-end tests
# Run end to end tests in full Chrome
yarn test:e2e
# Run end to end tests in headless Chrome (Electron)
yarn test:e2e:ci
# Run the dev server with the Cypress client
yarn test:e2e:dev
# Introduction to Cypress
Cypress offers many advantages over other test frameworks, including the abilities to:
- Travel through time to dissect the source of a problem when a test fails
- Automatically record video and screenshots of your tests
- Easily test in a wide range of screen sizes
And much more! I recommend checking out our Cypress tests in tests/e2e/specs, then reading through at least these sections of the excellent Cypress docs:
Beyond that, also know that you can access our app in Cypress on the window.