Unexpected Token - 现有 React + Web-pack 应用程序的玩笑

Question

我有一个简单的 React 应用程序。我正在尝试将 Jest（React 测试框架）配置到我现有的 react 应用程序中。当我尝试从 npm test 运行测试用例时，它给了我以下错误：

> openmrs-owa-built-in-reports@0.1.0 test D:\OpenMRS\OWA\openmrs-owa-built-in-reports
> jest

 FAIL  app\js\__tests__\reports\common\ReportAsTableView.test.js
  ● Test suite failed to run

    D:/OpenMRS/OWA/openmrs-owa-built-in-reports/app/js/__tests__/reports/common/ReportAsTableView.test.js: Unexpected token (14:16)
        12 |
        13 |         const rendered = renderer.create(
      > 14 |                 <ReportAsTableView reportUUID="e451ae04-4881-11e7-a919-92ebcb67fe33"
           |                 ^
        15 |                 reportParameters= {params} />
        16 |         );
        17 |         expect(rendered.toJSON()).toMatchSnapShot();

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.948s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

我的 React 应用是使用 webpack 捆绑的。如果有人能告诉我如何解决这个问题，我将不胜感激。

这是我的测试用例：

import React from 'react';
import renderer from 'react-test-renderer';
import ReportAsTableView from '../../../components/reports/common/ReportAsTableView';

describe('ReportAsTableView renders correctly ', () => {
    it('renders correctly', () => {
        const params = {
            "startDate": "2017-05-05",
            "endDate": "2017-10-05"
        };

        const rendered = renderer.create(
                <ReportAsTableView reportUUID="e451ae04-4881-11e7-a919-92ebcb67fe33" 
                reportParameters= {params} />
        );
        expect(rendered.toJSON()).toMatchSnapShot();
    });
});

下面是我的 package.json

{
  "name": "openmrs-owa-built-in-reports",
  "version": "0.1.0",
  "description": "built-in reports for reference application",
  "repository": {
    "type": "git",
    "url": "https://github.com/JudeNiroshan/openmrs-owa-openmrs-owa-built-in-reports"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "archiver": "^1.0.0",
    "babel-core": "^6.2.1",
    "babel-jest": "^20.0.3",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.16.0",
    "browser-sync": "^2.11.1",
    "browser-sync-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.24.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^20.0.4",
    "on-build-webpack": "^0.1.0",
    "raw-loader": "^0.5.1",
    "react-test-renderer": "^15.6.1",
    "regenerator-runtime": "^0.10.5",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.13",
    "yargs": "^4.3.1"
  },
  "scripts": {
    "clean": "rimraf dist && rimraf coverage*",
    "build": "npm run clean && webpack --progress --colors --mode=production --target=web",
    "build:dev": "npm run clean && webpack --progress --colors --mode=dev --target=web",
    "build:prod": "npm run test && npm run build",
    "build:deploy": "webpack --progress --colors --mode=deploy --target=web",
    "watch": "webpack --progress --colors --watch --mode=deploy --target=web",
    "test": "jest"
  },
  "keywords": [
    "OpenMRS",
    "Open",
    "Web",
    "App"
  ],
  "author": "JudeNiroshan",
  "license": "MPL-2.0",
  "jest": {
    "automock": false,
    "browser": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/js/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "./node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/js/__mocks__/fileTransformer.js"
    },
    "testEnvironment": "jsdom",
    "roots": [
      "./app/js/__tests__"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  }
}

我看到的与此问题类似的所有其他帖子都谈到了一个名为 babelrc 的文件。但是在我的项目中我找不到这样的文件。这是项目 -> link

Answer 1

您在 webpack config 中配置了 Babel，这仅适用于 webpack。当其他工具（例如 Jest）使用 Babel 时，他们不会看到该配置，因为他们不会查看 webpack 配置。你可以使用.babelrc 文件来配置 Babel，这将适用于运行 Babel 的任何东西（不仅仅是 webpack）。

使用.babelrc 通常是首选，因为您希望有一个通用的 babel 配置，如果您需要覆盖一个设置，您仍然可以在特定的应用程序中执行此操作，例如在 webpack 配置中。

创建以下.babelrc：

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

这样，您可以在 webpack 配置中删除 presets 选项，因为它将使用 .babelrc。请注意，cacheDirectory option 特定于 babel-loader，不用于配置底层 Babel。

您的测试中还有一个错字，toMatchSnapShot() 应该是 toMatchSnapshot()。

expect(rendered.toJSON()).toMatchSnapshot();