Add hoisting of the "@jest/globals" import together with jest.mock

[webschik]

In the next example the hoisting of the jest.mock doesn't work:

// input
import {jest} from "@jest/globals";
import {foo} from './module1.js';
import {bar} from './module2.js';

jest.mock('./module1.js');

// result code
"use strict";
var _globals = require("@jest/globals");
var _module1Js = require("./module1.js");
var _module2Js = require("./module2.js");
_globals.jest.mock('./module1.js');

Is it possible to update swc AST to hoist jest.mock before the module1.js and module2.js imports?

[Smrtnyk]

@kdy1 any plans on this?
I have a repo with repro you can just run in here
https://github.com/Smrtnyk/swc-jest-globals-repro

[kdy1]

See swc-project/swc#7435

[Smrtnyk]

I don't see what that document is supposed to reveal here?
This is about the jest.mock hositing which is already built in in swc, but doesn't cover this case
this basically breaks the functionality of jest

[kdy1]

Is it possible to update swc AST to hoist jest.mock before the module1.js and module2.js imports?

I think you are talking about something different

[Smrtnyk]

I think the easiest is to remove import {jest} from "@jest/globals"; completely since it is not needed for jest.
Jest injects globals anyway.
It is only for typecript to have proper strict types in tests.
And hoist jest.mock as it is already hoisted without @jest/globals imports

If you check the repo I linked, tests work if you remove that import (breaks typescript types) but tests break if import is there

[kdy1]

It's a different issue from this. Please file a new one instead.

[Smrtnyk]

I don't see how it is different
I see it as exactly the same issue, check my repository I linked
@webschik is the issue I am talking about the same as you are referring to?

[kdy1]

He wants to mock ESMs, and it will never be supported. If your requirement is the same, it's also not planned.

[kdy1]

Ah it was the same issue.
It'll never be supported, and I'll fix @swc/core to never allow mocking ESMs, even if the global import does not exist

[Smrtnyk]

ok let me explain myself
the issue is with jest.mock hoisting

swc already hoists jest.mock by default
but if you import jest from @jest/globals to get good types for typescript
swc stops hoisting jest.mock

that import is there purely for typescript, not for jest itself
tests work if you remove that import but types are not good

so what that import does is, it prevents swc from hoisting jest.mock properly as it was before
it is not about esm stuff, it is purely and only about jest.mock hoisting.

If swc would move jest.mock under that import, or remove that import completely and hoist jest.mock as before, then the behavior would be preserved.

[SimenB]

Jest injects globals anyway.

Can be turned off via config. https://jestjs.io/docs/cli#--injectglobals

A quick hack might be to just remove the import, run the transform/hoisting, then reinject the import afterwards. Would be wrong if people alias the imports, but still

[Smrtnyk]

what I ended up doing is to write this kind of transfomer
seems like it works

const { createTransformer } = require("@swc/jest");

/**
 * Transformer for adapting imports from "@jest/globals" which only exist to provide strict types for jest api
 * Before running swc we need to adapt them, because swc does not properly hoist jest.mock in case imports from
 * `@jest/globals` are present
 * We don't strip it, because we need to preserve original code for source maps to continue working, so we just prefix
 * imports with `_`
 */
const removeJestGlobalsTransformer = {
    process(src, filename) {
        if (!src.includes("@jest/globals")) {
            return src;
        }
        return src.replace(/import\s+{([\s\S]*?)}\s+from\s+['"]@jest\/globals['"];/gs, (match, p1) => {
            // Prefix each imported name with an underscore while maintaining their original positions
            const names = p1.split(",").map(name => "_" + name.trim());
            const renamedImports = names.join(",\n ");
            return `import {\n ${renamedImports}\n} from "@jest/globals";`;
        });
    }
};

const swcOptions = {
    sourceMaps: "inline",
    module: {
        strict: false,
        strictMode: false
    },
    jsc: {
        target: "es5",
        parser: {
            syntax: "typescript",
            dynamicImport: true
        },
        experimental: {
            plugins: [["jest_workaround", {}]]
        }
    }
};

const swcTransformer = createTransformer(swcOptions);

const chainedTransformers = {
    process(src, filename, config, transformOptions) {
        const afterJestGlobalsRemoval = removeJestGlobalsTransformer.process(src, filename);

        return swcTransformer.process(afterJestGlobalsRemoval, filename, config, transformOptions);
    }
};

module.exports = chainedTransformers;

I kept the injection of globals, but just slightly modified the imports so swc hoisting of jest.mock keeps working
I guess there is a better way, but seems like this does the trick, and stopping on break points in intellij in test cases still works when working with typescript

Regex might be needed to be adapted, by some better regex magic skills