Jest babel setup SyntaxError:不能在模块外使用导入语句

时间:2021-05-26 15:17:09

标签: reactjs jestjs babeljs babel-jest

我试图在我的旧项目中设置 jest 并面临上述问题,它抛出

语法错误:不能在模块外使用导入

这是我要测试的组件

import React, { useEffect } from 'react';
import get from 'lodash.get';
import { PrimaryButton } from 'fk-cs-component'; // throws error on this lines

下面是我的jest.cofig.js

module.exports = {
    setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
    moduleNameMapper: {
        '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    },
    setupFiles: ['<rootDir>/setupTests.js'],
    roots: ['<rootDir>/src/Myntra'],
    collectCoverage: true,
    coveragePathIgnorePatterns: ['node_modules', '<rootDir>/src/testUtils'],
    // verbose: true,
    coverageThreshold: {
        global: {
            branches: 0,
            functions: 0,
            lines: 0,
            statements: 0,
        },
    },
    transform: {
        '\\.js$': '<rootDir>/node_modules/babel-jest',
        '\\.jsx$': '<rootDir>/node_modules/babel-jest',
    },
    transformIgnorePatterns: ['<rootDir>/node_modules', '/node_modules/*'],
    testRegex: '(/__tests__/.*|\\.(test|spec))\\.js$',
    moduleFileExtensions: ['js', 'jsx'],
};

这里是 babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                modules: 'auto',
            },
        ],
        '@babel/preset-react',
    ],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-export-namespace-from',
        '@babel/plugin-proposal-throw-expressions',
    ],
};

最后是 setupTests.js

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

package.json

{
  "devDependencies":{
        //other dependencies

        "@babel/plugin-proposal-export-default-from": "^7.12.13",
        "@babel/plugin-transform-runtime": "^7.14.3",
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-throw-expressions": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/polyfill": "^7.0.0-beta.51",
        "@babel/preset-env": "^7.0.0-beta.51",
        "@babel/preset-react": "^7.0.0-beta.51",
        "babel-core": "^7.0.0-bridge.0",
        "babel-eslint": "^8.2.3",
        "babel-jest": "^23.4.2",
        "classnames": "^2.2.5",
        "css-loader": "^0.26.1",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.6",
        "file-loader": "^0.9.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^26.6.3",
        "jest-css-modules": "^1.1.0",
   }

}

在您说这是其他票证的副本之前,我已经尝试了许多互联网上可用的解决方案,但有些解决方案对我不起作用。提前感谢您的帮助。

0 个答案:

没有答案