Open dpovey opened 3 years ago
The only workaround I could find was to move from ts-jest to using babel for transpiling typescript. It means I lose typechecking but I am guessing that's the only reasonable workaround for now.
it seems most likely that the error is with the check in babel-plugin-macros
I'm confident this is not the issue. But if you can figure out what the issue is and contribute a fix that would be great. I don't have the bandwidth to work on this I'm afraid.
Are you remembering to jest --clearCache
when you make changes to jest's internal transpilation? It can be easy to pass over a configuration that does really work that way. Also you might try creating a custom transformer. Here is an example from one of my projects. Then in jest.config.js
you can use your transformer:
module.exports = {
transform: {
'.*': '<rootDir>/path/to/transformer',
},
};
@dpovey I'm having the same issue, can't move to babel-jest because of our app's setup, did you find a workaround?
If you're willing to debug through the issue with with me I could probably help you over the next few days. This sat because we never got down to a root cause.
If you're willing to debug through the issue with with me I could probably help you over the next few days. This sat because we never got down to a root cause.
Sure, thank you! As a workaround, I used your solution of a custom transformer and it worked, so, thanks for it. I can write you an email (to the one you have in your profile) and we can debug it next week if you want.
My workaround:
const tsJest = require("ts-jest");
const tsJestTransformer = tsJest.createTransformer();
/**
* @todo (lucas): this is far from ideal, it removes every tailwind/tw statement to prevent errors in jest
* that means all our tailwind styles won't be applied in the tests
* @see https://github.com/kentcdodds/babel-plugin-macros/issues/160
*/
module.exports = {
...tsJestTransformer,
process: (src, filename, jestConfig, ...rest) => {
const procesedSrc = src.replace(/\$\{tailwind`.*`\}/g, "").replace(/\$\{tw`.*`\}/g, "");
return tsJestTransformer.process(procesedSrc, filename, jestConfig, ...rest);
},
};
Cool. Yeah I'm happy to look at it, and I think any email I've listed is fine.
@dpovey I'm having the same issue, can't move to babel-jest because of our app's setup, did you find a workaround?
Alas no I ended up just moving to Babel for transpilation and used the fork-ts-checker plugin for type checking with tsc.
I ran into this as well. I ended up with a jest config like this to work around it:
const { defaults: tsjPreset } = require("ts-jest/presets");
module.exports = {
"//": "... the rest of the config ...",
transform: {
// this one file uses a babel macro
// it's a generated file that combines
// typescript and the macro. So that 1 file
// we compile with `babel-jest` and the rest we
// compile with `ts-jest`
"src\/mypath\/myfile\.tsx": [
"babel-jest",
{
plugins: ["macros"],
presets: ["@babel/preset-typescript"],
},
],
...tsjPreset.transform,
},
}
Since that one file, in my case, is a tool generated file, there is no need to worry about typescript related type checking at compile time which we lose with the babel compile:
See: https://devblogs.microsoft.com/typescript/typescript-and-babel-7/#caveats
As we mentioned above, the first thing users should be aware of is that Babel won’t perform type-checking on TypeScript code; it will only be transforming your code, and it will compile regardless of whether type errors are present.
The problem I had was with ts-jest
(tried replacing it with babel-jest
and it worked fine).
All I did to get ts-jest
to work was to update its config by passing useESM: true
. Here's the section in question in the jest.config.js
:
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.json',
babelConfig: 'babel.config.js',
useESM: true // added this
}
}
Notice I'm also passing the babelConfig
option which is disabled by default.
Hope that helps someone.
What's the point of using ts-jest if behind you still use babel for transpiling your code ?
I thought I'd chime in with what worked for me - instead of specifying the transform I've added this into my jest.config.js:
moduleNameMapper: {
'\\.macro$': '<rootDir>/node_modules/babel-plugin-macros/dist/index.js',
},
Thanks @mariojankovic , your workaround didn't work for me but it did inspire me to try this
moduleNameMapper: {
'@emotion/styled/macro': '@emotion/styled'
}
This way the bundler still uses the macros but the test run doesn't.
I am trying to use babel-plugin-macros (specifically with the twin macro and tailwind) and while it works fine when running normally it fails with jest. This is the relevant part of my jest config:
I have also tried setting babelConfig to my babel.config.js (plus tried babelrc and babel.config.json). All results in the following error when I run jest on an application test:
I am not exactly sure what to do from here, it seems most likely that the error is with the check in babel-plugin-macros. I'm relatively sure that babel is running, or at least it chokes if I add a plugin that doesn't exist:
Fails with:
Any help would be greatly appreciated. It seems to be a variation on a common problem, based on googling the error.