【发布时间】：2021-03-20 03:14:00
【问题描述】：
我正在测试一个使用 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>
</>
);
}
【问题讨论】：
-
请显示组件代码以及您在哪里使用
window.computedStyle(elt, pseudoElt) -
我认为我没有在应用程序的任何地方使用过它，除非它与内部的 redux 工具包实现有关。无论如何，我已经用我正在测试的组件的代码编辑了这个问题，并带有指向完整源代码的链接。
标签： reactjs react-redux jestjs react-testing-library jsdom