Jest: test failed with "SyntaxError: Unexpected string" when using antd

[Xooone47]

jest config file:

module.exports = {
    setupFiles: ['<rootDir>/src/__test__/setup.js'],
    moduleFileExtensions: ['js', 'jsx'],
    testPathIgnorePatterns: ['/node_modules/'],
    testRegex: '.*\\.test\\.js$',
    collectCoverage: true,
    collectCoverageFrom: ['src/components/**/*.{js}'],
    coverageDirectory: 'coverage'
}

.babelrc:

{
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread",
        "react-require",
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            }
        ],
        [
            "react-transform",
            {
                "transforms": [
                    {
                        "transform": "react-transform-hmr",
                        "imports": [
                            "react"
                        ],
                        "locals": [
                            "module"
                        ]
                    }
                ]
            }
        ],
        [
            "@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ],
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

react file:

import {useState} from 'react';
import {Button} from 'antd';

const Counter = ({defaultCount = 0}) => {
    const [count, setCount] = useState(defaultCount);

    function handleAdd() {
        setCount(count + 1);
    }

    function handleSubtract() {
        setCount(count - 1);
    }

    return (
        <div>
            <div>Count：{count}</div>
            <Button onClick={handleAdd}>+</Button>
            <Button onClick={handleSubtract}>-</Button>
        </div>
    );
};

export default Counter;

tests run successfully when going without 'Button' of antd

wondering why, thx

ps：babel@7，[email protected]

[Xooone47]

fixed this by disabling babel-import-plugin in test env

[yanlee26]

antd's bug Obviously!

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../../style/index.css'; ^^^^^^^^^^^^^^^^^^^^^^^ SyntaxError: Unexpected string

[yanlee26]

I fixed it by updating the CRA "react-scripts": "^3.0.1",

[webel]

I've spent the best part of my whole workday trying to figure out how to get this to jam, disabling babel-import-plugin doesn't work for me, neither does creating a custom transformer with babel-jest, no go with transformIgnorePatterns... I'm in a lerna monorepo, transpiling with babel and trying to import antd components.

[bidva]

have a react component using antd on it and have the same error,
none of these didn't work:

1. downgrading babel-jest
2. react-scripts as my component is not CRA
3. mocking-css-modules

anyone knows how to fix this.

[fobbyal]

@bidva try chaning

        "react-require",
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            }
        ],

to

        "react-require",
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "lib",
                "style": "css"
            }
        ],

[bidva]

@fobbyal still no chance to run it

[arvinsim]

Getting the same error here. I am not sure if this is a jest issue or an antd issue.

[fobbyal]

@bidva @arvinsim sorry for the delay here is an example that works with ejected create-react-app. You should be able to dig into the commit history to figure out what was done. Let me know if you have more issues. https://github.com/fobbyal/antd-jest-issue

[arvinsim]

@fobbyal Does it require ejecting? Unfortunately, ejecting is not an option for the team right now.

[fobbyal]

@arvinsim It doesn't really REQUIRE rejecting... but you do have to add rules in webpack and plugins in babel config i believe you can achieve this by using https://github.com/timarney/react-app-rewired but i have not tried that myself

[Jeff-Tian]

@bidva try chaning

        "react-require",
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            }
        ],

to

        "react-require",
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "lib",
                "style": "css"
            }
        ],

This works like a charm!

@fobbyal Could you please explain why this works? Thanks!

[SimenB]

Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

Feel free to keep discussing here of course