Jest 无法渲染和测试 goober 样式的组件

Posted 2023-03-15

技术标签:

【中文标题】Jest 无法渲染和测试 goober 样式的组件【英文标题】：Jest not able to render and test goober styled components 【发布时间】：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)

【问题讨论】：

【参考方案1】：

goober 的创建者在 github 问题中回复了 - 链接：https://github.com/cristianbote/goober/issues/374

您需要在测试开始时致电setup()。此外，如果您使用的是 storybook 或 react-cosmos 等，您也必须在开始时致电 setup()。

【讨论】：

以上是关于Jest 无法渲染和测试 goober 样式的组件的主要内容，如果未能解决你的问题，请参考以下文章

无法让 Jest 使用包含主题的样式化组件

如何在使用 jest 运行测试时修复警告：无法安装组件：未定义模板或渲染函数

TypeError：无法在使用 ReactDOM 的 Jest 测试中读取未定义的属性“渲染”

渲染中的错误：“TypeError：无法读取未定义的属性'_t'”在使用 Jest 的单元测试中

如何使用 Jest 和 Enzyme 测试样式组件以具有属性

如何测试嵌套组件的样式 jest-styled-components