reactjs - Enzyme - 测试嵌套组件是否正确呈现

Question

我正在尝试测试当通过简单的 bool 值更新状态时，在父组件中其子组件是否正确呈现。在父组件下方:

class Parent extends Component {
  ...
  render() {
    const { ..., isReady } = this.state;
    const props = { ... };

    return(
      <div className="container page-content">

        { isReady ?
          <Child {...props} />
          :
          <div id="loader-wrapper">
            <div id="loader"></div>
          </div>
        }

      </div>
    );
  }
}

我的测试是:

beforeEach(() => {
      wrapper = mount(<Parent isReady={true}/>);
    });

it('Should render Child component', () => {
      expect(wrapper.prop('isReady')).to.equal(true); // Working !!
      expect(wrapper.find(Child).length).to.equal(1); // Not Working -> equal 0
    });

到目前为止，我仔细检查了状态是否正确更改，当我检查包装器的 isReady 状态时似乎是正确的。我很确定这部分工作正常。

我还尝试了wrapper.html()，即使isReady为true，我也只能看到加载器的div部分。子组件应该是 <form>..</form>永远不会被渲染。所以如果我尝试类似:expect(wrapper.find('form').length).to.equal(1);它也不起作用。我不明白为什么。

这里测试我的父级行为并查看我的子组件是否正确呈现的最佳实践应该是什么？

更新:

1/ 我经历过 console.log(wrapper) ，我可以看到 isReady 肯定是正确的，但唯一渲染的部分是带有加载器的 div。嵌套组件 Child 永远不会被渲染。我不知道为什么......因为我正在使用 mount 并且 prop/state 设置正确。

2/ 据我所知，它是 { isReady ? ... }这是问题所在，因为我正在另一个组件中进行类似的测试，我测试父组件是否包含嵌套组件，但这次没有条件并且工作正常。

Answer 1

您应该在测试文件中导入组件并将该实例传递给查找函数而不是字符串

import Child from 'path/to/child';
expect(wrapper.find(Child).length).to.equal(1); 

检查this article on how to write the selectors :

此外，这种情况下的结果仍然可能为 false，因为当您创建父级的已安装实例时，如果其尚未初始化为 true，则不会设置 isReady 状态

为了设置测试组件的状态，请使用 setState

wrapper.setState({ isReady: true });