如何使用react-testing-library来测试组合框组件？

Question

我正在尝试为我的组合框组件编写更多单元测试，但更具体地说，我想模拟组合框的键盘输入。我尝试过使用 React 的测试库的键盘事件（例如：fireEvent.keyDown），但是当我在触发事件后进行调试时，输入值永远不会改变。

理想情况下，我想在单元测试中使用 React 的测试库，但如果有其他更简单的东西，我会愿意接受。

基本上，我想知道的是：如何为组合框组件的基本功能编写单元测试？

编辑：现在，如果我在 ComboBox 道具中将 autoComplete 设置为“off”，我将无法使单元测试正常工作。我尝试过在“A”上按 keyDown，然后在“Enter”和“Tab”上按 keyDown，但没有成功。更新了下面的代码片段。

    const dropdownOptions: IComboBoxOption[] = [{ key: "A", text: "A" }, { key: "B", text: "B" }];

    const dropdown = <ComboBox options = { dropdownOptions } autoComplete = { "off" }></ComboBox>

    //in the unit test
    it("Should change input using keyboard events", () => {
            const { getByRole } = render(dropdown);

            const inputNode = getByRole("combobox");
            fireEvent.keyDown(inputNode, { key: "A", code: "KeyA" });
            expect(inputNode.getAttribute("value")).toBe("A");
        })

Answer 1

我相信你的代码几乎可以按原样运行。使用以下源文件，该测试顺利通过。

// App.tsx
import React from 'react';
import { Fabric, ComboBox, IComboBoxOption } from 'office-ui-fabric-react';

const dropdownOptions: IComboBoxOption[] = [{ key: "A", text: "A" }, { key: "B", text: "B" }];

function App() {
  return (
    <Fabric><div className="App"><ComboBox options = { dropdownOptions }></ComboBox></div></Fabric>
  );
}

export default App;

// App.test.tsx

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const rendered = render(<App />);
  const combobox = rendered.getByRole("combobox");
  fireEvent.keyDown(combobox, 
    { key: "A", code: "KeyA" }
  );
  expect(combobox.getAttribute("value")).toBe("A");
});