React Redux 测试答案

【问题标题】：React Redux TestingReact Redux 测试
【发布时间】：2018-06-25 23:09:17
【问题描述】：

我正试图集中精力测试使用 redux 存储的反应组件。

我看到一个使用 redux-mock-store 中的 Mock Store 的示例。

链接：

React/Redux Testing w/ Enzyme

我想我想用我的真实商店进行测试。这是有原因的吗？是不是只测试不需要了解真实商店的组件的功能？但是，为什么要使用任何商店呢？

【问题讨论】：

标签： reactjs testing redux

【解决方案1】：

理想情况下，即使没有商店，您的组件也应该是可测试的。您可以代理传递的道具并测试预期的功能。在大多数情况下，您只想测试组件的最终合同，而不是实际的实现细节（操作、reducers 等）。

这是一个非常固执且务实的观点，但您可以为您的项目进行以下类型的测试 -

对组件进行单元测试
E2E 测试页面
查看您的组件库/设计系统的回归测试。

希望这会有所帮助！ ?

【讨论】：

【解决方案2】：

使用来自redux-mock-store 的工具模拟商店对于测试异步操作很有用。

Writing tests for async actions

【讨论】：

【解决方案3】：

您还可以使用工具 Check-State-Management 测试您的 redux（存储/选择器）。

它需要一些配置。根据您的文档：

安装

从Google Web Store安装chrome扩展
在项目的/src 文件夹中准备checkState.config.js 文件（您需要从该文件中导出所有选择器）。看example
将我们的中间件插入您的商店：

import * as selectors from "./checkState.config.js";

const checkStateMiddleware = (options = {}) => {
    return window && window["__checkStoreExtension__"] ? window["__checkStoreExtension__"](options) :
        store => next => action => next(action);
};

const store = createStore(
    reducers,
    compose(applyMiddleware(
        checkStateMiddleware(selectors),
    )),
);

完成这些任务后，您可以运行您的应用程序，并在打开 Chrome 扩展程序的情况下访问它。然后，它会在您导航并与之交互时根据应用程序的真实状态准备测试用例。

【讨论】：