IT技术 - 酶 - 测试嵌套组件是否正确呈现 - 吾爱随笔录

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

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>永远不会呈现应该是 a 的子组件。所以如果我尝试类似的事情：expect(wrapper.find('form').length).to.equal(1);它也不起作用。我不明白为什么。

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

更新：

1/我已经通过了console.log(wrapper)，我可以看到 isReady 绝对是真的，但渲染的唯一部分是带有加载程序的 div。嵌套组件 Child 永远不会呈现。我不知道为什么......因为我正在使用 mount 并且正确设置了props/状态。

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