Cannot test component wrapped with ConfigProvider

[JesusTheHun]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/JesusTheHun/antd-cra-rtl-error

Steps to reproduce

yarn test

What is expected?

The test should pass

What is actually happening?

The test fails to start with the error :

path/node_modules/antd/es/locale/en_US.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import defaultLocale from './default';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import logo from './logo.svg';
      3 | import './App.css';
    > 4 | import antdLocaleEnUS from 'antd/es/locale/en_US';
        | ^
      5 | import {ConfigProvider} from "antd";
      6 | 
      7 | function App() {

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/App.tsx:4:1)

Environment	Info
antd	4.6.6
React	16.13.1
System	MacOS 10.15.7
Browser	node

[JesusTheHun]

The same issue occurs with Tooltip that imports Affix.

export { default as Affix } from './affix';
^^^^^^

SyntaxError: Unexpected token 'export'
import { Tooltip } from 'antd/es';

[afc163]

See https://www.google.com/search?client=firefox-b-d&q=jest+SyntaxError%3A+Unexpected+token+%27export%27

[JesusTheHun]

You understand that this kind of arrogant response contribute to your horrible reputation as a dev team, right ?
I'm dead serious, instead of providing useful information you point me to google.
Do you understand how that makes you look like ? Look around, you are about to become a meme for arrogant dev.

[JesusTheHun]

For anyone running into this issue, add the following to your package.json :

  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!antd|rc-.+?|@babel/runtime|@ant-design).+(js|jsx)$"
    ]
  }

[afc163]

It is not a antd issue but jest usage, I am glad that you find solution and share it.

[afc163]

I just found another workaround:

- import antdLocaleEnUS from 'antd/es/locale/en_US';
+ import antdLocaleEnUS from 'antd/lib/locale/en_US';

[afc163]

Other workarounds:

1. SyntaxError: Cannot use import statement outside a module, with TypeScript and ES Modules jestjs/jest#9860 (comment)
2. wait jest@26 for esm native support: https://jestjs.io/blog/2020/05/05/jest-26#native-esm-support

[JesusTheHun]

I've submitted a PR to improve the documentation regarding this issue. I believe it will improve the developer experience with Ant Design.

#27003

[OpenSourceLucy]

It works for antd if we use antd/lib/ instead of antd/es/
So I solved the problem adding "moduleNameMapper" in the package.json.

"jest": {
  "moduleNameMapper": {
    "^antd/es/": "antd/lib/"
  }
}