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

Question

我正在尝试测试在我的父组件中，当通过一个简单的布尔值更新状态时，它的子组件是否正确呈现。父组件下方：

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 为真，我也只能看到加载程序的 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

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

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

检查this article on how to write the selectors：

此外，这种情况下的结果仍然可能是错误的，因为当您创建父级的挂载实例时，如果它尚未初始化为 true，则不会设置 isReady 状态

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

wrapper.setState({ isReady: true });