Menu
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>
</>
);
}
222
With the new feature in React, developers can test the Error Boundaries by a toggle error button, added to the DevTools. When we click on the toggle error button on the component labeled 'Inner Component', Error boundary is triggered. We see the An error was thrown text.
The screen object from the React Testing Library (RTL) provides methods for querying the rendered elements of the DOM in order to make assertions about their text content, attributes, and more. The screen.
In order to use this function, we need to import it from @testing-library/react . import { waitFor } from '@testing-library/react'; As with the other async functions, the waitFor() function returns a Promise, so we have to preface its call with the await keyword.
Snapshot testing It works well with React components because when you render a component you can view the DOM output and create a “snapshot” at the time of run.
Note: If you are using create-react-app, eslint-plugin-testing-library is already included as a dependency. Advice: Install and use the ESLint plugin for Testing Library. The name wrapper is old cruft from enzyme and we don't need that here. The return value from render is not "wrapping" anything.
When testing, code that causes React state updates should be wrapped into act (...): act ( () => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser.
It expanded to DOM Testing Library and now we have Testing Library implementations (wrappers) for every popular JavaScript framework and testing tool that targets the DOM (and even some that don't). As time has gone on, we've made some small changes to the API and we've discovered suboptimal patterns.
We're still working on @testing-library/user-event to ensure that it delivers what it promises: firing all the same events the user would fire when performing a specific action. I don't think we're quite there yet and this is why it's not baked-into @testing-library/dom (though it may be at some point in the future).
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
103
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
