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

IT技术 reactjs testing redux react-redux cypress
2021-05-09 13:25:28

赛普拉斯文档说可以

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

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

我浏览了几乎所有的文档并用 google 搜索,除了在介绍页面上提到的主要区别之一之外,我找不到任何实际执行此操作的参考或示例。

如果可能的话,如何实现这样的目标?

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

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

这可能不是最好的用例(甚至不是一个好的用例),但我相信还有其他情况,至少用一些数据初始化你的 redux 状态会非常方便。

谢谢!

3个回答

根据有关 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' })
  );

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

我不确定 React 应用程序的确切语法,但请参阅此博客使用 Vuex 数据存储和 REST 后端测试 Vue Web 应用程序

Vuex 相当于 Redux 的 VueJs。总之,您在应用程序启动的某个时刻添加了对商店的引用(从博客中修改了代码片段以使其更通用)

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'])
})

除了上述答案之外,您应该首先检查_store_您在store.js文件中创建实例是否与窗口相关联。就我而言,我做了以下工作:

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

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