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.

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

See original GitHub issue

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,
      },
    ],
  ],
};

Issue Analytics

State:
Created 3 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

3reactions

cameronbraidcommented, Jan 20, 2022

fyi I made a standalone repro and issue https://github.com/lingui/js-lingui/issues/1197

2reactions

stale[bot]commented, Oct 29, 2020

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.

Top Results From Across the Web

lingui/js-lingui - Gitter

I am using react-testing-library, if that makes a difference. ... see Error: Uncaught [TypeError: Cannot read property '_' of undefined] when I run...

Testing — LinguiJS documentation

Here is a working example with react-testing-library, ... render, act } from '@testing-library/react' import { i18n } from '@lingui/core' import ...

tststst - npm Package Health Analysis | Snyk

We noticed that this project uses a license which requires less permissive conditions such as disclosing the source code, stating changes or redistributing...

module not found error can't resolve 'fs' in react js - You.com

js:22:0 Module not found: Can't resolve 'fs' Import trace for requested module: ./node_modules/@lingui/macro/index.js ./src/components/Test.tsx ... I've seen ...

React + Jest Testing Error - ReferenceError: expect is not ...

You would want to set up the files after the test framework has been installed. Here are a couple of ways you can...