Failure with ts-jest and babel

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.<anonymous> (src/chrome/AppChrome.tsx:84:7)
      at Object.<anonymous> (src/App.tsx:20:1)
      at Object.<anonymous> (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 (<anonymous>)
      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.

[tareqdayya]

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.

[conartist6]

Cool. Yeah I’m happy to look at it, and I think any email I’ve listed is fine.