如何将Jest添加到Parcel.js内置的React应用中

时间:2018-08-08 19:44:54

标签: javascript reactjs babeljs jestjs babel-jest

我有一个用parcel.js构建的React App。我已经添加了Jest,并且正在尝试运行基本测试,但是在进行测试Jest encountered an unexpected token之前,似乎代码没有进行转换。

我不确定Parcel.js的部分是否是红色鲱鱼,但这与那里的示例有些不同。

package.json

{
"name": "cool-tool",
"version": "1.0.0",
"description": "cool tool",
"main": "public/main.js",
"directories": {
"test": "tests"
},
"dependencies": {
 "react": "^16.4.1",
 "react-dom": "^16.4.1"
},
"devDependencies": {
 "babel-cli": "^6.26.0",
 "babel-jest": "^23.4.2",
 "babel-preset-env": "^1.7.0",
 "babel-preset-react": "^6.24.1",
 "jest": "^23.4.2",
 "parcel-bundler": "^1.9.7",
 "react-test-renderer": "^16.4.2"
},
"scripts": {
 "test": "jest --debug",
 "start": "parcel watch assets/js/troubleshooting.js --out-dir public/js",
 "build": "parcel build assets/js/troubleshooting.js --out-dir public/js"
},
"jest": {
 "testEnvironment": "node"
},
"repository": {
"type": "git",
"url": "shhhh.git"
},
"author": "me",
"license": "ISC"
}

babel.rc

{
  "presets": ["env", "react"]
}

最好使用--debug选项

    {
  "configs": [
      {
        "automock": false,
        "browser": false,
        "cache": true,
        "cacheDirectory": "/var/folders/v4/0kv69mcn5530g0gshbwwqfgr0000gn/T/jest_dx",
        "clearMocks": false,
        "coveragePathIgnorePatterns": [
        "/node_modules/"
        ],
        "detectLeaks": false,
        "detectOpenHandles": false,
        "errorOnDeprecated": false,
        "filter": null,
        "forceCoverageMatch": [],
        "globals": {},
        "haste": {
        "providesModuleNodeModules": []
        },
        "moduleDirectories": [
        "node_modules"
        ],
        "moduleFileExtensions": [
        "js",
        "json",
        "jsx",
        "node"
        ],
        "moduleNameMapper": {},
        "modulePathIgnorePatterns": [],
        "name": "6f41d9651941a1101334b070800aeec1",
        "prettierPath": null,
        "resetMocks": false,
        "resetModules": false,
        "resolver": null,
        "restoreMocks": false,
        "rootDir": "/Users/me/Projects/coolproject",
        "roots": [
        "/Users/me/Projects/coolproject"
        ],
        "runner": "jest-runner",
        "setupFiles": [
        "/Users/me/Projects/coolproject/node_modules/regenerator-runtime/runtime.js"
        ],
        "setupTestFrameworkScriptFile": null,
        "skipFilter": false,
        "snapshotSerializers": [],
        "testEnvironment": "/Users/me/Projects/coolproject/node_modules/jest-environment-node/build/index.js",
        "testEnvironmentOptions": {},
        "testLocationInResults": false,
        "testMatch": [
        "**/__tests__/**/*.js?(x)",
        "**/?(*.)+(spec|test).js?(x)"
        ],
        "testPathIgnorePatterns": [
        "/node_modules/"
        ],
        "testRegex": "",
        "testRunner": "/Users/me/Projects/coolproject/node_modules/jest-jasmine2/build/index.js",
        "testURL": "about:blank",
        "timers": "real",
        "transform": [
        [
          "^.+\\.jsx?$",
          "/Users/me/Projects/coolproject/node_modules/babel-jest/build/index.js"
        ]
        ],
        "transformIgnorePatterns": [
        "/node_modules/"
        ],
        "watchPathIgnorePatterns": []
      }
    ],
    "globalConfig": {
    "bail": false,
    "changedFilesWithAncestor": false,
    "collectCoverage": false,
    "collectCoverageFrom": null,
    "coverageDirectory": "/Users/me/Projects/coolproject/coverage",
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "coverageThreshold": null,
    "detectLeaks": false,
    "detectOpenHandles": false,
    "errorOnDeprecated": false,
    "expand": false,
    "filter": null,
    "globalSetup": null,
    "globalTeardown": null,
    "listTests": false,
    "maxWorkers": 7,
    "noStackTrace": false,
    "nonFlagArgs": [],
    "notify": false,
    "notifyMode": "always",
    "passWithNoTests": false,
    "projects": null,
    "rootDir": "/Users/me/Projects/coolproject",
    "runTestsByPath": false,
    "skipFilter": false,
    "testFailureExitCode": 1,
    "testPathPattern": "",
    "testResultsProcessor": null,
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": null,
    "watch": false,
    "watchman": true
  },
  "version": "23.4.2"
}

1 个答案:

答案 0 :(得分:1)

我希望这个答案对其他一些骨头人有所帮助。我将babel配置文件命名为babel.rc,而不是.babelrc。第二个是正确的。