Javascript 如何使用Jest和ReactJs测试onClose道具

我有一个类似这样的组件，当点击按钮时模式打开，当点击X按钮时，按下鼠标或按esc键时模式关闭并调用

onClose

函数，然而，Jest报告说

setIsOpen（false）不包括在内

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div className="container">
          <button
            onClick={() => {
              setIsOpen(true);
            }}
          />
      <Flow
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
      />
    </div>
  );
}; 

constmycomponent=（）=>{
常量[isOpen，setIsOpen]=useState（false）；
返回(
{
setIsOpen（真）；
}}
/>
{
setIsOpen（假）；
}}
/>
);
}; 

如何测试
setIsOpen（false）吗？我试图模拟
useState
并检查它是否被调用，但是，这弄乱了
setIsOpen（true）在按钮中，作为模拟，模态将不会打开

有什么想法吗？
我将用它来测试react组件的行为

Ezyme是React的JavaScript测试实用程序，可以更轻松地测试React组件的输出

您可以使用浅包装器来调用
Flow
组件的
onClose（）
方法

例如

MyComponent.tsx
：

import React, { useState } from 'react';
import { Flow } from './Flow';

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="container">
      <button
        onClick={() => {
          setIsOpen(true);
        }}
      />
      <Flow
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
      />
    </div>
  );
};

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

describe('67027129', () => {
  it('should set open to true', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Flow).prop('isOpen')).toBeFalsy();
    wrapper.find('button').simulate('click');
    expect(wrapper.find(Flow).prop('isOpen')).toBeTruthy();
  });

  it('should set open to false', () => {
    const wrapper = shallow(<MyComponent />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find(Flow).prop('isOpen')).toBeTruthy();
    wrapper.find(Flow).invoke('onClose')();
    expect(wrapper.find(Flow).prop('isOpen')).toBeFalsy();
  });
});

MyComponent.test.tsx
：

import React, { useState } from 'react';
import { Flow } from './Flow';

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="container">
      <button
        onClick={() => {
          setIsOpen(true);
        }}
      />
      <Flow
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
      />
    </div>
  );
};

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

describe('67027129', () => {
  it('should set open to true', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Flow).prop('isOpen')).toBeFalsy();
    wrapper.find('button').simulate('click');
    expect(wrapper.find(Flow).prop('isOpen')).toBeTruthy();
  });

  it('should set open to false', () => {
    const wrapper = shallow(<MyComponent />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find(Flow).prop('isOpen')).toBeTruthy();
    wrapper.find(Flow).invoke('onClose')();
    expect(wrapper.find(Flow).prop('isOpen')).toBeFalsy();
  });
});

>如何测试setIsOpen（false）；？你不应该。看到这个答案：Thank you@Suver1我正在尝试验证是否调用了它，而不是检查状态的值