如何使用单元测试来测试资源控制器

Question

我有以下标准的 react-admin 结构设置，一切都按预期工作，资源从端点获取数据 GET_LIST 和 GET_ONE 我遇到的问题是我想要测试 CandidateView 组件，我不知道如何将一些模拟数据传递给它以检查在呈现时它将包含所有预期的数据。

<Admin
    title="Admin"
    dashboard={Home}
    dataProvider={restProvider}
    history={history}
    loginPage={Login}
    menu={Menu}
  >
    <Resource
      name="candidates"
      list={Candidates}
      icon={UserIcon}
      edit={CandidateEdit}
      show={CandidateView}
    />
  </Admin>

我是否必须安装资源才能对此进行测试，或者是否有更好的方法可以安装和测试我感兴趣的子组件？

Answer 1

老实说，React Admin 控制器被设计成易于使用和破解，不容易测试。

假设您使用的是像这样的简单显示视图：

export const CandidateView = props => (
    <Show {...props}>
        <SimpleShowLayout>
            <TextField source="title" />
            <TextField source="position" />
            <RichTextField source="body" />
            <DateField label="Registration date" source="created_at" />
        </SimpleShowLayout>
    </Show>
);

的确，你可以阅读源代码，找到所有的高阶组件，注入所有需要的道具，挂载视图并测试输出。这很痛苦，但可行。

但如果您的唯一目标只是测试此视图是否具有 title、position、body 和 created_at 等正确字段，则它不是这不是一种有效的方法。

我们将 React Admin 资源声明视为一个简单的配置。（您不会测试 XML 个文件）

在我们的应用程序中，我们使用端到端测试来检查所有视图是否配置良好并且具有正确的组件和行为。

您可以在 React Admin 本身的页面上找到使用 cypress 或 selenium 的 E2E 测试示例。查看 cypress/integration 文件夹以查看我们运行.

的所有测试

如何使用单元测试来测试资源控制器

How to test a Resource controller with unit test

unit-testing

testing

react-admin