如何测试与酶/开玩笑中的反应中设置状态的组件

Question

假设我需要测试此组件。它通过道具获得了状态和设定者。测试应该是什么样的？

component.jsx：

export function Component({ isShowing, setShow }) {
  return (
    <>
      <button
        onClick={() => {
          setShow(!isShowing);
        }}
      >
        Toggle
      </button>
      {isShowing && <h1>Showing</h1>}
    </>
  );
}

这是我正在考虑的事情，但不会通过。

component.test.js：

import Enzyme, { mount } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new EnzymeAdapter() });

const mountSetup = (props = {}) => {
  return mount(<Component {...props} />);
};

const defaultProps = {
  isShowing: false,
  setShow: () => {},
};

describe('Component works as expected', () => {
  test('Component toggles ', () => {
    const wrapper = mountSetup(defaultProps);
    // expect(wrapper.prop('setShow')).toBeTruthy();
    wrapper.find('button').simulate('click');
    expect(wrapper.find('h1').text()).toBe("Showing")
    wrapper.unmount();
  });
});