Question

我正在与redux配合使用，并与cypress进行测试，我可以使用访问商店 cy.window（）。its（'store'）。invoke（'getState'）。then（（state）=> {} 但是我如何访问组件的本地状态而不是应用程序商店？

我尝试了

cy.get('.simple-component').its('getState')

或

cy.get('.simple-component').invoke('getState')

但是Cypress返回“ CypressError：超时重试：cy.invoke（）错误，因为您的主题上不存在'getState'属性” 在赛普拉斯控制台（Chrome浏览器）上，它的效果很明显：

Yielded:   
<div class="simple-component" getstate="[object Object]"></div>

这似乎是由于React从DOM中删除方法所致，所以我需要在React中而不是在DOM中进行访问？

import React, { Component } from 'react';

class simpleComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sample: "hello"
            }
    }
    // getState() just for testing on cypress
    getState() {
      return this.state
    }
    render(){
      return <div className="simple-component" getState={this.getState()}></div>
    }    
}

或者可以使用window.store在简单组件的末尾导出本地组件状态吗？

Answer 1

有一个赛普拉斯插件，名为react-unit-test。它使您能够直接安装React组件（添加cy.mount()命令）并提供对组件内部状态的访问。

这是仓库的自述文件中的一个示例：

// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import { HelloState } from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => {
  it('works', () => {
    // mount the component under test
    cy.mount(<HelloState />)
    // start testing!
    cy.contains('Hello Spider-man!')
    // mounted component can be selected via its name, function, or JSX
    // e.g. '@HelloState', HelloState, or <HelloState />
    cy.get(HelloState)
      .invoke('setState', { name: 'React' })
    cy.get(HelloState)
      .its('state')
      .should('deep.equal', { name: 'React' })
    // check if GUI has rerendered
    cy.contains('Hello React!')
  })
})

Answer 2

您可以在不安装react组件的情况下识别元素。如果要与源代码隔离来测试React应用程序或编写功能性UI测试用例，则可以考虑使用名为cypress-react-selector的赛普拉斯插件。它甚至可以在缩小之后帮助您按组件，道具和状态来标识Web元素。在这种情况下，您需要使用React Dev Tool来标识组件名称。

这里是一个例子：

假设您的应用是：

const MyComponent = ({ someBooleanProp }) => (
  <div>My Component {someBooleanProp ? 'show this' : ''} </div>
)

const App = () => (
  <div id='root'>
    <MyComponent />
    <MyComponent name={bob} />
  </div>
)

ReactDOM.render(<App />, document.getElementById('root'))

然后您可以简单地识别出react元素，例如：

cy.getReact('MyComponent', { name: 'bob' } ).getCurrentState();

查找更多示例测试here

希望这会有所帮助！

如何使用赛普拉斯访问React组件的本地状态？

2 个答案: