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

【问题标题】：How to test a Resource controller with unit test如何使用单元测试测试资源控制器
【发布时间】：2018-08-17 14:50:29
【问题描述】：

我有以下标准 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>

我必须挂载资源才能对此进行测试，还是有更好的方法可以挂载和测试我感兴趣的子组件？

【问题讨论】：

标签： unit-testing testing react-admin

【解决方案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>
);

确实，您可以阅读源代码，找到所有 HOC，注入所有必需的 props，安装视图并测试输出。这很痛苦，但可行。

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

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

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

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

【讨论】：