How to call test this callback that sets state in React Enzyme Jest

Viewed 37

Let's say I need to test this Component. It gets state and setter for it trough props. How should test look like, I wasted 4 hours trying to figure it out but nothing really works.

Component.jsx

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

This is something I was thinking about but it doesn't pass.

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();
  });
});
0 Answers
Related