Getting error in Create React app Jest unit tests for import.meta syntax

[albert-kp]

Iam using import.meta syntax for calling a webworker url. This is causing issues with Jest unit tests. How to fix this issue any idea.?

   const worker = new Worker(new URL('{worker_url}', import.meta.url));
                                                                                           ^^^^
    SyntaxError: Cannot use 'import.meta' outside a module

[Sahil-Maiyani]

facing same. have you found any work around with react-scripts test?

[Sahil-Maiyani]

After lots and lots of research I found that there is no direct configuration/solution of this issue with Jest + CRA.

There are some transform plugins are available, but I don't know why CRA jest configuration is not adhering that. Maybe it's part of another R&D for future. Those who wants quick solution please follow below approach as of now.

Don't use import.meta directly. Create worker factory module:

const createFetcherWorker = () => {
  return new Worker(new URL('./Worker1.js', import.meta.url));
};

const createLoaderWorker = () => {
  return new Worker(new URL('./Worker2.js', import.meta.url));
};

export { createFetcherWorker, createLoaderWorker };

than use it in your actual prod component and from testing side mock it with jest like below:

jest.mock('Path/to/the/WorkerFactory', () => {
  return {
    createFetcherWorker: jest.fn(),
    createLoaderWorker: jest.fn(),
  };
});

Hope it helps.