@canopytax/testing-tools

@canopytax/testing-tools

Mocks for services and helper methods for MSW

Local Development

This only applies when you are looking to develop for this library. You do not need to do any linking when running tests in your app normally.

Run yarn watch

Run yarn link

Run yarn link @canopytax/testing-tools in the app that that you're using to test the library.

There seems to be a react/yarn issue when linking this project in another app. To resolve the issue you can do the following:

In testing-tools root: yarn link

In testing-tools/node_modules/react: yarn link

In your app:

yarn link @canopytax/testing-tools
yarn link react

When you're done testing make sure to unlink

In testing-tools root: yarn unlink

In testing-tools/node_modules/react: yarn unlink

Using mocks

To use the predefined mocks in your app you can use the genMockModuleNameMaps method in your jest.js file. (You may need to convert it from jest.json)

const testingTools = require("@canopytax/testing-tools");

const config = {
  // ...jest config options
  moduleNameMapper: {
    ...testingTools.genMockModuleNameMaps(),
  },
};

module.exports = config;

If you wish to only include some of the mocks you can specify them with the only option or specify ones to exclude with the exclude option. E.g.

genMockModuleNameMaps({ only: ['canopy-styleguide!sofe'] }) // Only includes whatever is in the array
genMockModuleNameMaps({ exclude: ['fetcher!sofe'] }) // Includes everything except for what is in the array

To add a new mock, create a file with a ".mock.js" extension in the mocks directory and then update the map in genMockModuleNameMaps

Using MSW helpers

If you are using MSW you can let the library hook into your server to use some global mocking methods. setupServer in MSW can take in an array of request mocks which will establish the default mocks. This would normally look like:

import { setupServer } from "msw/node";
import { rest } from "msw";

const mswServer = setupServer([
  rest.get("*/users/*", (req, res, ctx) => {
    return res(ctx.json({ users: [] }));
  }),
  rest.post("*/users", (req, res, ctx) => {
    return res(ctx.json({}));
  }),
]);

However you can use the createRestMocks method to remove a lot of boilerplate.

In your test setup file:

import { setupServer } from "msw/node";
import { initMswHelpers, createRestMocks } from "@canopytax/testing-tools";

const mswServer = setupServer(createRestMocks(({ get, put, post, patch, delete }) => ([
  get("*/users/*", { users: [] }), // Returns 200 JSON response
  post("*/users", (req, res, ctx) => res(ctx.json({}))), // You can also pass in an MSW callback
])));
initMswHelpers(mswServer);

beforeAll(() => mswServer.listen({ onUnhandledRequest: "error" }));
afterAll(() => mswServer.close());
afterEach(() => mswServer.resetHandlers());

To mock within a specific test you can use the mockGet, mockPost, mockPatch, mockPut, and mockDelete methods.

import { mockGet } from "@canopytax/testing-tools";

describe('test', () => {
  it(`renders`, async () => {
    mockGet("*/users/1", {
      id: 1,
      //...user data
    });
    render(<SomeComponent />);
  });
})

To mock an error response you can pass an MSW callback to one of the mock methods.

mockPost("*/users", (req, res, ctx) => {
  return res(ctx.status(410), ctx.json({}));
});