Can't I use selectOptions several times?

[cksal0805]

👉🏻 I use formik and userEvent library.

• "@testing-library/jest-dom": "^5.16.4",
• "@testing-library/react": "^12.1.4",
• "@testing-library/user-event": "^13.5.0"

🤔 Can't I use selectOptions several times?

This ensures that only 1 is assigned to select options.

await userEvent.selectOptions(countries, '1');
await waitFor(() => {
  expect(screen.getByText('1')).toBeInTheDocument();
});
await userEvent.selectOptions(countries, '2');

-> countries: ['1']

The code is the same value and the onChange occurs twice.
🥲 stack log

 console.log
    1 at handleChange (setupTests.js:91:19)

  console.log
    test [ '1' ] at onChange (Select.js:160:17)

  console.log
     1 at handleChange (setupTests.js:91:19)

  console.log
    test [ '1' ]

However, when i use fireEvent, it works as �i want.

await userEvent.selectOptions(countries, '1');

await waitFor(() => {
  expect(screen.getByText('1')).toBeInTheDocument();
});
fireEvent.change(countries, {
  target: {
    value: '2',
  },
}); 

-> countries: ['1', '2']

🙂 stack log

 console.log
    1 at handleChange (setupTests.js:91:19)

  console.log
    test [ '1' ] at onChange (Select.js:160:17)

  console.log
     2 at handleChange (setupTests.js:91:19)

  console.log
    test [ '1', '2' ]

Select is currently using antd, and the component is being mocking.

Is it a related issue?

jest.mock('antd', () => {
  const React = jest.requireActual('react');
  const antd = jest.requireActual('antd');

  const Select = React.forwardRef(
    (
      { children, value, onChange, onSearch, onBlur, name, mode, showSearch },
      ref
    ) => {

      const [keyword, setKeyword] = React.useState('');

      function handleChange(e) {
        const { value: targetValue } = e.target;

        const options = children.reduce((acc, child) => acc.concat(child), []);
        let selectValue, selectOptions;
        if (mode === 'multiple') {
          selectValue = [...new Set(value.concat(targetValue))];
          selectOptions = options.filter((o) =>
            selectValue.includes(o?.props?.value)
          );
          console.log(targetValue)
        } else {
          selectOptions = options.find((o) => o?.props?.value === targetValue);
          selectValue = targetValue;
        }

        onChange(selectValue, selectOptions);
      }

      function handleSearch(e) {
        setKeyword(e.target.value);
        onSearch && onSearch(e.target.value);
      }

      return (
        <>
          {showSearch && (
            <input
              name={`${name}-search`}
              value={keyword}
              onChange={handleSearch}
            />
          )}
          <select
            onChange={handleChange}
            onBlur={onBlur}
            name={name}
            value={value || ''}
            multiple={mode === 'multiple'}
            ref={ref}
          >
            {children}
          </select>
        </>
      );
    }
  );

Select.Option = ({ children, ...otherProps }) => {
  return <option {...otherProps}>{children}</option>;
};