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

Question

在 Enzyme 中测试连接到 Redux 的 React 组件 时，有一个熟悉的陷阱。您可能遇到了这个错误:

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

这可以通过两次导出被测组件来解决:

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

并且在您的测试中将 YourComponent 作为对象导入:

import { YourComponent } from '../pathToYourComponent'

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

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 中被浅层 呈现。

Answer 1

如果你使用浅层渲染，你不会得到这个错误，来自文档

“浅层渲染有助于限制您将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。”