craco-antd: 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!

About this issue

Original URL
State: open
Created 5 years ago
Comments: 21 (6 by maintainers)

Commits related to this issue

Update test run to use transpiled library and not include styles This change uses AntD code from `lib/` instead of `es/`, using transpiled code as Jest will not transpile included code from `node_mod... — committed to alistairjcbrown/craco-antd by alistairjcbrown 4 years ago

Most upvoted comments

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.

+14

c-spencer on Jun 20, 2019

yea, just cloned your poc and tried some scenarios

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

mlg87 on Jan 4, 2019

transformIgnorePatterns

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

configure: {
  transformIgnorePatterns: [...]
}

n3ps on Jan 5, 2021

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

michaellzc on Feb 14, 2019

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.

AO19 on Jul 3, 2020