@lungui/macro module undefined in test with jest and react-testing-library #721

armandabric · 2020-08-12T13:56:42Z

Describe the bug
When I try to render a component that use Trans and Plural tag from @lungui/macro, the imported component are 'undefined':

import { Trans, Plural } from "@lingui/macro";

console.log({ Trans, Plural }); // { Trans: undefined, Plural: undefined }

This lead to failing render as undefined is not a valid React component.

For now I have to mock component imported from @lingui/macro in my test:

jest.mock("@lingui/macro", () => ({
  Trans: function TransMock({ children }: { children: React.ReactNode }) {
    return children;
  },

  t: function tMock(id: string): string {
    return id;
  },

  Plural: function PluralMock({
    value,
    one,
    other,
  }: {
    value: number;
    one: React.ReactNode;
    other: React.ReactNode;
  }) {
    return value > 1 ? other : one;
  },
}));

Additional context
Add any other context about the problem here.

jsLingui version 3.0.0-13

Babel version

@gogaille/my-project@1.0.0 ~/workspace/my-project
├── @babel/core@7.11.1 
├─┬ @storybook/react@5.3.19
│ ├─┬ @babel/preset-react@7.8.3
│ │ └─┬ @babel/plugin-transform-react-display-name@7.8.3
│ │   └── @babel/core@7.7.7  extraneous
│ ├─┬ @storybook/core@5.3.19
│ │ ├─┬ @babel/plugin-proposal-class-properties@7.8.3
│ │ │ └── @babel/core@7.7.7  extraneous
│ │ ├─┬ @babel/plugin-syntax-dynamic-import@7.8.3
│ │ │ └── @babel/core@7.7.7  extraneous
│ │ └─┬ @babel/preset-env@7.8.4
│ │   └─┬ @babel/plugin-proposal-nullish-coalescing-operator@7.8.3
│ │     └── @babel/core@7.7.7  extraneous
│ ├─┬ @svgr/webpack@4.3.3
│ │ ├── @babel/core@7.8.4 
│ │ └─┬ @svgr/plugin-jsx@4.3.3
│ │   └── @babel/core@7.8.4 
│ └─┬ babel-plugin-react-docgen@4.1.0
│   └─┬ react-docgen@5.2.0
│     └── @babel/core@7.8.4 
├─┬ jest@26.1.0
│ └─┬ @jest/core@26.1.0
│   ├─┬ @jest/reporters@26.1.0
│   │ └─┬ istanbul-lib-instrument@4.0.3
│   │   └── @babel/core@7.8.4 
│   ├─┬ @jest/transform@26.1.0
│   │ ├── @babel/core@7.8.7 
│   │ └─┬ babel-plugin-istanbul@6.0.0
│   │   └─┬ istanbul-lib-instrument@4.0.1
│   │     └── @babel/core@7.8.4 
│   └─┬ jest-config@26.1.0
│     ├── @babel/core@7.8.7 
│     └─┬ babel-jest@26.1.0
│       └─┬ babel-preset-jest@26.1.0
│         └─┬ babel-preset-current-node-syntax@0.1.2
│           ├─┬ @babel/plugin-syntax-bigint@7.8.3
│           │ └── @babel/core@7.7.7  extraneous
│           └─┬ @babel/plugin-syntax-numeric-separator@7.8.3
│             └── @babel/core@7.7.7  extraneous
└─┬ next@9.5.1
  ├── @babel/core@7.7.7 
  ├─┬ @babel/plugin-proposal-nullish-coalescing-operator@7.8.3
  │ └─┬ @babel/plugin-syntax-nullish-coalescing-operator@7.8.3
  │   └── @babel/core@7.7.7  extraneous
  ├─┬ @babel/plugin-proposal-object-rest-spread@7.9.6
  │ ├─┬ @babel/plugin-syntax-object-rest-spread@7.8.3
  │ │ └── @babel/core@7.7.7  extraneous
  │ └─┬ @babel/plugin-transform-parameters@7.9.5
  │   └── @babel/core@7.7.7  extraneous
  ├─┬ @babel/plugin-proposal-optional-chaining@7.9.0
  │ └── @babel/core@7.7.7  extraneous
  ├─┬ @babel/plugin-transform-modules-commonjs@7.9.6
  │ └── @babel/core@7.7.7  extraneous
  └─┬ @babel/preset-env@7.9.6
    ├─┬ @babel/plugin-proposal-async-generator-functions@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-proposal-dynamic-import@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-proposal-json-strings@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-proposal-optional-catch-binding@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-proposal-unicode-property-regex@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-syntax-async-generators@7.8.4
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-syntax-json-strings@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-syntax-optional-catch-binding@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-syntax-optional-chaining@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-syntax-top-level-await@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-arrow-functions@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-async-to-generator@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-block-scoped-functions@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-block-scoping@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-computed-properties@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-dotall-regex@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-duplicate-keys@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-exponentiation-operator@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-function-name@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-literals@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-member-expression-literals@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-named-capturing-groups-regex@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-new-target@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-object-super@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-property-literals@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-reserved-words@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-shorthand-properties@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-spread@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-sticky-regex@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-template-literals@7.8.3
    │ └── @babel/core@7.7.7  extraneous
    ├─┬ @babel/plugin-transform-typeof-symbol@7.8.4
    │ └── @babel/core@7.7.7  extraneous
    └─┬ @babel/plugin-transform-unicode-regex@7.8.3
      └── @babel/core@7.7.7  extraneous

