I want to test the function inside React Functional Component (not Class Component)
Here is my component:
const Component: React.FC = () => {
const [openMenu, setOpenMenu] = useState<boolean>(false);
const toggleMenu = () => setOpenMenu((prev) => !prev);
return (
<div>
<ChildComponent openMenu={openMenu} toggleMenu={toggleMenu} />
</div>
);
};
export default Component;
I tried to run simple test and it's failed
test('should be able to toggle open menu state', async () => {
const wrapper = shallow(
<Provider store={store}>
<MemoryRouter initialEntries={['/']}>
<DefaultLayout />
</MemoryRouter>
</Provider>
);
// wrapper.invoke('toggleMenu')();
expect(wrapper.state('openMenu')).toBe(false);
});
What I want to test is toggleMenu function update the openMenu correctly. I saw some answer from stackoverflow able to test with instance() or invoke() but that only apply for class component. Is that anyway to test function and state inside component without fire any event?