Does not work with jest

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!

[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.

[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'