Question

0

736

Views

Why am I unable to import SVG in Jest?

This is the component I want to test

footer/index.jsx

import React from "react";

import logoImg from "@/assets/images/components/header/logo-header.svg";
import HeaderTextImg from "@/assets/images/components/header/header-text.svg";

function Footer() {
  return (
    <div>Footer</div>
  );
}

export default Footer;

When I run the test by npm run test, it shows error

package.json

 "scripts": {
    "test": "jest --watchAll",
    "test-coverage": "jest --coverage", 
  },
  "jest": {
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }

What I tried
I tried to use jest-svg-transformer in package.json like below:

        "transform": {
            "^.+\\.jsx?$": "babel-jest",
            "^.+\\.svg$": "jest-svg-transformer"
        }

it shows error too:

    ● Invalid transformer module:
      "/Users/CCCC/Desktop/SourceTree/my-proj/node_modules/jest-svg-transformer/lib/index.js" specified in the "transform" object of Jest configuration
      must export a `process` or `processAsync` or `createTransformer` function.
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation

Update 1
I also tried

moduleNameMapper: {
    "^.+\\.svg$": "jest-svg-transformer",
}

but not working too

Update 2
Tried svg-jest too but still not working

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T09:34:13.779Z

Install camelcase package (npm install -D camelcase) (yarn add -D camelcase)
Create fileTransform.js file in your jest directory

/jest/transforms/fileTransform.js

const path = require('path');
const camelcase = require('camelcase');

module.exports = {
    process(src, filename) {
        const assetFilename = JSON.stringify(path.basename(filename));
    if (filename.match(/\.svg$/)) {
        // Based on how SVGR generates a component name:
        // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
        const pascalCaseFilename = camelcase(path.parse(filename).name, {
            pascalCase: true,
        });
        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};`;
},
};

Add the following in package.json:

transform: {
       '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': '<rootDir>/jest/transforms/fileTransform.js',
},

0

736

Why am I unable to import SVG in Jest?

1 answers

0

Find remote jobs

Andres GPT