Does not work with jest

[robertying]

Use craco test results in the error:

Test suite failed to run

    /Users/xxx/sources/proj/node_modules/antd/es/card/style/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../../style/index.less';
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

      10 |   AutoComplete,
      11 |   message,
    > 12 |   Select
         | ^
      13 | } from "antd";
      14 | import axios from "axios";

Problem resolved when I changed back to react-scripts test.

BTW, craco start works fine.

Env

"craco-antd": "^1.9.3", "@craco/craco": "^3.2.3", "antd": "^3.11.6", "react-scripts": "^2.1.1"

// craco.config.js

const CracoAntDesignPlugin = require("craco-antd");

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          "@primary-color": "#8440bd"
        }
      }
    }
  ]
};

Thank you!

[ndbroadbent]

Hi, sorry about that, and thanks for letting me know! Sorry I haven't tried the craco test command before.

Unfortunately I'm not able to reproduce this issue. I've started a new app with create-react-app, and installed craco and craco-antd. The craco test command is working fine for a new app.

If you could please fork this POC repo: https://github.com/FormAPI/craco-antd-test-poc

Then please make the minimum changes that can reproduce the issue, and send a PR. I can take a look and see if I can get it working. Thanks!

[ndbroadbent]

Sounds like it might be related to this issue in craco: https://github.com/sharegate/craco/issues/50

But that was fixed in 3.2.1-alpha.0, and you're using 3.2.3.

I don't really understand the commit that fixes the issue, but it seems like I have to do some extra steps to get Less working with Jest.

[mlg87]

i too am experiencing this issue. was debating whether to open an issue in this repo or the main craco repo. anyway, from looking at your poc, my guess is that youre not experiencing the issue bc youre importing Button from the lib and import { Whatever } from 'antd' is resolving to the es dir

[robertying]

@mlg87 is right, thanks!

Change import Button from 'antd/lib/button'; to import { Button } from "antd" reproduces the error.

Since the doc from antd says we could do this change after the original react-app-rewired setup so I guess a lot of people would find the same issue after migrating from rewired.

Hope this helps!

[mlg87]

yea, just cloned your poc and tried some scenarios

1. test script is react-scripts test passes with import Button from 'antd/lib/button'
2. test script is craco test passes with import Button from 'antd/lib/button'
3. test script is react-scripts test passes with import { Button } from 'antd'
4. test script is craco test fails with import { Button } from 'antd'

[mlg87]

i ended up just using react-scripts for the test script bc importing everything from antd/lib increased the bundle size unnecessarily. given that im just essentially unit testing the components, that works for my use case, but i do think this will need to be sorted out by someone

[ndbroadbent]

Ah I see, I'll change this to use an import statement and will see if I can get the tests running.

@mlg87 Using react-scripts sounds like a good workaround for now!

Sorry for the delay on this issue, I've added this to my todo list and should be able to get to it soon.

[michaellzc]

@ndbroadbent

Hi,

Thanks for the hard work! Any update?

[ndbroadbent]

@ExiaSR Very sorry, I haven't had any time to tackle this yet, but I've added a ticket to my todo list and should get to it in the next few weeks. In the meantime, it would be awesome if you or someone else has time to look into it and contribute a PR. But I'm not sure how much effort it will take

[michaellzc]

Hi @ndbroadbent

I am pretty new to all those config.

I did some research last night, and try out

• https://jestjs.io/docs/en/webpack#handling-static-assets
• and several other similar solutions

Unfortunately, none of them working.

I end up fallback to craco-less and write my own config. Everything is okay untill I added babel-plugin-import to the custom babel config, jest no longer works.

My temporary workaround is opt-out from babel-plugin-import in test environment. At this moment, I don't have time to look further to find out the root cause.

Note: the downside is we can't test styling from less anymore.

craco.config.js

const CracoLessPlugin = require('craco-less');

const ENV = process.env.NODE_ENV;

