kentcdodds / kentcdodds/babel-plugin-macros

Failure with ts-jest and babel

Open
#160 13 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.6k
Forks
138
PR merge metrics
No merged PRs in 30d

Description

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:

```
module.exports = {
preset: 'ts-jest',
globals: {
'ts-jest': {
babelConfig: {
plugins: ['macros'],
presets: [['@babel/preset-env'], '@babel/preset-react'],
},
},
},
```

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:

```
FAIL tests/App.test.tsx
● Test suite failed to run

MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

82 |
83 | #desktop-nav & {
> 84 | ${tw`flex items-center px-2 py-2 text-xs leading-5 transition ease-in-out duration-150`};
| ^
85 | div {
86 | ${tw`mx-auto`}
87 | }

at Object.macroWrapper [as default] (node_modules/babel-plugin-macros/dist/index.js:60:13)
at Object. (src/chrome/AppChrome.tsx:84:7)
at Object. (src/App.tsx:20:1)
at Object. (tests/App.test.tsx:3:1)
```

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:

```
module.exports = {
preset: 'ts-jest',
globals: {
'ts-jest': {
babelConfig: {
plugins: ['macros', 'no-such-plugin'],
presets: [['@babel/preset-env'], '@babel/preset-react'],
},
},
},
```

Fails with:
```
FAIL tests/App.test.tsx
● Test suite failed to run

Cannot find module 'babel-plugin-no-such-plugin' from '/Users/dpovey/src/ppcsamurai/shogun-react'

at Function.resolveSync [as sync] (node_modules/resolve/lib/sync.js:90:15)
at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
at resolvePlugin (node_modules/@babel/core/lib/config/files/plugins.js:54:10)
at loadPlugin (node_modules/@babel/core/lib/config/files/plugins.js:62:20)
at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
at node_modules/@babel/core/lib/config/config-descriptors.js:109:50
at Array.map ()
at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPluginDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
at node_modules/@babel/core/lib/config/config-descriptors.js:63:53
```

Any help would be greatly appreciated. It seems to be a variation on a common problem, based on googling the error.

Contributor guide

Open the contributing guide

Research direction

Start with the Jest configuration in the issue and reproduce the failure by running tests/App.test.tsx. Trace the macro error through src/chrome/AppChrome.tsx and the Babel configuration, consulting the linked babel-plugin-macros documentation. Done means the Jest test suite can compile the twin macro without the MacroError.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, tailwindcss, typescript
Domain
build-system, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.