mardi 18 août 2020

Jest and React Testing Library: spy functions not called

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