Testing: Unit & e2e with Jest - adeo/mozaic-design-system GitHub Wiki

Getting Started

To aim our quality goal, testing every part of our repository is a main goal. To do so, we choose to use Jest. Jest is a library for testing JavaScript code. It's an open source project maintained by Facebook, and it's especially well suited for React code testing, although not limited to that: it can test any JavaScript code.

Running from command line

To run all the tests suites:

  • yarn unit To run all tests one time
  • yarn unit:watch Great to run during dev session to run tests for all modified files

Coverage

Jest give us a coverage of mozaic project. We set our threshold to 50% to start, we are aiming to approach the 100%. You can define the threshold in jest.config.js

coverageThreshold: {
    global: {
      statements: 50, 
      branches: 50,
      functions: 50,
      lines: 50,
    },
  },

For more information checkout the documentation

Jest offers a visual coverage report, it stores it in .jest-coverage To access it you'll have to run a web server. e.g cd .jest-coverage && python -m SimpleHTTPServer 8000

Mocking

Knowing that Gatsby use graphql, we'll have to mock the data to be able to run complex tests. You'll have to add a beforeAll() function.

import { StaticQuery, query } from 'gatsby'

beforeEach(() => {
 StaticQuery.mockImplementationOnce(({ render }) =>
    render({
      site: {
        siteMetadata: {
          title: `Default Starter`,
        },
      },
  })
})

Please checkout the documentation

Convention

We decided to create all tests under the folder __tests__ in each component, containing testName.test.js