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

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

  1. npm install --save-dev babel-jest babel-core@^7.0.0-0 @babel/core
  2. 在根目录创建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"]
        },
    }
};
  1. jest.config.js配置如下:
// jest.config.js
module.exports = {
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest",
  },
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  reporters: ["default"],
  
  collectCoverageFrom: [
    '/src/*.{js,jsx}'
  ],
  setupFilesAfterEnv:[
    "./node_modules/@tencent/dwt/dist/src/testbase/testbase.js",
    "/test-setup.js"
  ],
  moduleNameMapper: {
    'assets/images/.+?\\.svg$': '/test/__mocks__/svgMock.js',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ogg)$': '/test/__mocks__/fileMock.js',
    '\\.(css|less|scss)$': '/test/__mocks__/styleMock.js',
    '^@/(.*)$': '/src/$1'
  },
  coverageReporters: ["json", "lcov", "text", "clover"],
  transformIgnorePatterns: ["/node_modules/(?!(lodash-es|other-es-lib))"]
};

执行成功:
Jest encountered an unexpected token This usually means that you are trying to import a file which J_第1张图片

你可能感兴趣的:(jest)