Javascript 如何使用HOC编写适当的jest测试？

我在试图理解为什么我的玩笑/酶测试失败了。我有一个组件，我使用中redux的

compose

函数，其结构如下：

class MyComponent extends Component {
    //code here
}

export default compose(
    connect(mapStateToProps),
)(MyComponent)

在我的玩笑测试中，我这样做：

Import { MyComponent } from ‘app/MyComponent’;

describe(‘<MyComponent />’, () => {
    let component;
    beforeEach(() => {
        props = {
            id: ‘23423’     
        }
        component = shallow(<MyComponent {…props} />);
    }


    it(‘Loads correctly’, () => {
        expect(component.state(‘isLoading’)).toEqual(true);
        expect(component.find(‘InnerComponent’).length).toBe(1);
}

从'app/MyComponent'导入{MyComponent}；
描述（“”，（）=>{
let组件；
在每个之前（（）=>{
道具={
id:'23423'
}
组件=浅（）；
}
它（'正确加载'，（）=>{
expect（component.state（'isload'））.toEqual（true）；
expect（component.find（'InnerComponent'）.length）.toBe（1）；
}

但是，我会遇到类似“无法读取未定义的属性‘state’”的错误。我知道使用浅层渲染并不能提供我需要的确切结构，但我不确定还有什么可以尝试获得正确的结构。我尝试过浅层渲染已包装的组件，然后在其中查找未包装的组件，就像这样，

component=shallow（）.find（'MyComponent'）.shallow（）；

，运气不好。如有其他建议，将不胜感激。

---

`

通常，您希望测试组件，而不是组件与redux的集成：

class MyComponent extends Component {
    //code here
}

export { MyComponent } // export the component
export default compose(
    connect(mapStateToProps),
)(MyComponent)

此外，在测试中，您将从“…”导入命名的导出

import{MyComponent}

，而不是导入默认值：

import MyComponent from'…'

import { MyComponent } from ‘app/MyComponent’;

describe(‘<MyComponent />’, () => {
  let component;
  beforeEach(() => {
    props = {
      id: ‘23423’     
    }
    component = shallow(<MyComponent {…props} />);
  }


  it(‘Loads correctly’, () => {
    expect(component.state(‘isLoading’)).toEqual(true);
    expect(component.find(‘InnerComponent’).length).toBe(1);
  }
}

从'app/MyComponent'导入{MyComponent}；
描述（“”，（）=>{
let组件；
在每个之前（（）=>{
道具={
id:'23423'
}
组件=浅（）；
}
它（'正确加载'，（）=>{
expect（component.state（'isload'））.toEqual（true）；
expect（component.find（'InnerComponent'）.length）.toBe（1）；
}
}

如果您想测试组件与redux商店的交互，您需要使用

从'app/MyComponent'导入{MyComponent}；
从“react redux”导入{Provider}
描述（“”，（）=>{
let组件；
在每个之前（（）=>{
道具={
id:'23423'
}
组件=浅（）；
}

---

您应该清楚地了解redux文档

这很有效，也很有意义。感谢您的帮助和有用的测试部分链接！非常感谢

import { MyComponent } from ‘app/MyComponent’;
import { Provider } from 'react-redux'

    describe(‘<MyComponent />’, () => {
      let component;
      beforeEach(() => {
        props = {
          id: ‘23423’     
        }
        component = shallow(<Provider><MyComponent {…props} /></Provider>);
      }