reactjs React应用:Jest遇到意外的令牌webpack类型脚本

kognpnkq  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(137)

我使用create-react-app命令创建了react应用程序。为了减少构建大小,我弹出了react应用程序。之后,我在webpack.config.js中添加了构建相关的配置。早期的测试用例运行良好。但现在测试用例抛出了错误,如意外令牌。
package.json:

"scripts": {
        "analyze": "source-map-explorer 'build/static/js/*.js'",
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js",
        "format": "prettier --write \"**/*.+(js|jsx|json|css|md|ts|tsx|scss)\"",
        "lint": "eslint .",
        "lint:fix": "eslint --fix ."
      },
    "jest": {
        "roots": [
          "<rootDir>/src"
        ],
        "collectCoverageFrom": [
          "src/**/*.{js,jsx,ts,tsx}",
          "!src/**/*.d.ts"
        ],
        "setupFiles": [
          "react-app-polyfill/jsdom"
        ],
        "setupFilesAfterEnv": [
          "<rootDir>/src/setupTests.ts"
        ],
        "testMatch": [
          "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
          "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
        ],
        "testEnvironment": "jest-environment-jsdom-fourteen",
        "transform": {
          "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
          "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
          "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js",
          "^.+\\.js?$": "babel-jest",
          "^.+\\.jsx|js?$": "babel-jest"
        },
        "transformIgnorePatterns": [
          "/node_modules/(?!@babel).+\\.js$"
        ],
        "modulePaths": [],
        "moduleNameMapper": {
          "^react-native$": "react-native-web",
          "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
        },
        "moduleFileExtensions": [
          "web.js",
          "js",
          "web.ts",
          "ts",
          "web.tsx",
          "tsx",
          "json",
          "web.jsx",
          "jsx",
          "node"
        ],
        "watchPlugins": [
          "jest-watch-typeahead/filename",
          "jest-watch-typeahead/testname"
        ]
      },
      "babel": {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ]
      }
    }
Error:
Test suite failed to run

    Jest encountered an unexpected token
  Details:

    SyntaxError: /Users/syam/APP_NEW/src/redux/models/ItemInfo.ts: Unexpected token (4:6)

      2 | 
      3 | class ItemInfo {
    > 4 |   name: string;
        |       ^
      5 |   age: string;
      6 |   id: string;
      7 |   city: string;

      at Object._raise (node_modules/@babel/parser/src/parser/location.js:233:45)
      at Object.raiseWithData (node_modules/@babel/parser/src/parser/location.js:228:17)
      at Object.raise (node_modules/@babel/parser/src/parser/location.js:212:17)
      at Object.unexpected (node_modules/@babel/parser/src/parser/util.js:151:16)
      at Object.parseClassMemberWithIsStatic (node_modules/@babel/parser/src/parser/statement.js:1442:12)
      at Object.parseClassMember (node_modules/@babel/parser/src/parser/statement.js:1266:10)
      at callback (node_modules/@babel/parser/src/parser/statement.js:1199:14)
      at Object.withTopicForbiddingContext (node_modules/@babel/parser/src/parser/expression.js:2386:14)
      at Object.parseClassBody (node_modules/@babel/parser/src/parser/statement.js:1176:10)
      at Object.parseClass (node_modules/@babel/parser/src/parser/statement.js:1136:22)
kknvjkwl

kknvjkwl1#

请尝试按照Jest指南中与TypeScript集成的部分和ts-jest文档中的基本用法部分进行操作。我没有jest或ts-jest的经验,但快速浏览一下,您的package.json配置似乎没有遵循这些文档中的设置。
正如最初的提问者在评论中所说的,如果他们使用create-app config运行测试用例,一切都正常,但是当他们弹出webpack时,一切都不正常,他们需要webpack相关的设置。

相关问题