Next.js and Jest: TypeError `the "original" argument must be of type function`

Question

I am new to Next.js but not to React and Jest; this is the first test suite I'm setting up in Next.js.

I have the following (extremely minimal, but this example does cause the error) component I am trying to test:

export default function Thumbnail(src){
  return(
    <img src={src}/>
  );
};

And the following test that is causing an error:

import { render } from '@testing-library/react';

import Thumbnail from './Thumbnail';


describe('Thumbnail', () => {

  test('renders ImageThumbnail for images', () => {
    render(
      <Thumbnail src='test.jpg' />
    );
  });
});

The error in question is this:

  ● Test suite failed to run

    TypeError: The "original" argument must be of type function. Received an instance of Object

       5 |
       6 | describe('Thumbnail', () => {
    >  7 |
         | ^
       8 |   test('renders ImageThumbnail for images', () => {
       9 |     render(
      10 |       <Thumbnail src='test' />

      at Object.<anonymous> (node_modules/test-exclude/index.js:5:14)
      at Module.call [as require] (node_modules/next/src/server/require-hook.ts:70:26)
      at Object.<anonymous> (node_modules/babel-plugin-istanbul/lib/index.js:12:43)
      at Module.call [as require] (node_modules/next/src/server/require-hook.ts:70:26)
      at _babelPluginIstanbul (node_modules/@jest/transform/build/index.js:52:39)
      at ScriptTransformer._instrumentFile (node_modules/@jest/transform/build/index.js:313:18)
      at ScriptTransformer._buildTransformResult (node_modules/@jest/transform/build/index.js:376:33)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/index.js:431:17)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/index.js:519:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/index.js:558:19)
      at Object.<anonymous> (src/app/Thumbnail.test.js:7:59)

I started with, as you might imagine, a somewhat more interesting and complex component and ambitions for a test suite, but simplified down to this point in an attempt to track down the error. Evidently, the issue is not with my particular component. I have also tried rendering a normal HTML img tag in the test, that works just fine, so Jest and React Testing Library are doing their jobs just fine. The error message is infuriatingly vague and gets shadowed over in google results by errors with unrelated packages.

Suggestions on what else to try to resolve this error (given that I'm out of component and test code to simplify) or where to find documentation on this would be extremely appreciated.

Update: after a little more tinkering I have a clarification. I did try removing my component and testing with normal HTML elements like img and div, and this worked; after which I put my component back in and found the error again. I did not try (until just now) using just div and img while my Thumbnail module is imported, and that does also fail, even if I never call Thumbnail in my test. Something about the import itself is causing this problem, I believe. I will continue to tinker and provide any updates, but questions/guidance/illumination would be helpful.

I did also connect that "Promisify" which came up in the google results of this error is present in files mentioned in that stack trace; I trust that it's more likely that something is wrong with my setup than with the tools that Next.js and Jest are built on.

asdofindia · Accepted Answer · 2025-06-21 07:16:13Z

1

This function doesn't look like usual React. It is taking a parameter (src), not an object ({src})

export default function Thumbnail(src){

Try changing it to

export default function Thumbnail({src}){

answered Jun 21 at 7:16

asdofindia

1925 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cdyswnnr Jun 21 at 20:22

Thank you for the suggestion; same error unfortunately. I've also tried writing and calling it as props and props.src. The component renders in the browser, it's only the test that having an issue.

cdyswnnr · Accepted Answer · 2025-06-21 23:35:17Z

I haven't found a root cause for this issue, but I have found a method that solved my issue. If I find out what the root cause of this was, I will update this answer.

Step 1:

Follow the instructions at the Next.js documentation for Testing: Jest to create the with-jest-setup example project. (You can test that this configuration works by running npm test from the directory where package.json is located in this project.)

Step 2:

Recreate a minimal version of the component and test inside this project, and attempt to run the test. If the test now fails, it's likely the issue is with your component or your test; in my case, the test passed in this environment. If the tests pass, feel free to continue to edit the component and test to make them more closely match your desired results. I eventually ended up putting my entire original component into this environment and running a very basic test to ensure the component was rendering in the test environment without errors.

Step 3:

Copy the working test and component into your project, and make edits to jest.config.js (or jest.config.ts for TypeScript) to match the same file found in the with-jest-setup example project (or just copy jest.config.js from the example project into your project). I did end up making some minor changes to my jest.config.ts but then was able to undo all those changes without errors later, so I'm still at a loss as to what the root issue was.

In any case, Jest is now working and I am off to the races with testing. If you are a future reader running into this issue, feel free to leave a comment and I'll be happy to clarify these instructions if needed, or take another shot at finding what the root cause of this is.

Collectives™ on Stack Overflow

Next.js and Jest: TypeError `the "original" argument must be of type function`

2 Answers 2

1 Comment

Step 1:

Step 2:

Step 3:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Step 1:

Step 2:

Step 3:

Comments

Your Answer

Sign up or log in

Post as a guest

Related