question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failure with ts-jest and babel

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:2
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
tareqdayyacommented, Nov 4, 2021

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.

2reactions
conartist6commented, Apr 2, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest / Ts-Jest / Babel : Debug Failure. False expression
I've experienced similar issue when was switching jest to process .js files with ts-jest instead of babel-jest . Error happens (according to ...
Read more >
Configuring Jest
If thresholds aren't met, jest will fail. Thresholds specified as a positive number are taken to be the minimum percentage required. Thresholds ...
Read more >
babel-jest - npm
If you are already using jest-cli , add babel-jest and it will automatically compile JavaScript code using Babel. ... If you would like...
Read more >
Migrating a react code base test from using `ts-jest` to babel-jest
Issues with ts-jest includes test coverage issues, working with a certain version of jest, extra configuration. · Opting for babel-jest that ...
Read more >
Switching a Jest Project from Babel to SWC - Goldblog
I don't use ts-jest because I've found it simpler to use Jest's Babel ... My first test run saw many tests fail with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found