react-testing-library中未实现窗口错误

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)
    ...

我可以从this answer中看到，提供一些假的实现可以帮助抑制这些错误。但这感觉就像是一种变通方法，因为我不想在测试中包含与我的测试逻辑无关的代码。

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

包：

    "@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",

下面是我从source code测试的组件

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

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

关键是他们说升级到7.22.1版本会停止显示这些消息，但是你的testing-library/dom是^7.28.1。

我的升级是从7.21.4升级到7.29.1。