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>的子组件。所以，如果我尝试类似的事情：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 ：

此情况下的结果仍然可能是错误的，因为当您创建父级的已装入实例时，如果已初始化为真，则未设置isReady状态

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

wrapper.setState({ isReady: true });

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

1 个答案: