'Jest import issue for react js app with custom imports prefix for workerize-loader

I am facing an issue with setting up tests for react app with Jest. I am using workerize-loader! library to import modules into webworkers. On tests that use the import worker from workerize-loader!./path/to/file are barking on import of the test. I tried with a custom loader, in the jest.condig.js file but that did not work. When I run the default testing script provided by the react app setup it cannot find the imports in the files. But the code when it runs works alright. I need help with importing the modules inside of the test suite of jest

Basic test

import React from "react";
import {cleanup, fireEvent, render } from "@testing-library/react";
import App from "./App";);

afterEach(cleanup);

test("basic test", () => {
  const { container } = render(<App />);
  const linkElement = container.firstChild;
  expect(linkElement).toBeInTheDocument();
});

Configuration

jest.config.js

module.exports = {
  preset: 'ts-jest',
  verbose: true,
  testEnvironmentOptions: {
    url: 'http://localhost/'
  },
  testEnvironment: 'jsdom',
  transform: {
    'workerize-loader(\\?.*)?!(.*)': '<rootDir>/workerize-jest.js',
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)?$': 'ts-jest',
  },
  unmockedModulePathPatterns: [
    'node_modules',
  ],
  moduleNameMapper: {
    'workerize-loader(\\?.*)?!(.*)': 'identity-obj-proxy'
  },
};

.babelrc

{
    "plugins": [
        "syntax-dynamic-import",
        "@babel/transform-runtime"
    ],
    "presets": [
        [
            "es2015",
            {
                "modules": true
            }
        ],
        "react",
        "stage-0"
    ],
    "env": {
        "start": {
            "presets": [
                "react-hmre"
            ]
        },
        "test": {
            "presets": [
                [
                    "es2015",
                    {
                        "modules": true
                    }
                ],
                "react",
                "stage-0"
            ]
        }
    }
}

Error message on react-scripts test

Cannot find module 'workerize-loader!./workers/css.worker'
 

In file

> 2 | import worker from 'workerize-loader!./workers/css.worker';

workerize-jest.js

module.exports = {
    process(src, filename) {
      return `
        async function asyncify() { return this.apply(null, arguments); }
        module.exports = function() {
          const w = require(${JSON.stringify(filename.replace(/^.+!/, ''))});
          const m = {};
          for (let i in w) m[i] = asyncify.bind(w[i]);
          return m;
        };
      `;
    }
  };


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source