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.

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.