I'm working on a test that tests that the a change event on a select input triggers the right function for the right language chosen (it's a select input where the options of different languages that the user can choose).
Here is my test: for some reason, the functions are not called and I can't figure it out!!
it('sets the locale cookie and makes a post request if the selected locale is different from the previous', () => {
jest.spyOn(Cookies, 'get').mockImplementation(() => 'en');
jest.spyOn(Cookies, 'set');
jest.spyOn(axios, 'post').mockImplementation(() => Promise.resolve());
const { wrapper, getByTestId } = render(component);
const selectInput = getByTestId('inputSelect');
fireEvent.change(selectInput, { target: { currentTarget: 'es' } });
expect(Cookies.set).toHaveBeenCalledWith('locale', 'es');
expect(axios.post).toHaveBeenCalledWith('/toggle_locale', { locale: 'es' });
});
here is the element of the component that i am testing:
const toggleValue = (e: SyntheticEvent<HTMLInputElement>) => {
setValue(e.currentTarget.value);
if (onChange) {
onChange(e);
}
};
<select
id={id}
name={name}
aria-label={label || ariaLabel}
value={value}
onChange={toggleValue}
data-testid="inputSelect"
>
{options.map((option: Option) => (
<option id={option.id} value={option.value} key={option.value}>
{renderHTML(option.label)}
</option>
))}
</select>
Aucun commentaire:
Enregistrer un commentaire