Jest encountered an unexpected token This usually means that you are trying to import a file which J

最新推荐文章于 2024-03-06 14:23:40 发布

de_la_prada

最新推荐文章于 2024-03-06 14:23:40 发布

阅读量6.8k

点赞数 1

分类专栏： jest 文章标签：单元测试 javascript node.js

本文链接：https://blog.youkuaiyun.com/weixin_41973410/article/details/107408506

版权

jest 专栏收录该内容

2 篇文章

订阅专栏

在配置Jest时碰到错误提示'Jest encountered an unexpected token'。问题根源可能是尝试导入不被Jest理解的文件。解决方案包括安装babel-jest, babel-core以及@babel/core的最新版本，并创建babel.config.js进行相应配置。执行这些步骤后，问题应得到解决。" 111313088,7588619,Java编程：类、变量、重载与关键字详解,"['Java', '编程基础', '面向对象', '关键字']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置jest的时候出现了rt问题，解决方案：

npm install --save-dev babel-jest babel-core@^7.0.0-0 @babel/core
在根目录创建babel.config.js：

module.exports = {
    plugins: [
        '@babel/plugin-proposal-class-properties',
        "babel-plugin-styled-components",
        "@babel/plugin-syntax-dynamic-import"
    ],
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
    ],
    env: {
        development: {
            plugins: [
            	// 加上这个plugin可以免去引入antd全局样式这一步
                ['import-separation', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
                '@babel/plugin-transform-runtime',
                // react热更新所需要的babel
                'react-hot-loader/babel',
                "@babel/plugin-proposal-class-properties",
                ["babel-plugin-styled-components", { "displayName": true }],
                "@babel/plugin-syntax-dynamic-import"
            ],
            presets: ["@babel/preset-env", "@babel/preset-react"]
        },
        production: {
            plugins: [
                ['import-separation', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
                '@babel/plugin-transform-runtime',
                'react-hot-loader/babel',
                "@babel/plugin-proposal-class-properties",
                "babel-plugin-styled-components",
                "@babel/plugin-syntax-dynamic-import"
            ],
            presets: ["@babel/preset-env", "@babel/preset-react"]
        },
        /**
         * test环境下不能配置import-separation @babel/plugin-transform-runtime react-hot-loader三种plugin
         * 否则测试会出错：SyntaxError: Cannot use import statement outside a module
         */
        test: {
            plugins: [
                "@babel/plugin-proposal-class-properties",
                ["babel-plugin-styled-components", { "displayName": true }],
                "@babel/plugin-syntax-dynamic-import"
            ],
            presets: ["@babel/preset-env", "@babel/preset-react"]
        },
    }
};

jest.config.js配置如下：

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest",
  },
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  reporters: ["default"],
  
  collectCoverageFrom: [
    '<rootDir>/src/*.{js,jsx}'
  ],
  setupFilesAfterEnv:[
    "./node_modules/@tencent/dwt/dist/src/testbase/testbase.js",
    "<rootDir>/test-setup.js"
  ],
  moduleNameMapper: {
    'assets/images/.+?\\.svg$': '<rootDir>/test/__mocks__/svgMock.js',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ogg)$': '<rootDir>/test/__mocks__/fileMock.js',
    '\\.(css|less|scss)$': '<rootDir>/test/__mocks__/styleMock.js',
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  coverageReporters: ["json", "lcov", "text", "clover"],
  transformIgnorePatterns: ["<rootDir>/node_modules/(?!(lodash-es|other-es-lib))"]
};

执行成功：
在这里插入图片描述