javascript - FireEvent.click 不触发反应测试库 - 测试设置

Question

我正在尝试为我构建的下拉组件编写一些测试 - 当我模拟点击 react-testing 库时，我似乎遇到了问题，它不会更新我在测试中的值。当应该作为用户单击的最新值返回时，更新的值返回为空。

仅供参考，这仅适用于浏览器，不适用于测试

 test('Expect updated value to be the value of the dropdown', async () => {
const onChange = jest.fn()

const { getByText, getByTestId, getByRole } = render(
  <DropDown onChange={onChange} options={['test', 'another']} />
)
const result = getByTestId('dropdown-value')
userEvent.click(getByText(/Select/))
userEvent.click(getByText(/test/))
    expect(result.textContent).toBe(/test/)
  })


interface DropDownProps {
  onChange: React.ChangeEventHandler<HTMLSelectElement>
  options: string[]
}

export const DropDown: React.FC<DropDownProps> = ({
  options,
  onChange,
  ...props
}: DropDownProps) => {
  const dropdownRef = useRef<HTMLDivElement>(null)
  const [isActive, setIsActive] = useState<boolean>(false)
  const [dropdownValue, setDropdownValue] = useState<string>('Select')

  const onClick = () => setIsActive(!isActive)
  const classes = useDropdownStyles()

  useEffect(() => {
    const pageClickEvent = e => {
      const $dropdown = dropdownRef?.current as HTMLDivElement
      if (!$dropdown || $dropdown.contains(e.target)) return
      setIsActive(!isActive)
    }

    if (isActive) {
      window.addEventListener('click', pageClickEvent)
    }

    return () => {
      window.removeEventListener('click', pageClickEvent)
    }
  }, [isActive])

  const handleDropDownClick = e => {
    const value = e.target.innerText
    setDropdownValue(value)
    setIsActive(false)
  }

  return (
    <div className={classes.menuContainer}>
      <button
        data-testid="trigger"
        onClick={onClick}
        className={classes.menuTrigger}>
        <span data-testid="dropdown-value">{dropdownValue}</span>
      </button>
      <div
        ref={dropdownRef}
        className={`${classes.menu} ${isActive ? classes.active : ''}`}>
        <ul onClick={handleDropDownClick} className={classes.list}>
          {options &&
            options.map((item, idx) => (
              <li key={idx} className={classes.listItem}>
                {item}
              </li>
            ))}
            
        </ul>
      </div>
    </div>
  )
}

我怎样才能让这个测试通过？我在这里做错了什么？

标签： javascriptunit-testingreact-testing-library