【发布时间】：2021-11-19 15:40:49
【问题描述】：
如果我将 goober 样式的 h1 组件传递给 jest 提供的渲染方法，我会得到这个可怕的错误转储（如下）。如果我传入相同的渲染方法，但将 goober 样式的组件替换为原生 HTML 标记 h1，那么它可以工作。
Title 是一个函数式组件，它返回一个 goober 样式的 h1 组件。 memo 不影响结果，它纯粹是 goober 样式的 <H1 /> 组件。这让我相信这可能是我的 Webpack 或 Babel 配置的问题？
请注意，应用程序渲染得非常好，我可以与之交互并看到 goober 样式的 <H1 /> 组件渲染到屏幕上，这只是玩笑和 react-cosmos 之类的工具似乎无法制作咕嘟咕嘟的感觉。
代码sn-p
import { memo, ReactElement } from 'react';
import { H1 } from './Typography.style';
interface ITitle {
title: string;
}
export const Title = memo(({ title }: ITitle): ReactElement => {
return <H1>{title}</H1>;
});
export default Title;
笑话代码sn-p
describe('Title', () => {
it('renders title', async () => {
render(<Title title="Title to test" />);
Object.defineProperty(window, 'innerWidth', {
writable: true,
configurable: true,
value: style.bp.sm,
});
await waitFor(
() => {
expect(screen.getByText('Title to test')).toBeInTheDocument();
},
{ timeout: 1000 },
);
});
});
开玩笑的错误转储
TypeError: i is not a function
10 | describe('Title', () => {
11 | it('renders title', async () => {
> 12 | render(<Title title="Title to test" />);
| ^
13 |
14 | Object.defineProperty(window, 'innerWidth', {
15 | writable: true,
at l (node_modules/goober/dist/goober.js:1:2239)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at node_modules/@testing-library/react/dist/pure.js:101:25
at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at render (node_modules/@testing-library/react/dist/pure.js:97:26)
at _callee$ (src/test/Typography.test.tsx:12:5)
at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:294:22)
at Generator.next (node_modules/regenerator-runtime/runtime.js:119:21)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12)
console.error
Error: Uncaught [TypeError: i is not a function]
at reportException (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
at invokeEventListeners (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:22779:12) TypeError: i is not a function
at l (/Users/Development/react-base-project/node_modules/goober/dist/goober.js:1:2239)
at renderWithHooks (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
at beginWork (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/Development/react-base-project/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at /Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at /Users/Development/react-base-project/node_modules/@testing-library/react/dist/pure.js:101:25
at batchedUpdates$1 (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (/Users/Development/react-base-project/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at render (/Users/Development/react-base-project/node_modules/@testing-library/react/dist/pure.js:97:26)
at _callee$ (/Users/Development/react-base-project/src/test/Typography.test.tsx:12:5)
at tryCatch (/Users/Development/react-base-project/node_modules/regenerator-runtime/runtime.js:63:40)
at Generator.invoke [as _invoke] (/Users/Development/react-base-project/node_modules/regenerator-runtime/runtime.js:294:22)
at Generator.next (/Users/Development/react-base-project/node_modules/regenerator-runtime/runtime.js:119:21)
at asyncGeneratorStep (/Users/Development/react-base-project/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/Users/Development/react-base-project/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at /Users/Development/react-base-project/node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
at new Promise (<anonymous>)
at Object.<anonymous> (/Users/Development/react-base-project/node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12)
at Promise.then.completed (/Users/Development/react-base-project/node_modules/jest-circus/build/utils.js:390:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/Users/Development/react-base-project/node_modules/jest-circus/build/utils.js:315:10)
at _callCircusTest (/Users/Development/react-base-project/node_modules/jest-circus/build/run.js:218:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at _runTest (/Users/Development/react-base-project/node_modules/jest-circus/build/run.js:155:3)
at _runTestsForDescribeBlock (/Users/Development/react-base-project/node_modules/jest-circus/build/run.js:66:9)
at _runTestsForDescribeBlock (/Users/Development/react-base-project/node_modules/jest-circus/build/run.js:60:9)
at run (/Users/Development/react-base-project/node_modules/jest-circus/build/run.js:25:3)
at runAndTransformResultsToJestFormat (/Users/Development/react-base-project/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:167:21)
at jestAdapter (/Users/Development/react-base-project/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
at runTestInternal (/Users/Development/react-base-project/node_modules/jest-runner/build/runTest.js:389:16)
at runTest (/Users/Development/react-base-project/node_modules/jest-runner/build/runTest.js:475:34)
at Object.worker (/Users/Development/react-base-project/node_modules/jest-runner/build/testWorker.js:133:12)
at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
console.error
The above error occurred in the <l> component:
at l (/Users/Development/react-base-project/node_modules/goober/dist/goober.js:1:2239)
at /Users/Development/react-base-project/src/components/Typography/Typography.tsx:8:30
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
【问题讨论】：
标签： reactjs typescript jestjs styled-components