hops-msw

Please see the main Hops Readme for general information and a Getting Started Guide.

This is a preset for Hops that can be used to set up a Mock Service Worker for your Hops app. It allows to mock REST and GraphQL APIs in unit and integration tests.

This package (together with jest-preset-hops) takes care of setting up the MSW mock server already, so if you use it for unit-testing, you do not need to do this yourself.

Installation

Add this preset to your existing Hops React project:

npm install --save hops-msw

In order to use it for unit-testing, you also need to install the jest-preset-hops package.

Note: Please be aware that only one service worker can exist per scope. Therefore hops-msw does not work together with hops-pwa.

Usage

Set the environment variable ENABLE_MSW to true when running your unit tests.

Example:

import { render, waitFor } from '@testing-library/react';
import { getMockServer } from 'hops-msw/unit';
import { graphql } from 'hops-msw';
import { withApolloTestProvider } from 'hops-react-apollo';

it('loads graphql data', async () => {
  getMockServer().use(
    graphql.query('search', (req, res, ctx) => {
      return res(
        ctx.data({
          __typename: 'Query',
          user: {
            __typename: 'User',
            name: 'Something',
          },
        })
      );
    })
  );

  const { getByText } = render(withApolloTestProvider(<HomeWithData />));

  await waitFor(() => getByText('Something'));
});

Read the MSW documentation for more information on how to write mocks.

See here an example of how to write an integration test using puppeteer.

Configuration

Preset Options

| Name | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | mockServiceWorkerHandlersFile | String | '' | no | The path to your mock handlers file (which will be used during development) | | mockServiceWorkerUri | String | <basePath>/sw.js | no | The path on which the mock service worker will be served from |

mockServiceWorkerHandlersFile

Use this option to register an array of handlers. These will be used during development if ENABLE_MSW=true is set. See here for an example.

Note: Unfortunately the handlers must be written in ES5 (no import/export) until we can drop Node.js 12 support.

"hops": {
  "mockServiceWorkerHandlersFile": "<rootDir>/mocks.js"
}

mockServiceWorkerUri

Usually this doesn't need to be changed.