Add ability to specify "issuer" for transforms, so Jest can be configured to resemble the already existing Webpack config

[dietergeerts]

Even though it would be far better to just let Jest work with a webpack config, which would avoid so many code needing to exist and make setting up testing in project very easy, I know that the jest team doesn't want this for certain reason, so therefore this feature proposal, to actually make it possible to use jest in our project where we have a webpack config that is based on the issuer for certain rules.

🚀 Feature Proposal

Add the possibility to specify an "issuer" for a transformation, so that certain file types can be transformed differently depending on who requested them. (same goes for moduleNameMapper)

Motivation

I regularly use a webpack config that will specific the issuer for rules, because some files need to be loaded/transformed differently depending on where they are used. An example is for svg files, where when we import them into a react file/component, we want to transform them with svgr, so it becomes a react component that is easy to use, but when that same svg file is imported by normal TS/JS, like in our server code, then we want the url of the file instead, as we use it there for the reference. This seems currently not possible in jest, while it is in webpack, and thus makes jest unusable for webpack projects that need the issuer difference.

Example

An svg file that should be imported as a react component when imported into a react file, but imported as an url when imported for all other file, see more detailed usage under motivation. As for how to set this, maybe similar like what webpack does for consistency in the JS/TS tooling?

Pitch

Why does this feature belong in the Jest core platform?

Because if it's not in the jest platform, projects with a webpack config that relies on the issuer for rules will not be able to have tests run correctly with jest, meaning that jest is a no-go at that point.

[ahnpnl]

Currently a transformer can accept custom configuration as {filePattern: ['path-to-transformer', {options}]} which is mentioned in doc. Does it fit your request?

[dietergeerts]

@ahnpnl , nope, I need the option to only transform those files when they are requested by certain other files. This is configured in our webpack config with the option issuer, but as jest can't use a webpack config, there is a need to configure the same. The exact use-case is for svg files, where when imported into a react file, we have a loader that turns them into react components, but when imported into other files, it should be an url.

[zinkkrysty]

I have exactly the same issue (React + Svelte and svg loading), and I can't even find a workaround. @dietergeerts have you found a workaround?

[zinkkrysty]

The only workaround I found is to do this in my test files. Which is of course not optimal when having lots of svg files to mock.

jest.mock('path/to/file.svg', () => ({ default: '' }))

[dietergeerts]

@zinkkrysty, I wrote a custom loader, which will not satisfy all cases, but does in the project I'm working on for the moment. I'm on leave right now, so I can't lookup the workaround. But when I'm back at work, I'll post it here.

[dietergeerts]

This is what we have done, though its not a 100% solution:

  moduleNameMapper: {
    /**
     * Keep in mind that in Jest, "issuer" doesn't exist, meaning that we might
     * bump into a situation where we do need both rules for svg files in the
     * same package, and thus testing will fail if they are in the same jest
     * project. A feature request is made for this, but in the meantime, when
     * we encounter an issue, we'll have to split up packages/projects into
     * projects that only need one or the other rule, if possible. So let's
     * hope that in the meantime, all stays fine, otherwise, we'll have to move
     * away from Jest, and use Karma with our existing webpack config instead,
     * and combine it with other parts of our choosing like mocha, sinon, ....
     * @see {@link https://github.com/facebook/jest/issues/11503}
     */
    '\\.(svg)$': require.resolve('./transform-svg.tsx'),
  },

./transform-svg-tsx

/**
 * @see {@link https://react-svgr.com/docs/jest/}
 */
import React from 'react'

export default function SvgIcon() {
  return <span>I</span>
}
export const ReactComponent = 'div'

[github-actions[bot]]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.