Jest encountered an unexpected token, Error Details: import issue with SyntaxError, Next.js, Typescript

Question

I have a Next.js Project and have Jest testing working effectively. However I run into an import issue when trying to test specific files related to pnp.js.

I have been through numerous similar posts as well as following multiple online tutorials and re-iterating over both the Next documentation as well as the Jest documentation. I've tried babel.config and babelrc files

The error is specific currently to PnP.js specific imports, they do recommend another test library but that shouldn't be relevant to the issue.

I understand the issue is probably how it's being compiled but I can't get to the bottom of it.

I've also tried changing a couple of versions of both Next and ts-jest as this worked for some others in similar situations to no avail.

Error:

 FAIL  src/model/pnp/application/__tests__/lists.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

Details:

    C:\Users\{name}\Desktop\{app}\node_modules\@pnp\sp\webs\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { Web } from "./types.js";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      20 | };
      21 |
    > 22 | export const sp = (site: string) => {
         | ^
      23 |   return spfi().using(
      24 |     SPDefault({
      25 |       baseUrl: `https://${process.env.TENANT_NAME}.sharepoint.com/sites/${site}/`,

// jest.config.ts

import type { Config } from "jest";
import nextJest from "next/jest.js";
/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

const config: Config = {

  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,

  // Indicates whether the coverage information should be collected while executing the test
  collectCoverage: true,
  
  coverageDirectory: "coverage",
  
  coverageProvider: "v8",

  //An array of file extensions your modules use
  moduleFileExtensions: [
    "js",
    "mjs",
    "cjs",
    "jsx",
    "ts",
    "tsx",
    "json",
    "node",
  ],

  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
  moduleNameMapper: {
    "parse5/lib/parser/index.js":
      "<rootDir>/node_modules/hast-util-raw/node_modules/parse5/lib/parser/index.js",
    "^@/components/(.*)$": "<rootDir>/components/$1",
    "^@/lib/(.*)$": "<rootDir>/lib/$1",
  },
  
  preset: "ts-jest",

  resolver: "ts-jest-resolver",
  
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  
  testEnvironment: "jest-environment-jsdom",
  
  transform: {
    "^.+\\.(ts|tsx)?$": "ts-jest",
    "^.+\\.(js|jsx)$": "ts-jest",
  },

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  transformIgnorePatterns: [
    "node_modules/(?!(rehype-raw|hast-util-raw|unist-util-position|unist-util-visit|unist-util-visit-parents|unist-util-is|hast-util-from-parse5|hastscript|property-information|hast-util-parse-selector|space-separated-tokens|comma-separated-tokens|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements|@pnp/sp)/)",
    "\\\\node_modules\\\\",
    "\\.pnp\\.[^\\\\]+$",
    "/node_modules/(?!(@pnp)/)",
  ],

  verbose: true,
};

export default createJestConfig(config);

// jest.setup.ts

import "@testing-library/jest-dom/extend-expect";

// next.config.js

/** @type {import('next').NextConfig} */


const withPWA = require('next-pwa')({
    dest: 'public'
})

module.exports = withPWA({
    // next.js config
})