Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jest with goober - Error: Uncaught [TypeError: i is not a function] - The above error occurred in the <l> component: #374

Closed
alan-ws opened this issue Sep 27, 2021 · 2 comments
Closed

Jest with goober - Error: Uncaught [TypeError: i is not a function] - The above error occurred in the <l> component: #374

alan-ws opened this issue Sep 27, 2021 · 2 comments
Labels
discussion

Comments

@alan-ws
Copy link

alan-ws commented Sep 27, 2021 •
edited
Loading

What seems to happen - if I pass a goober styled 'h1' component to the render method, I get this horrible error dump. If I pass in the same method but replace the goober styled component with the native HTML tag 'h1', then it works.

Title is a function that returns a goober styled 'h1' component. memo does not play a role, it is purely the goober styled <H1 /> component.

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

FAIL src/test/Typography.test.tsx
● Console

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)

● Title › renders title

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)
@cristianbote
Copy link
Owner

Heya @alan-ws! This looks like the setup function for setting up the pragma is not getting called at all. 🤔 so I believe that is the issue. You need to call setup() at the beginning of the test.

More info on here https://goober.js.org/api/setup

@alan-ws
Copy link
Author

alan-ws commented Sep 27, 2021

@cristianbote You genius! Thank you. I had no idea I had to use setup in various places. This solved the issue I had with recat-cosmos not rendering the component either!

@alan-ws alan-ws closed this as completed Sep 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discussion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cristianbote @alan-ws