2

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

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

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

编辑：现在如果我在 ComboBox 道具中将 autoComplete 设置为“关闭”，我将无法进行单元测试。我在“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");
        })
4

1 回答 1

2

我相信您的代码几乎可以按原样工作。使用以下源文件，此测试顺利通过。

// 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");
});
于 2020-06-12T00:21:08.130 回答