webpack 语法错误:React项目中出现意外的token 'export' Babel Jest

c3frrgcw  于 2023-05-23  发布在  Webpack
关注(0)|答案(1)|浏览(278)

我的React项目的单元测试有问题,它被配置为使用webpack编译,但是当执行单元测试时,他们给了我这个错误:

语法错误:意外的标记“export”

这是我的jest.config.js文件

const ignoreModulePatterns = ['query-string'].join('|');

const config = {
  verbose: true,
  testEnvironment: 'jsdom',
  moduleDirectories: ['node_modules'],
  coveragePathIgnorePatterns: ['/node_modules/'],
  transformIgnorePatterns: [`/node_modules/(?!${ignoreModulePatterns}).+\\.js$`],
  verbose: false,
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/file-mock.js',
    '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/style-mock.js',
    '\\.(html)$': '<rootDir>/__mocks__/html-mock.js',
    '^components(.*)$': '<rootDir>/src/components$1',
    '^services(.*)$': '<rootDir>/src/api/services$1',
    '^config(.*)$': '<rootDir>/src/config$1',
    '^images(.*)$': '<rootDir>/src/images$1',
    '^utils(.*)$': '<rootDir>/src/utils$1',
    '^root(.*)$': '<rootDir>$1',
    '^__mocks__(.*)$': '<rootDir>/__mocks__$1',
  },
  setupFilesAfterEnv: ['<rootDir>/__mocks__/setup-jest.js'],
};

module.exports = config;

这是我的babel.config.js文件

module.exports = function (api) {
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/preset-react',
  ];

  const plugins = ['@loadable/babel-plugin'];

  return {
    presets,
    plugins,
  };
};

Este es mi archivo setup-jest.js

const matchers = require('jest-extended');
expect.extend(matchers);

afterEach(() => {
  jest.useRealTimers();
});

这是我的setup-jest.js文件

{
  "exclude": ["node_modules", "build"],
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "scss/*": ["./src/scss/*"],
      "components/*": ["./src/components/*"],
      "services/*": ["./src/services/*"],
      "config/*": ["./src/config/*"],
      "images/*": ["./src/images/*"],
      "utils/*": ["./src/utils/*"]
    }
  }
}

在这里我也分享我的package.json

{
  "name": "resume",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^1.4.0",
    "dayjs": "^1.11.7",
    "html-react-parser": "^3.0.16",
    "i18next": "^22.4.15",
    "prop-types": "^15.8.1",
    "query-string": "^8.1.0",
    "react": "^16.6.0",
    "react-carousel-minimal": "^1.4.1",
    "react-dom": "^16.6.0",
    "react-i18next": "^12.2.0",
    "react-image-gallery": "^1.2.11",
    "react-router-dom": "^5.2.0",
    "sass": "^1.62.1",
    "uuid": "^9.0.0"
  },
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --mode development --host 0.0.0.0",
    "test": "jest --config=jest.config.js --no-cache --testResultsProcessor=\"jest-junit\"",
    "lint": "eslint .",
    "lint:fix": "eslint --fix",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/eslint-parser": "^7.21.3",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.4",
    "@loadable/babel-plugin": "^5.15.3",
    "babel-jest": "^29.5.0",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.1",
    "interpolate-html-plugin": "^4.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "jest-extended": "^3.2.4",
    "jest-junit": "^16.0.0",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss-loader": "^7.2.4",
    "postcss-preset-env": "^8.3.2",
    "prettier": "^2.8.8",
    "react-test-renderer": "^18.2.0",
    "sass-loader": "^13.2.2",
    "svg-inline-loader": "^0.8.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.81.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3"
  },
  "main": "index.html"
}

我看了很多文章和文档,但我不能解决它,我需要帮助:(
我希望我的单元测试运行时没有任何问题,或者至少是测试定义特定的问题,但是我遇到了这个错误:

SyntaxError: Unexpected token 'export'

    > 1 | import queryString from 'query-string';
        | ^
dffbzjpn

dffbzjpn1#

尝试像这样使用require import:

const queryString =  require('query-string');

相关问题