const babelPlugins = [
  [
    'babel-plugin-import',
    { libraryName: 'antd', libraryDirectory: 'es', style: true }
  ],
  [
    'babel-plugin-styled-components',
    { displayName: true }
  ]
];

const babelTestPlugins = [];

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          modifyVars: {
            '@primary-color': '#4a4a4a',
          },
          javascriptEnabled: true
        },
      },
    },
  ],
  babel: { plugins: ENV === 'test' ? babelTestPlugins : babelPlugins }
};

[ndbroadbent]

Hi everyone, I've created a test-app directory, and a puppeteer test that builds the production assets, serves them, opens up the page in Chrome, and checks that the CSS overrides are working properly. It also clicks a button to make sure that a counter state increments.

I've also reproduced this test issue when I run yarn test inside the test-app directory. (The puppeteer test works, but I get the import error for App.test.tsx.) Would be great to figure this out, but not too sure what's happening. I guess the less loader isn't being applied properly for the test env.

Some help would be appreciated, but I'll keep trying to figure it out!

[mankeheaven]

The save question troubles me. but it occurs from a react ui based antd. when i import my react antd ui,which is made as a package, some thing like this happend

({"Object.":function(module,exports,require,dirname,filename,global,jest){import '../../sty le/index.less'; then i found this can not be transformed in my esm.js file import 'antd/es/select/style';

[ndbroadbent]

Hi everyone, I just wanted to reiterate that I'm still looking for help with this issue, and a PR would be greatly appreciated!

I've just released craco-antd version 1.11.0, which depends on all the latest versions of craco and react-scripts.

It would be great if someone has the time to look at the test React/Antd app (under ./test-app), and help me to get the tests running. Thanks!

[YassineDM]

I had the same problem:

Test suite failed to run

    /Users/yassinedamil/code/YassineDM/libradiet/libradiet-app/node_modules/antd/es/spin/style/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../../style/index.less';
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

      10 | import PrivateRoute from '../shared/routes/PrivateRoute'
      11 | 
    > 12 | // The `useTranslation()` hook in children components
         | ^
      13 | // will trigger a `Suspense` if not ready.
      14 | export default () => (
      15 |   <Suspense fallback={<Spin tip="Loading..." />}>

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/components/app/App.jsx:12:1)

In craco.config.js:

const CracoAntDesignPlugin = require('craco-antd')

module.exports = {
    plugins: [{ plugin: CracoAntDesignPlugin }]
}

In package.json:

{
  "dependencies": {
    "@craco/craco": "^5.2.1",
    "antd": "^3.19.2",
    "craco-antd": "^1.11.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  }
}

Some help would be much appreciated...

[c-spencer]

This can be resolved by setting jest to transform any modules that need it, by adding it to the craco.config.js jest section:

  jest: {
    configure(config) {
      config.transformIgnorePatterns = [
        "/node_modules/(?!antd|rc-pagination|rc-calendar|rc-tooltip)/.+\\.js$",
      ];
      return config;
    },
  },

There might be a better solution, but this works for me, as it was just an extension of a fix I needed for the same issue with monaco-editor. I'm not sure if it can be fixed by default, as it relies on a config override callback, but it can at least be documented.

At this stage I'm just doing initial setup of antd, so caveat that I haven't actually seriously tested this beyond making sure my current simple tests pass! It's also a fairly blunt fix, as it means antd and deps needs to be transformed as part of tests, which can add a good 10+ seconds to the initial cycle.

[alistairjcbrown]

Has this issue been fixed now that PR #31 has landed and been released?

[AO19]

It works with lib users, but projects with es are experiencing the issue now...

This is a breaking change in the newest PR. There should be an option to use lib or es.

[vrunda-thacker]

I am using antd/es and unable to unit test using react-scripts any updates or help on this issue will be really welcome.

[aleks1001-equtyzen]

Testing w/o coverage works great. With --coverage breaks.

[n3ps]

transformIgnorePatterns

Curious why only function syntax works, not the object syntax?

configure: {
  transformIgnorePatterns: [...]
}

[JakeXu]

You have to add the following to your package.json :

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