反应测试库中未实现窗口错误

Question

我正在测试一个使用 Redux 构建的非常基本的反例元素。这是我的测试：

import userEvent from "@testing-library/user-event";
import { render, screen } from "src/testUtils";
import { Counter } from "../Counter";

describe("Counter screen", () => {
  it("buttons should change displayed value", () => {
    render(<Counter />);
    const counter = screen.getByText(/counter*/i);
    const plus = screen.getByRole("button", { name: /\+/i });
    const minus = screen.getByText(/\-/i);

    expect(counter).toHaveTextContent("0");
    userEvent.click(plus);
    userEvent.click(plus);
    expect(counter).toHaveTextContent("10");
    userEvent.click(minus);
    expect(counter).toHaveTextContent("9");
  });
});

测试全部通过，但我收到了大量错误jsdom测试全部通过，但我在记录到控制台

Error: Not implemented: window.computedStyle(elt, pseudoElt)
          at module.exports (/home/abhijeet/Documents/github/react-template/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
          at Window.getComputedStyle (/home/abhijeet/Documents/github/react-template/node_modules/jsdom/lib/jsdom/browser/Window.js:657:7)
          at computeMiscTextAlternative (/home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:306:62)
          at computeTextAlternative (/home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:521:11)
          at computeAccessibleName (/home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:552:3)
          at /home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/queries/role.js:72:82
          at Array.filter (<anonymous>)
          at queryAllByRole (/home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/queries/role.js:66:6)
          at /home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:68:17
          at /home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:54:17 undefined

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:657:7)
      at computeMiscTextAlternative (node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:306:62)
      at computeTextAlternative (node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:521:11)
      at computeAccessibleName (node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:552:3)
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/queries/role.js:72:82

    console.error
      Error: Not implemented: window.computedStyle(elt, pseudoElt)
    ...

      Error: Not implemented: window.computedStyle(elt, pseudoElt)
    ...

      Error: Not implemented: window.computedStyle(elt, pseudoElt)
    ...

我可以看到从这个答案中看到，提供一些虚假的实现可以帮助抑制这些错误。但这感觉像是一种解决方法/黑客，因为我不想在与我的测试逻辑无关的测试中包含代码。

我是否做错了什么来触发这些警告？

套餐：

    "@reduxjs/toolkit": "^1.5.0",
    "@testing-library/dom": "^7.28.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^12.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "typescript": "^4.1.2",

这是我正在从源代码测试的组件：

import { useDispatch, useSelector } from "react-redux";
import { counterSlice } from "../reducers";
type CounterState = {
  counter: number;
};
export function Counter() {
  const counter = useSelector((state: CounterState) => state.counter);
  const dispatch = useDispatch();
  return (
    <>
       <p>Counter: {counter}</p>
      <button onClick={() => dispatch(counterSlice.actions.decrement())}>
        -
      </button>
      <button onClick={() => dispatch(counterSlice.actions.increment(5))}>
        +
      </button>
    </>
  );
}

Answer 1

如果其他人已经拥有最新版本，我通过升级我的@testing-library/react. 不确定哪个版本修复了它，但我10.0.2从10.4.9

Answer 2

我可以通过升级testing-library/dom版本来解决这个问题，如此处所述。

重点是他们说升级到版本7.22.1将停止显示这些消息，但你的testing-library/dom是^7.28.1.

我的升级从7.21.4到7.29.1。