Jest.js React Testing Library选择下拉选项未选择任何内容

我有以下失败的测试：

import React from "react";
import { fireEvent, render } from "@testing-library/react";
import selectEvent from "react-select-event";
import userEvent from "@testing-library/user-event";

// test i'm trying to run
test("Can Select Item", async () => {
  const user = userEvent.setup();
  
  const screen = render(
    <select data-testid={"test"}>
      <option value="1" data-testid={"Hey"}>
        Hey
      </option>
      <option value="2">There</option>
    </select>
  );
  
  await user.selectOptions(screen.getByTestId("test"), "Hey");
  expect(screen.getByTestId("Hey").hasAttribute("selected")).toBeTruthy();
});

我可以用这个替换触发器，它也失败了：

fireEvent.select(screen.getByTestId("test"), { target: { value: "1" } });
expect(screen.getByTestId("Hey").hasAttribute("selected")).toBeTruthy();

我的package.json看起来像这样：

{
  "name": "test-jest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我收到的错误消息是：

SelectField Test > Can Select Item
-----
Error: expect(received).toBeTruthy()

Received: false Jest

......这可没什么用
如果我运行以下命令：

const result = fireEvent.select(screen.getByTestId("test"), {
  target: { value: "1" },
});
expect(result).toBeUndefined();

此测试通过。结果 * 应该 * 是true，而不是undefined。
我使用以下npx和npm和node：

❯ nvm -v
1.1.11

❯ npx -v
6.14.15

❯ npm -v
6.14.15

❯ node
Welcome to Node.js v14.18.3.

我最初试图让这个与一些脉轮代码一起工作，并认为这是脉轮库的问题。但是当我试着写这个示例代码时，我遇到了和以前一样的问题。如果我比较screen.getByTestId("test").innerHTML之前和之后的一切都是完全一样的。我也尝试过使用react-select-event库来实现这个测试，但没有成功。我做错了什么？是否存在版本问题？会不会是别的原因？

我找到了一个对我有用的答案。这是它看起来的样子：

import React from "react";
import { fireEvent, render } from "@testing-library/react";

export interface KeyValuePair {
  value: string;
  selected: boolean;
}

it("should correctly set default option", () => {
  const { getByTestId, getAllByTestId } = render(
    <select data-testid={"select"}>
      <option>Test option selects</option>
      <option key={"1"} value="1" data-testid={"select-option"}>
        Hey
      </option>
      <option key={"2"} value="2" data-testid={"select-option"}>
        There
      </option>
    </select>
  );
  fireEvent.select(getByTestId("select"), { target: { value: "1" } });
  let options = getAllByTestId("select-option") as HTMLOptionElement[];
  const values = options
    .map(
      (e) =>
        ({
          value: e.value as string,
          selected: e.selected as boolean,
        } as KeyValuePair)
    )
    .filter((x) => x.selected);
  expect(values).toHaveLength(1);
  expect(values[0].value).toBe("1");
});

Jest.js React Testing Library选择下拉选项未选择任何内容

1条答案

相关问题

热门标签

最新问答