Как правильно протестировать дизайн муравья Select и Option с помощью jest?

Question

Я использую Ant Design для своего компонента формы выбора, и я хотел бы проверить значение параметров, потому что значения будут динамически изменяться в зависимости от различных вариантов выбора, сделанных пользователем при заполнении.

my-test.spec.js

      let questionDropdown
      await waitFor(() => {
        questionDropdown = screen.getByRole('combobox', { name: 'Question'})
        expect(questionDropdown).toBeDefined()
      })
      fireEvent.click(questionDropdown)

      // Hoping to test the options after clicking on the select, but I can't find the options element on screen
      // expect(screen.getByText('question 1')).toBeDefined()
      // expect(screen.queryAllByRole('option').length).toEqual(2)

Я обнаружил эти проблемы в antd о том, как имитировать компоненты Select и Options.

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

  const Select = ({ children, onChange }) => {
    return <select onChange={e => onChange(e.target.value)}>{children}</select>;
  };

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

, но мне все равно не удалось протестировать мои варианты.

Answer 1

Поскольку вы высмеивали его как таковое, ваше взаимодействие с компонентом Select должно быть

const questionDropdown = await screen.getByRole('combobox', { name: 'Question'});

act(() => {
    fireEvent.change(questionDropdown, { target: value: { CHANGE_VALUE } });
});

Для тестирования компонента Select без имитации это должно быть примерно так

const questionDropdown = await screen.getByRole('combobox', { name: 'Question' });

act(() => {
    fireEvent.click(questionDropdown);
});

// basically, you should be able to find the elements of the 
// dropdown after you fire the click even on the select
const questionOneEle = await screen.getByText('question 1');

act(() => {
    fireEvent.click(questionOneEle);
});

// you can consider using jest-dom to run an assertion here
// at the top of your test file -> import '@testing-library/jest-dom'

expect(questionDropdown).toHaveValue(YOUR_EXPECTED_VALUE);

Однако при таком тестировании раздражает то, что из-за того, как antd обрабатывает свой select компонент, визуализируемые элементы раскрывающегося меню имеют небольшую непрозрачность, что может привести к сбою отладки. тесты немного сложноваты.