如何使用 HOC 编写适当的玩笑测试？

Question

我想了解为什么我的 jest/enzyme 测试失败了。我有一个组件，我使用 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);
}

但是，我收到类似 "Cannot read property 'state' of undefined" 的错误。我知道使用浅渲染并不能给我所需的确切结构，但我不确定还有什么可以尝试获得正确的结构。我尝试浅渲染包装的组件，然后在其中找到未包装的组件，就像这样，component = shallow(<MyComponent {...props} />).find('MyComponent').shallow();，但没有成功。任何其他建议将不胜感激。 `

Answer 1

通常你想测试组件而不是组件与 redux 的集成：

class MyComponent extends Component {
    //code here
}

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

同样在您的测试中，您将导入命名导出 import { MyComponent } from '...' 而不是导入默认导出：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);
  }
}

如果你想测试组件与 redux 存储的交互，你需要用 <Provider />

包装你的组件

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

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

你绝对应该 read the testing section redux 文档

如何使用 HOC 编写适当的玩笑测试？

How to write proper jest tests with HOC?

javascript

reactjs

enzyme

jestjs

higher-order-components