如何使用 jest 和酶检查点击后组件是否消失？

问题描述

我有一个组件，

function TestComponent() {
  const [visible,setVisible] = useState(true);
  return (
    <React.Fragment>
      {visible && <Container>
        I'm Visible
        <button onClick={() => setVisible(false)}>
          click to close
        </button>
      </Container>}
    </React.Fragment>
  );
}

我正在尝试测试在单击按钮时组件应该不可见。

我有以下测试用例来测试，

test('Random Test',() => {
  const randomComponent = shallow(<TestComponent />);

  expect(randomComponent.find('Container')).toBeTruthy();
  randomComponent.find('button').simulate('click');
  expect(randomComponent.find('Container')).toBeFalsy();
});

似乎不起作用， 出现错误，

expect(received).toBeFalsy()

Received: {}

任何帮助将不胜感激？ 我有一个偷偷摸摸的怀疑，这不是检查组件是否隐藏的方法。如果有人能说出更好的方法，也将不胜感激。

更新 #1：

expect(randomComponent.render().text()).toContain('I\'m Visible');
randomComponent.find('button').simulate('click');
expect(randomComponent.render().text()).toContain('');

使用上述测试用例似乎有效。仍在寻找更好的方法。

解决方法

由于 .find() 将始终返回 ShallowWrapper 类的实例，即使没有匹配的节点。请参阅 source code of .find() 和 .wrap()。它不会返回假值 (null,undefined)，因此 .toBeFalsy() 断言将始终失败。

1. 使用.exists([selector]) => Boolean

返回包装器中是否存在任何节点。或者，如果传入选择器，则该选择器在包装器中是否有任何匹配项。

import { shallow } from 'enzyme';
import React from 'react';
import { TestComponent } from './';

describe('68334346',() => {
  it('should pass',() => {
    const randomComponent = shallow(<TestComponent />);
    expect(randomComponent.find('Container').exists()).toBeTruthy();
    randomComponent.find('button').simulate('click');
    expect(randomComponent.find('Container').exists()).toBeFalsy();
  });
});

2. 使用 .toHaveLength(number) 匹配器

import { shallow } from 'enzyme';
import React from 'react';
import { TestComponent } from './';

describe('68334346',() => {
    const randomComponent = shallow(<TestComponent />);
    expect(randomComponent.find('Container')).toHaveLength(1);
    randomComponent.find('button').simulate('click');
    expect(randomComponent.find('Container')).toHaveLength(0);
  });
});