Question

我有一个在某些条件下在渲染中返回null的组件：

render() {
  if (this.props.isHidden) {
      return null;
  }

  return <div>test</div>;
}

我想检查当使用jest和酶时isHidden为真时组件是否为空：

describe('myComp', () => {
    it('should not render if isHidden is true', () => {
        const comp = shallow(<myComp isHidden={true} />);
        expect(comp.children().length).toBe(0);
    });
});

这有效，但有没有更惯用的方式来编写这个测试？测试呈现为null的组件是非常常见的情况。

Answer 1

   expect(comp.type()).toEqual(null)

那就是它！

或：expect(comp.get(0)).toBeFalsy()

Answer 2

根据ShallowWrapper::html实现由于render，如果组件实例类型为null，则返回null。

expect(comp.html()).toBeNull();

Answer 3

ShallowWrapper具有isEmptyRender()功能：

expect(comp.isEmptyRender()).toBe(true)

Answer 4

我们将以下与酵素酶一起使用

expect(comp).toBeEmptyRender()

Answer 5

如Benjamin Intal's solution中所述，我尝试使用DL00gA，但是即使myComponent.isEmptyRender()返回0，它也意外返回了false。

原来的问题是，myComponent.children().length来自对另一个浅层呈现的组件上的myComponent的调用。在这种情况下，有必要在找到的子组件上另外调用.find()，以使.shallow()正常工作：

isEmptyRender()

参考：https://github.com/enzymejs/enzyme/issues/1278

Jest Enzyme测试一个在render方法中返回null的React组件

5 个答案: