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