describe('<CustomTooltip />', () => {
it('should show tooltip text', async () => {
const { container, unmount } = render(<CustomTooltip text='Tooltip Text' />)
userEvent.hover(container.querySelector('svg'))
await screen.findByText('Tooltip Text')
screen.debug()
unmount() // ?? is it necessary to call unmount after each test cases?
})
it('check if there is an mounted component', () => {
screen.debug()
})
})
Is it necessary to call unmount after each test cases? Because I've added useEffect in the CustomTooltip component, and Unmounted is logged before the second test case. And even the second test case screen.debug output is <body />.
useEffect(() => {
console.log('Mounted')
return () => console.log('Unmounted')
}, [])
I asked this because i saw a custom implementation for render in test utils to unmount component after each test cases, and I'm curious to know if this is really important.
let lastMount = null;
const _render = (...args) => {
lastMount = render(...args);
return lastMount;
};
afterEach(() => {
if (lastMount)
lastMount.unmount();
lastMount = null;
});