Test component with mock React Jest - reactjs

Question

This is my component, that contains a Select child component
import { hashHistory } from 'react-router'
import { useEffect } from 'react'
import Select from 'cm/components/common/select'
import { eventTracker, events } from 'cm/common/event-tracker'
import { eventMetricsMap } from './helpers'
import { compose } from 'cm/common/utils'
const SelectLanguage = ({ handlers, languages, selectedLanguage }) => {
useEffect(() => {
hashHistory.listen(({ pathname }) => {
if (pathname.indexOf('/library')) {
handlers.onSelect(null)
}
})
}, [])
const handleSelect = ({ value }) => {
handlers.onSelect(value)
return value.toLowerCase()
}
const trackSelectLanguage = language => {
eventTracker.track(
events.switchBuildingBlickLanguage,
{
from: eventMetricsMap[ 'buildingblocks' ][ 'from' ],
language
}
)
}
return (
<Select
className="search__form--lang dropdown-selection--fixed-width"
handlers={{
onSelect: compose(
trackSelectLanguage,
handleSelect
)
}}
items={languages}
selected={selectedLanguage}
type="medium-input"
/>
)
}
I'd like to make unit test for this component using Jest. My 4 test cases that I want to cover:
renders in the document
renders items
track select open click
handles action
Unfortunately last two cases fails and can't find a reason.
Do you know how to resolve it ?
import expect from 'expect'
import { fireEvent, render } from '#testing-library/react'
import SelectLanguage from './select-language'
const dummyEvents = {
switchBuildingBlockLanguage: 'switch building blocks language'
}
jest.mock(
'cm/common/event-tracker',
() => ({
eventTracker: {
track: () => {}
},
events: {
dummyEvents
}
})
)
const languages = [
{
name: 'English',
value: 'EN',
},
{
name: 'Nederlands',
value: 'NL'
}
]
jest.mock(
'cm/components/common/select',
() => ({ items, handlers }) => {
console.log('items', items)
return (<div className="dropdown">
<div className="dropdown__menu">
{items.map(({ name }) => (
<div className="dropdown__item" onClick={handlers.onSelect}>{name}</div>
))}
</div>
</div>)
}
)
const containerPath = '.dropdown'
const itemPath = '.dropdown__item'
describe('SelectLanguage component', () => {
it('renders in the document', () => {
const { container } = render(
<SelectLanguage languages={languages}/>
)
const $container = container.querySelector(containerPath)
expect($container).toBeTruthy()
})
it('renders items', () => {
const { container } = render(
<SelectLanguage languages={languages}/>
)
const $dropdownItems = container.querySelectorAll(itemPath)
expect([ ...$dropdownItems ].length).toBe(2)
})
it('track select open click', () => {
const spyFn = jest.fn()
const { container } = render(
<SelectLanguage
selectedLanguage={{
value: 'EN'
}}
languages={languages}
handlers={{
onSelect: spyFn
}}
/>
)
const $dropdownItem = container.querySelector(itemPath)
fireEvent.click($dropdownItem)
expect(spyFn).toHaveBeenCalledWith(
dummyEvents.switchBuildingBlockLanguage,
{
from: 'building blocks',
language: 'en'
}
)
})
it('handles action', () => {
const spyFn = jest.fn()
const { container } = render(
<SelectLanguage
selectedLanguage={{
value: 'EN'
}}
languages={languages}
handlers={{
onSelect: spyFn
}}
/>
)
const $dropdownItem = container.querySelector(itemPath)
fireEvent.click($dropdownItem)
expect(spyFn).toHaveBeenCalledWith('EN')
})
})

Answer 1

When using events you need to wait for them to complete before running the assertions.
testing-library/react has the waitFor function:
import { fireEvent, render, waitFor } from '#testing-library/react'
// ...
it('handles action', async () => {
// ...
fireEvent.click($dropdownItem)
await waitFor(() => {
expect(spyFn).toHaveBeenCalledWith(
dummyEvents.switchBuildingBlockLanguage,
{
from: 'building blocks',
language: 'en'
}
)
});
// ...