如何使用<TestContext>测试React-Admin自定义组件视图

问题原因 #

• 你用到的<Edit>作为React-Admin的高阶组件，默认会触发GET_ONE请求从dataProvider拉取对应ID的记录，你当前的<TestContext>没有配置可用的mock dataProvider，导致请求返回undefined
• 拉取的记录为空时，<SimpleForm>初始化表单值会拿到非对象值，触发proxy创建失败的报错

解决方案 #

不需要全量注入redux参数，也不用直接上E2E测试，按需求选择下面两种方案修改测试代码即可：

方案1：传入mock record跳过请求（适合仅测试UI展示的场景） #

直接给<Edit>组件传入record属性，就能跳过数据拉取逻辑，直接用传入的值初始化表单：

import { TestContext } from 'react-admin';
import { render } from '@testing-library/react';
import EditManufacturer from './EditManufacturer';

describe('<EditManufacturer/>', () => {
  let testUtils: any;

  beforeEach(() => {
    const mockEditManufacturerProps = {
      basePath: '/',
      id: '123',
      resource: 'foo',
      // 新增mock record，补全你的ManufacturerInputFields用到的字段即可
      record: {
        id: '123',
        name: '测试厂商',
      }
    };

    testUtils = render(
      <TestContext>
        <EditManufacturer {...mockEditManufacturerProps}/>
      </TestContext>
    )
  });

  // 你的同步测试用例
  it('should render all input fields', () => {
    // 断言逻辑
  })
});

方案2：配置mock dataProvider（适合需要测试请求逻辑的场景） #

给<TestContext>传入mock的dataProvider来响应RA的内置请求：

import { TestContext } from 'react-admin';
import { render, waitFor } from '@testing-library/react';
import EditManufacturer from './EditManufacturer';

describe('<EditManufacturer/>', () => {
  let testUtils: any;
  const mockGetOne = jest.fn().mockResolvedValue({
    data: { id: '123', name: '测试厂商' }
  })

  beforeEach(() => {
    const mockDataProvider = {
      getOne: mockGetOne,
      // 其他用到的dataProvider方法也可以在这里补全mock
    } as any;

    const mockEditManufacturerProps = {
      basePath: '/',
      id: '123',
      resource: 'foo',
    };

    testUtils = render(
      <TestContext dataProvider={mockDataProvider}>
        <EditManufacturer {...mockEditManufacturerProps}/>
      </TestContext>
    )
  });

  // 你的异步测试用例
  it('should call GET_ONE request on mount', async () => {
    await waitFor(() => expect(mockGetOne).toHaveBeenCalled())
    // 其他断言逻辑
  })
});

内容的提问来源于stack exchange，提问作者wblachut