Compatibility of version 4.0 and jest

[pcorpet]

I use jest for my test and it's choking on the new syntax introduced in 4.0 (Resource Queries). Jest themselves are planning on supporting it but the PR is not moving and it has been a while.

Do you have an idea on how I could make the upgrade to v4 and keep my jest tests? Maybe there's a way to make the resource query syntax optional?

[denchen]

So I was able to find a workaround with a combination of two things:

1. Install babel-plugin-import-remove-resource-query and add the plugin to your Jest babel config
2. In your test, mock out the SVG:

   jest.mock('/path/to/your/image.svg', () => () => <div className="mock-svg" />);

[pcorpet]

Thanks I've made it worked. Note that I've used a generic transform in my jest config so that I didn't need to mock each svg.

The solution that worked for me:

1. Install babel-plugin-import-remove-resource-query and add the plugin to your Jest babel config (thank you @denchen !)
2. Update my jest.config.js file with a:

transform: {
  '^.+\\.svg$': `<rootDir>/jest/__mocks__/svg.js`,
}

3. and then the content of this svg.js file:

module.exports = {
	process() {
		return {
			code: 'module.exports = () => null;',
		}
	},
	getCacheKey() {
		// The output is always the same.
		return 'svgTransformSvgr4'
	},
}

[denchen]

@pcorpet Your solution is much nicer. I did have a bit of a hiccup where my tests were still failing with trying to load the SVG, but it was due to a caching problem. I ran Jest once with --no-cache, and it fixed the issue.

[mmirus]

After some trial and error, I went about making v4 work with jest in a different way that seems to be working.

In jest.config.ts:

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
  // ...
  moduleNameMapper: {
    // ...
    '^(.+\\.svg)\\?react$': '<rootDir>/src/__mocks__/svg.tsx',
  },
  // ...
};

module.exports = config;

In src/__mocks__/svg.tsx:

import React from 'react';

const SvgrMock = React.forwardRef<HTMLSpanElement>((props, ref) => (
  <span ref={ref} {...props} />
));
SvgrMock.displayName = 'SvgrMock';

export const ReactComponent = SvgrMock;
export default SvgrMock;

[josegoval]

After some trial and error, I went about making v4 work with jest in a different way that seems to be working.

In jest.config.ts:

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
  // ...
  moduleNameMapper: {
    // ...
    '^(.+\\.svg)\\?react$': '<rootDir>/src/__mocks__/svg.tsx',
  },
  // ...
};

module.exports = config;

In src/__mocks__/svg.tsx:

import React from 'react';

const SvgrMock = React.forwardRef<HTMLSpanElement>((props, ref) => (
  <span ref={ref} {...props} />
));
SvgrMock.displayName = 'SvgrMock';

export const ReactComponent = SvgrMock;
export default SvgrMock;

I had to add also "^(.+\\.svg)$": "<rootDir>/src/__mocks__/svg.tsx",. Here is my moduleNameMapper:

"moduleNameMapper": {
      "^(.+\\.svg)\\?react$": "<rootDir>/src/__mocks__/svg.tsx",
      "^(.+\\.svg)$": "<rootDir>/src/__mocks__/svg.tsx",
}

[jarosik10]

I've come up with some other idea.

1. Add moduleNameMapper to help jest with handling this import syntax: .svg?react. It converts imports like ./icons/myIcon.svg?react to ./icons.myIcons.svg

  moduleNameMapper: {
    '^(.*).svg\\?react$': '$1.svg',
  }

2. Add trasformer jest-transformer-svg . '^.+\\.svg(\\?react)?$' - it uses 'jest-transformer-svg' for normal .svg imports and also .svg?react.

  transform: {
    '^.+\\.svg(\\?react)?$': 'jest-transformer-svg',
  },

With this setup svgs are rendered like this:

<svg
   class="opt-icon icon iconSmall moreIcon"
   data-file-name="SvgMore_vert24px"
/>