如何在 cypress 测试中公开/访问像 Redux 这样的数据存储？答案

【问题标题】：How to expose/access a data store like Redux within a cypress test?如何在 cypress 测试中公开/访问像 Redux 这样的数据存储？
【发布时间】：2018-08-29 03:21:16
【问题描述】：

Cypress docs说你可以

公开数据存储（如在 Redux 中），以便您可以直接从测试代码以编程方式更改应用程序的状态。

我还观看了 Kent C. Dodds 先生的测试课程，他提到可以使用 Cypress 中的现有数据初始化 redux 存储（在测试之前或之中，不确定）

我浏览了几乎所有的文档并用谷歌搜索，除了在介绍页面上提到的主要区别之一之外，我找不到任何实际这样做的参考或示例。

如果可能的话，如何实现这样的目标？

我感兴趣的案例是 E2E 测试：

首先，我将作为标准 E2E 测试来测试我的身份验证/登录功能
然后，为了测试应用程序的其他部分，我将添加一个 Cypress 命令，该命令将直接进行身份验证调用，并在我需要登录时从响应中设置存储（与注销相同），而不是手动输入凭据和点击登录（这可能是我最终要做的）

这可能不是最好的用例（甚至不是一个好的用例），但我相信在其他情况下，至少用一些数据初始化你的 redux 状态会非常方便。

谢谢！

【问题讨论】：

标签： reactjs testing redux react-redux cypress

【解决方案1】：

根据关于 Vuex 的答案，我这样做了，效果很好：

// after createStore(...)
if (window.Cypress) {
  window.__store__ = store;
}

// in cypress tests
cy.window().should('have.property', '__store__');
cy.window().its('__store__')
  .then(
    store => store.dispatch({ type: 'UPDATE_CURRENT_PROFILE' })
  );

在对 store 做任何事情之前不要忘记cy.visit('anyRoute')，这样当你尝试访问它时，React 应用程序就会启动并且 redux store 已经创建。

【讨论】：

欢迎来到 StackOverflow！通过点击问题下方的“添加评论”来询问 OP 进行澄清会更方便。
OP 由于信誉要求还不能这样做
如果你想更深入，这个blog post可以完成你的阅读......

【解决方案2】：

我不确定 React 应用程序的确切语法，但请参阅此博客 Testing Vue web applications with Vuex data store & REST backend。

Vuex 是 Redux 的 VueJs 等价物。总而言之，您在应用启动的某个时刻添加了对商店的引用（代码 sn-p 从博客修改为更通用一点）

if (window.Cypress) {
  // only available during E2E tests
  window.appStore = app.store  // Substitute an appropriate expression for React Redux
}

并在这样的测试中引用它

const getStore = () => cy.window().its('appStore')

it('has loading, newTodo and todos properties', () => {
  getStore().its('state').should('have.keys', ['loading', 'newTodo', 'todos'])
})

【讨论】：

【解决方案3】：

在上述答案之上，您应该首先检查您在store.js 文件中创建的_store_ 实例是否随窗口附加。就我而言，我做了以下工作：

const store = createStore(rootReducer,getCombinedStore(preloadedState),enhancer);
 if (global.window && global.window.Cypress) {
  global.window.__store__ = store;
  }

如您所见，在创建 store 对象后，我还必须将它附加到窗口中。

【讨论】：