Not implemeted window errors in react-testing-library

Viewed 3437

I'm testing a very basic counter example element built with Redux. Here's my test:

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");
  });
});

The tests are all passing but I get a large amount of errors from jsdom logged to the console:

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

I can see from this answer that providing some fake implementation can help suppress these errors. But that just feels like a workaround/hack because I don't want to include code in tests that has nothing to do with my test logic.

Am I doing something wrong to trigger these warnings?

Packages:

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

Here's the component I'm testing from the 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>
    </>
  );
}
2 Answers

In case anyone else already has an up-to-date version, I solved this issue by upgrading my @testing-library/react. Not sure which version fixes it, but I went from 10.0.2 to 10.4.9

I could solve it by upgrading testing-library/dom version, as said here.

The point is they say that upgrading to version 7.22.1 would stop showing these messages, but your testing-library/dom is ^7.28.1.

My upgrade went from 7.21.4 to 7.29.1.

Related