Reactjs 如何访问React组件'；什么地方州使用柏树？

我正在使用react with redux和cypress进行测试， 我可以使用 cy.window（）.its（'store'）。invoke（'getState'）。然后（（state）=>{} 但是如何访问组件的本地状态而不是应用程序存储

我试过了

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

或

但是Cypress返回“CypressError:Timed out retrying:cy.invoke（）出错，因为主题上不存在“getState”属性” 在Cypress控制台（镀铬）上显示：

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>
    }    
}

import React，{Component}来自'React'；
类simpleComponent扩展组件{
建造师（道具）{
超级（道具）
此.state={
示例：“你好”
}
}
//getState（）仅用于在cypress上测试
getState（）{
返回此。状态
}
render（）{
返回
}    
}

---

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

有一个Cypress插件，名为。它使您能够直接装载

React

组件（添加

cy.mount（）

命令），并提供对组件内部状态的访问

以下是回购协议自述文件中的一个示例：

//加载IntelliSense的Cypress TypeScript定义
/// 
//导入要测试的组件
从“../../src/hello-x.jsx”导入{HelloState}
从“React”导入React
描述（'HelloState组件'，（）=>{
它（'有效'，（）=>{
//安装被测部件
山
//开始测试！
cy.contains（'你好，蜘蛛侠！'）
//安装的组件可以通过其名称、功能或JSX进行选择
//例如，“HelloState”、“HelloState”或
赛格（希腊语）
.invoke（'setState'，{name:'React'}）
赛格（希腊语）
.its（“状态”）
.should（'deep.equal'，{name:'React'}）
//检查GUI是否已重新加载
cy.contains（'Hello React！'）
})
})
您可以在不安装反作用组件的情况下识别元素。如果您与源代码或编写功能UI测试用例隔离地测试您的反应应用程序，则可以考虑调用CyPress插件。它可以帮助您通过组件、道具和状态识别Web元素，即使在缩写之后。您还需要使用DeaveDeV。l在这种情况下识别组件名称

以下是一个例子：

假设您的react应用程序：

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

查找更多样本测试

希望它能有所帮助！
使用像Cypress这样的端到端测试工具，您实际上不会与React API交互，也不会直接与组件的内部交互，例如执行setState（）。相反，您将验证/测试用户将看到和体验的内容。您尝试做的是使用Jest/Ezyme等工具进行单元测试。通过单元测试，您可以调用组件（如事件处理程序）的内部操作，并在各种事件或API调用之前/之后验证Redux存储数据。Cypress really不适用于这种类型的测试。另外，您的组件getState prop正在执行此操作。getState（）在每个渲染上，而不是绑定要传递给子组件的类函数或响应事件（如单击）而执行的类函数。该属性和类方法在React应用程序中的用途是什么？您将无法将状态公开给窗口或用于类似的外部使用。好的一点，它不在原始版本中代码，但我添加它是为了在cypress控制台上查看它，以消除cypress在中看不到它的可能性，否则您的第一点回答了我的问题，我认为能够使用cypress访问本地状态与redux存储类似会很好。这一个完全符合您的要求。
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'))