意外令牌-现有React + Web-pack应用的笑话

问题描述

我有一个简单的React应用程序.我正在尝试将Jest(React的测试框架)配置为我现有的React应用程序.当我尝试从npm test运行测试用例时，它给了我以下错误:

I have a simple React app. I am trying to configure Jest(Testing framework for React) to my existing react app. When I try to run the test cases from npm test, it gives me the following error:

> [email protected] 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捆绑的.如果有人能告诉我如何解决这个问题，我将非常感激.

My React app is bundled using webpack. I will be much thankful if anyone could tell me how to solve this problem.

这是我的测试用例:

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

Below is my 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的文件.但是在我的项目中，我找不到这样的文件.这是项目-> 链接

All other posts I've seen similar to this problem talks about a file named as babelrc. But in my project I couldn't find such a file. Here is the project -> link

推荐答案

您在 webpack配置，这仅适用于webpack.当其他工具(例如Jest)使用Babel时，他们不会看到该配置，因为他们没有查看webpack配置.您可以使用 .babelrc 文件来配置Babel，这将适用于任何运行的文件Babel(不仅仅是webpack).

You configured Babel in your webpack config and this will only apply to webpack. When other tools, like Jest, use Babel, they won't see that configuration because they don't look at the webpack config. You can use a .babelrc file to configure Babel and that will apply to anything that runs Babel (not just webpack).

通常首选使用.babelrc，因为您希望具有常规的babel配置，并且如果需要覆盖设置，仍可以在特定的应用程序中进行设置，例如webpack配置.

Using a .babelrc is usually preferred as you want to have a general babel config, and if you need to override a setting, you can still do that in the specific application like in the webpack config.

创建以下.babelrc:

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

这样，您可以在webpack配置中删除presets选项，因为它将使用.babelrc.请注意， cacheDirectory选项特定于babel-loader，并且不习惯于配置基础Babel.

With that, you can remove the presets option in your webpack config because it will use the .babelrc. Note that the cacheDirectory option is specific to babel-loader and is not used to configure the underlying Babel.

您的测试中也有错字，toMatchSnapShot()应该为 toMatchSnapshot() .

You also have a typo in your test, toMatchSnapShot() should be toMatchSnapshot().

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

这篇关于意外令牌-现有React + Web-pack应用的笑话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！