酶-测试嵌套组件是否正确渲染

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为true，我的加载程序也只能看到div部分。<form>..</form>永远不会呈现应为a的Child组件。因此，如果我尝试类似的操作：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); 

查看这篇关于如何编写选择器的文章：

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

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

wrapper.setState({ isReady: true });