@rest-hooks/test

🏁Guides  |  🏁API Reference

Features

• Mocking for Storybook
• Fixtures for component tests
• Hook unit testing utility

Usage

Resource

import { Resource } from '@rest-hooks/rest';

export default class ArticleResource extends Resource {
  readonly id: number | undefined = undefined;
  readonly content: string = '';
  readonly author: number | null = null;
  readonly contributors: number[] = [];

  pk() {
    return this.id?.toString();
  }
  static urlRoot = 'http://test.com/article/';
}

Fixtures

export default {
  full: [
    {
      request: ArticleResource.list(),
      params: { maxResults: 10 },
      result: [
        {
          id: 5,
          content: 'have a merry christmas',
          author: 2,
          contributors: [],
        },
        {
          id: 532,
          content: 'never again',
          author: 23,
          contributors: [5],
        },
      ],
    },
  ],
  empty: [
    {
      request: ArticleResource.list(),
      params: { maxResults: 10 },
      result: [],
    },
  ],
  error: [
    {
      request: ArticleResource.list(),
      params: { maxResults: 10 },
      result: { message: 'Bad request', status: 400, name: 'Not Found' },
      error: true,
    },
  ],
  loading: [],
};

Storybook

import { MockResolver } from '@rest-hooks/test';
import type { Fixture } from '@rest-hooks/test';
import { Story } from '@storybook/react/types-6-0';

import ArticleList from 'ArticleList';
import options from './fixtures';

export default {
  title: 'Pages/ArticleList',
  component: ArticleList,
};

export const FullArticleList = ({ result }) => (
  <MockResolver fixtures={options[result]}>
    <ArticleList maxResults={10} />
  </MockResolver>
);

Hook Unit Test

import { CacheProvider } from '@rest-hooks/react';
import { makeRenderRestHook } from '@rest-hooks/test';
import options from './fixtures';

const renderRestHook = makeRenderRestHook(CacheProvider);

it('should resolve list', async () => {
  const { result } = renderRestHook(
    () => {
      return useSuspense(ArticleResource.list(), {
        maxResults: 10,
      });
    },
    { initialFixtures: options.full },
  );
  expect(result.current).toBeDefined();
  expect(result.current.length).toBe(2);
  expect(result.current[0]).toBeInstanceOf(ArticleResource);
});

it('should throw errors on bad network', async () => {
  const { result } = renderRestHook(
    () => {
      return useSuspense(ArticleResource.list(), {
        maxResults: 10,
      });
    },
    { initialFixtures: options.error },
  );
  expect(result.error).toBeDefined();
  expect((result.error as any).status).toBe(400);
});