using ts-jest causes error in @lingui/macro

[cameronbraid]

Describe the bug
Error is

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

    TypeError: /Users/cameronbraid/workspace-new/ts-jest-issue/examples/create-react-app/src/App.tsx: @lingui/macro: Cannot read properties of undefined (reading 'attributes') Learn more: https://www.npmjs.com/package/@lingui/macro

      at MacroJSX.stripMacroAttributes (node_modules/@lingui/macro/macroJsx.js:146:44)
          at Array.forEach (<anonymous>)

To Reproduce

git clone https://github.com/cameronbraid/js-lingui ts-jest-issue
cd ts-jest-issue
git checkout ts-jest-issue
cd examples/create-react-app
yarn
yarn jest

[HRDepartment]

I was able to fix this issue by setting compilerOptions.jsx to "preserve". When this is set to a value like "jsx", Babel TypeScript appears to do JSX transformations before handing over control to plugins like macros. Lingui's macro operates on the AST that still contains JSX nodes.

[cameronbraid]

@caresx You Beauty ! Thanks heaps. Confirmed that it works for me in my other project too.

[molokovev]

For ones having this issue, I did manage to set up ts-jest with lingui (though I still had to use babel-jest).

First, you need to change the compilerOptions['jsx'] to "preserve", as it was mentioned earlier. And then you should tell ts-jest to use babel (like this), so to put the lingui code though the babel-plugin-macros. Your babel config should contain all the stuff required for lingui, of course.

Both actions could be done only for tests in the jest.config.js like this:

globals: {
    'ts-jest': {
      tsconfig: {
        jsx: 'preserve',
      },
      babelConfig: true,
    },
  },

Be prepared to fix some babel-related errors (like variable declarations being or not being hoisted, read here) after the setup changes.