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