酶-测试嵌套组件是否正确渲染 [英] Enzyme - Test if a nested component is correctly rendered

问题描述

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

I'm trying to test if within my parent component its child component is correctly rendered when the state is updated through a simple boolean value. Below the parent component :

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状态。我很确定这部分工作正常。

So far I double checked if the state is correctly changed, and it seems to be true when I check the wrapper's state of isReady. I'm pretty sure this part is working fine.

我也尝试了wrapper.html（），即使isReady为true，我也只能看到div部分装载机。子元素应该是< form> ..< / form> 不会呈现。因此，如果我尝试类似以下操作： expect（wrapper.find（'form'）。length）.to.equal（1）; 均无效。我不明白为什么。

Also I tried wrapper.html() and even if isReady is true, I can see only the div part with my loader. The Child component which should be a <form>..</form> is never rendered. So If I try something like : expect(wrapper.find('form').length).to.equal(1); it's not working neither. I don't get why.

这里最好的方法是测试我的父母行为，并查看我的子组件是否正确呈现？

What should be the best practice here to test my parent behaviour and see if my child component inside is correctly rendered ?

更新：

1 / 通过 console.log（wrapper），我可以看到isReady确实是正确的，但唯一呈现的部分是带有加载程序的div。嵌套组件Child永远不会呈现。我不知道为什么。当我使用mount并正确设置了prop / state时。

1/ I've been through console.log(wrapper), I can see the isReady is definitely true, but the only part rendered is the div with the loader. The nested component Child is never rendered. I have no idea why.. as I'm using mount and the prop/state is correctly set.

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

2/ From what I can see it's the { isReady ? ... } which is the problem because I'm doing a similar test in another component where I test if a parent component contains a nested component but this time there is no condition and it's working fine.

推荐答案

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

You should import the component in your test file and pass that instance to the find function rather than a string

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

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

Check this article on how to write the selectors:

条件仍然可能是错误的，因为在创建父项的已安装实例时，如果尚未将 isReady 状态设置为尚未初始化为true

Also the result in this condition will still could be false since when you create a mounted instance of your parent you are not setting the isReady state if its already not initialised to true

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

In order to set the state of the test component use setState

wrapper.setState({ isReady: true });

这篇关于酶-测试嵌套组件是否正确渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！