Your Babel config (e.g. `.babelrc`)

{
  "presets": ["next/babel"],
  "plugins": [
    "macros",
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
      },
    ],
  ],
};

The text was updated successfully, but these errors were encountered:

tricoder42 · 2020-08-17T15:29:09Z

Hey @Spy-Seth. Yeah, this is weird. Well Trans and Plural aren't real components, but rather macros which are replaced with Trans components from @lingui/react package at compile time. So, I don't know if console.log({ Trans, Plural }); // { Trans: undefined, Plural: undefined } is actually a bad thing because it's not a valid usecase. What about console.log(<Trans id="msg" />);

I've never had this problem with using macros in tests. Could you please post the failing unit test?

armandabric · 2020-08-27T10:08:33Z

In fact it seems my babel configuration was not loaded in test: I'm using 'ts-jest' (https://kulshekhar.github.io/ts-jest/) to test my TS files. And it does not load the babel configuration by default: https://kulshekhar.github.io/ts-jest/user/config/babelConfig.

After updating my setup to correctly have the macro running, I still got an internal error in the lingui macro code 😢

TypeError: ~/src/components/CheckOut/ChekoutLayout.tsx: @lingui/macro: Cannot read property 'attributes' of undefined Learn more: https://www.npmjs.com/package/@lingui/macro

    at MacroJSX.stripMacroAttributes (node_modules/@lingui/macro/macroJsx.js:135:42)
    at MacroJSX.replacePath (node_modules/@lingui/macro/macroJsx.js:77:39)
    at node_modules/@lingui/macro/index.js:64:11
        at Array.forEach (<anonymous>)
    at macro (node_modules/@lingui/macro/index.js:61:41)
    at macroWrapper (node_modules/babel-plugin-macros/dist/index.js:63:12)
    at applyMacros (node_modules/babel-plugin-macros/dist/index.js:230:14)
    at ImportDeclaration (node_modules/babel-plugin-macros/dist/index.js:114:28)
    at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)

I have never written babel macro so I'm not sure what I could do help to fix this

stale · 2020-10-29T06:02:23Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

konrad-marzec · 2021-03-24T10:03:13Z

I have same issue, ts-jest with babelrc and lingui version: 3.8.1.

pkiler · 2021-05-17T17:51:32Z

Same issue with version 3.8.10

semoal · 2021-05-17T18:16:52Z

Same issue with version 3.8.10

Since this issue it's closed, you can open a new one with a reproduction repo and I'll could help much more than just reading same issue :)

In our examples folder, create-react-app contains a testing-library suite where we test our pre-releases and works as expected, so i'm inclined to think that it's something related to your configuration.

Anyways, feel free to open a new issue with a repro link and I'll help you there!

cameronbraid · 2022-01-20T01:49:22Z

In fact it seems my babel configuration was not loaded in test: I'm using 'ts-jest' (https://kulshekhar.github.io/ts-jest/) to test my TS files. And it does not load the babel configuration by default: https://kulshekhar.github.io/ts-jest/user/config/babelConfig.

After updating my setup to correctly have the macro running, I still got an internal error in the lingui macro code 😢
TypeError: ~/src/components/CheckOut/ChekoutLayout.tsx: @lingui/macro: Cannot read property 'attributes' of undefined Learn more: https://www.npmjs.com/package/@lingui/macro

    at MacroJSX.stripMacroAttributes (node_modules/@lingui/macro/macroJsx.js:135:42)
    at MacroJSX.replacePath (node_modules/@lingui/macro/macroJsx.js:77:39)
    at node_modules/@lingui/macro/index.js:64:11
        at Array.forEach (<anonymous>)
    at macro (node_modules/@lingui/macro/index.js:61:41)
    at macroWrapper (node_modules/babel-plugin-macros/dist/index.js:63:12)
    at applyMacros (node_modules/babel-plugin-macros/dist/index.js:230:14)
    at ImportDeclaration (node_modules/babel-plugin-macros/dist/index.js:114:28)
    at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)
I have never written babel macro so I'm not sure what I could do help to fix this

@armandabric did you find out what the cause was, I am hitting the same error and have run out of ideas

cameronbraid · 2022-01-20T03:34:58Z

fyi I made a standalone repro and issue #1197

cameronbraid · 2022-01-28T00:34:44Z

FYI to make this work follow #1197 (comment)

stale bot added the wontfix label Oct 29, 2020

stale bot closed this as completed Nov 5, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@lungui/macro module undefined in test with jest and react-testing-library #721

@lungui/macro module undefined in test with jest and react-testing-library #721

armandabric commented Aug 12, 2020

tricoder42 commented Aug 17, 2020

armandabric commented Aug 27, 2020

stale bot commented Oct 29, 2020

konrad-marzec commented Mar 24, 2021

pkiler commented May 17, 2021

semoal commented May 17, 2021

cameronbraid commented Jan 20, 2022

cameronbraid commented Jan 20, 2022

cameronbraid commented Jan 28, 2022

@lungui/macro module undefined in test with jest and react-testing-library #721

@lungui/macro module undefined in test with jest and react-testing-library #721

Comments

armandabric commented Aug 12, 2020

tricoder42 commented Aug 17, 2020

armandabric commented Aug 27, 2020

stale bot commented Oct 29, 2020

konrad-marzec commented Mar 24, 2021

pkiler commented May 17, 2021

semoal commented May 17, 2021

cameronbraid commented Jan 20, 2022

cameronbraid commented Jan 20, 2022

cameronbraid commented Jan 28, 2022