@data-client/test

🏁Guides  |  🏁API Reference

Features

• [x] Mocking for Storybook
• [x] Fixtures for component tests
• [x] Hook unit testing utility

Usage

Resource

import { createResource, Entity } from '@data-client/rest';

export default class Article extends Entity {
  id = '';
  content = '';
  author: number | null = null;
  contributors: number[] = [];

  pk() {
    return this.id?.toString();
  }
}
export const ArticleResource = createResource({
  urlRoot: 'http://test.com',
  path: '/article/:id',
  schema: Article,
})

Fixtures

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

Storybook

import { MockResolver } from '@data-client/test';
import type { Fixture } from '@data-client/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 '@data-client/react';
import { makeRenderDataClient } from '@data-client/test';
import options from './fixtures';

const renderDataClient = makeRenderDataClient(CacheProvider);

it('should resolve list', async () => {
  const { result } = renderDataClient(
    () => {
      return useSuspense(ArticleResource.getList, {
        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 } = renderDataClient(
    () => {
      return useSuspense(ArticleResource.getList, {
        maxResults: 10,
      });
    },
    { initialFixtures: options.error },
  );
  expect(result.error).toBeDefined();
  expect((result.error as any).status).toBe(400);
});