Question

在测试酶中与 Redux 相关的反应组件时，有一个熟悉的陷阱。您可能会遇到此错误：

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'

关于这个问题，我遇到了一种新颖的情况。我正在测试一个连接的组件，并且正在使用上述解决方案来解决该问题，但是在该组件内部，当存在某些道具时，会渲染另一个连接的组件。

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连接的组件的组件时，如何避免“找不到存储”错误？

该组件正在最新版本的酶中浅渲染。

Answer 1

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

“浅呈现有助于将自己约束为一个组件进行测试，并确保您的测试不会间接断言子组件的行为。”

如何在酶/反应中测试包含连接到Redux的组件的组件？

1 个答案: