Js-lingui: Imported constants in <Trans> break Jest/Enzyme tests

[tricoder42]

Hey @ppozniak, that's really weird. Could you plase create a small repository with Jest, babel config and failing file?

[ppozniak]

@tricoder42
https://github.com/ppozniak/js-lingui-issue-514
Here you go.

[agwells]

I experienced a similar issue. We got ReferenceError: Can't find variable: CONTACT_PHONE_NUMBER, under similar circumstances. Except I saw it when running the application (compiled for "dev" mode) rather than during Jest tests. (We don't have a Jest test that executes this code path, so I don't know whether that would have worked or not.)

To reproduce

import {React} from 'react';
import {View, Text} from 'react-native';
import {Trans} from '@lingui/macro';
import {telephoneStyle} from 'src/styles';
import {CONTACT_PHONE_NUMBER} from 'src/contact-constants';

export const AreasScreen = () => {
  return (
    <View>
      <Text>
        <Trans>Please call{` `}
          <Text style={telephoneStyle}>{CONTACT_PHONE_NUMBER}</Text>
          {` `}to proceed.
        </Trans>
      </Text>
    </View>
  );
}

Expected behavior
The component displays the language string "Please call _{phone number}_ to proceed."

Actual behavior
When the application attempts to render this component, it crashes with an error message like this:

ReferenceError

Can't find variable: CONTACT_PHONE_NUMBER

Additional context ===

This is a React native application, running on Android. We noticed this behavior when running the application both in "dev" mode (e.g. react-native start), and in prod mode (e.g. compiling to an APK). It didn't cause any problems at compile time, only at run time when the component in question actually attempted to render.

We have these library versions:

• @lingui/core: 2.9.0
• @lingui/macro: 2.9.0
• @lingui/react: 2.9.0
• react-native: 0.61.4
• @babel/core: 7.7.7

Babel config:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'macros',
    [
      'module-resolver',
      {
        root: ['./'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          src: ['./src/'],
        },
      },
    ],
  ],
};

Workaround

We were able to work around the issue by assigning the imported constant to a local variable, and then using that inside the <Trans>:

import {React} from 'react';
import {View, Text} from 'react-native';
import {Trans} from '@lingui/macro';
import {telephoneStyle} from 'src/styles';
import {CONTACT_PHONE_NUMBER} from 'src/contact-constants';

export const AreasScreen = () => {
  // WORKAROUND: assign imported phone number to a local variable
  const phoneNumber = CONTACT_PHONE_NUMBER;

  return (
    <View>
      <Text>
        <Trans>Please call{` `}
          <Text style={telephoneStyle}>{phoneNumber}</Text>
          {` `}to proceed.
        </Trans>
      </Text>
    </View>
  );
}

[stale[bot]]

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.