首页 文章

如何在Enzyme / React中测试包含连接到Redux的组件的组件？

提问于
浏览 次
3

在测试 React components 时，在 Enzyme 中连接到 Redux 时，有一个熟悉的问题 . 您可能遇到过此错误：

Invariant Violation: Could not find "store" in either the context or props of "Connect(YourComponent)

这是 resolved 通过两次导出被测组件：

export class YourComponent extends Component {}
export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

在你的测试中 import YourComponent as an object ：

import { YourComponent } from '../pathToYourComponent'

关于这个问题，我遇到了一个新的场景 . 我正在测试一个连接组件，我正在使用上面的解决方案来解决这个问题，但是在该组件内部还有另一个连接组件，当存在某些道具时会被渲染 .

import React, { Component } from 'react';
export class YourComponent extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    const { arrayOfObjects } = this.props;

    let nestedConnectedComponent; 
    if (arrayOfObjects.length) {
      nestedConnectedComponent = arrayOfObjects.map((ele, idx) => (
        <NestedConnectedComponent
          key={idx}
        />
      ))
    }
    return (
      <div> {arrayOfObjects} </div>
    )
  }
}

function mapStateToProps(){}
function mapDispatchToProps(){}

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

当您测试包含连接到redux的组件的组件时，如何避免“找不到存储”错误？

该组件正在最新版本的Enzyme中进行渲染 .

javascript reactjs sinon enzyme

1 回答

  • 1

    如果您使用浅层渲染，则不会出现此错误

    '浅呈现对于限制自己将组件作为一个单元进行测试很有用，并确保你的测试不会间接地断言子组件的行为 .

    回复于

相关问题