NextJS applications can encounter issues with Jest's inability to parse SVG images

Question

NextJS applications can encounter issues with Jest's inability to parse SVG images

Upon running yarn test, an unexpected token error is encountered:

 Jest encountered an unexpected token

This typically indicates that Jest is unable to parse the file being imported, suggesting it's not standard JavaScript.

By default, Jest will use a Babel config to transform files and ignore "node_modules".

Here are some possible fixes:
 • If using ECMAScript Modules, refer to https://jestjs.io/docs/en/ecmascript-modules for enabling.
 • To transform specific "node_modules" files, specify a custom "transformIgnorePatterns" in your config.
 • For custom transformations, define a "transform" option in your config.
 • To mock non-JS modules (e.g. binary assets), utilize the "moduleNameMapper" config option.

For more detailed instructions and examples regarding config options, visit:
https://jestjs.io/docs/en/configuration.html

Details:

/home/marouane/projects/manage-landing-page/jest.setup.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "@testing-library/jest-dom/extend-expect";
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

After research, it was found that installing jest-svg-transformer is required.

The necessary lines were added to the jest.config.js file:

module.exports = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.svg$': 'jest-svg-transformer',
  },

};

Despite these efforts, the issue persisted even after trying other solutions available online.

Assistance would be greatly appreciated! Thank you!

edit:

It appears that replacing jsx with tsx in the jest.config.js file resolved the problem... A simple oversight indeed! Oh well!!!

typescript jestjs next.js

Answer 1

Answer №1

I encountered the same issue and found a solution that worked for me. I recommend inlining your files to resolve it. In my jest.config, I made use of a check for .svg files and replaced them with an inline string.

// jest.config.js
module.export = {
  transform: {
    '^.+\\.[tj]sx?$': 'babel-jest',
    '^.+\\.svg$': '<rootDir>/svgTransformer.js',
  }
}

// svgTransformer.js
module.exports = {
  process(src, filename) {
    const assetFilename = JSON.stringify(path.basename(filename));

    if (filename.match(/\.svg$/)) {
      // Generating component name based on SVGR logic:
      const pascalCaseFilename = pascalCase(path.parse(filename).name);
      const componentName = `Svg${pascalCaseFilename}`;
      return `const React = require('react');
      module.exports = {
        __esModule: true,
        default: ${assetFilename},
        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
          return {
            $$typeof: Symbol.for('react.element'),
            type: 'svg',
            ref: ref,
            key: null,
            props: Object.assign({}, props, {
              children: ${assetFilename}
            })
          };
        }),
      };`;
    }

    return `module.exports = ${assetFilename};`;
  },
};

// pascal-case.ts
import { camelCase, toUpper } from 'lodash';

export const pascalCase = (str: string) => camelCase(str).replace(/^(.)/, toUpper);

If you need any further clarification, feel free to ask.

Answer 2

I encountered the same issue and found a solution that worked for me. I recommend inlining your files to resolve it. In my jest.config, I made use of a check for .svg files and replaced them with an inline string.

// jest.config.js
module.export = {
  transform: {
    '^.+\\.[tj]sx?$': 'babel-jest',
    '^.+\\.svg$': '<rootDir>/svgTransformer.js',
  }
}

// svgTransformer.js
module.exports = {
  process(src, filename) {
    const assetFilename = JSON.stringify(path.basename(filename));

    if (filename.match(/\.svg$/)) {
      // Generating component name based on SVGR logic:
      const pascalCaseFilename = pascalCase(path.parse(filename).name);
      const componentName = `Svg${pascalCaseFilename}`;
      return `const React = require('react');
      module.exports = {
        __esModule: true,
        default: ${assetFilename},
        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
          return {
            $$typeof: Symbol.for('react.element'),
            type: 'svg',
            ref: ref,
            key: null,
            props: Object.assign({}, props, {
              children: ${assetFilename}
            })
          };
        }),
      };`;
    }

    return `module.exports = ${assetFilename};`;
  },
};

// pascal-case.ts
import { camelCase, toUpper } from 'lodash';

export const pascalCase = (str: string) => camelCase(str).replace(/^(.)/, toUpper);

If you need any further clarification, feel free to ask.

NextJS applications can encounter issues with Jest's inability to parse SVG images

Answer №1

Similar questions

Vercel Build Issue: It appears that the settings you are utilizing are intended for the 'client' module of '@sanity/preview-kit'

Setting up Material-UI for React in conjunction with Typescript: A step-by-step guide

When I delete the initial element from the array, the thumbnail image disappears

Ways to stop dialog from disappearing in Reactjs

What are some alternatives to using fetch for making API calls in Next.js?

Angular2: Once user is authenticated, navigate to specific routes

bundle.js encountered a TypeError when attempting to read a property that was undefined, specifically while trying to access the PriceIndexationDataControlStandard

Maximizing the potential of typescript generics in Reactjs functional components

Unable to modify the theme provider in Styled Components

What is the process for choosing nested colors from a theme in Material UI?

The alias for the computed column is not correctly connected to the TypeORM Entity

Insert analytics code post-button click permission granted in Next.js/React

A step-by-step guide to implementing a sleek black separator line in your Next.js project with Tailwind CSS

Exploring the JSON Array in Angular5 with the power of ngFor

Dynamic Assignment of Object Values Based on Enum Keys in Typescript

Is there a way to keep a button in a "pressed" state after it has been clicked?

Identified the category

Carousel Alert: Ensure that every child within the list is assigned a distinct "key" property

Why is it that the resource fails to load in an Angular localhost environment when making an http request?

Tips for concealing tick labels in d3 using TypeScript