gpt4 book ai didi

javascript - Unexpected Token - 现有 React + Web-pack 应用程序的 Jest

转载 作者:行者123 更新时间:2023-11-29 19:03:03 27 4
gpt4 key购买 nike

我有一个简单的 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

最佳答案

您在 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();

关于javascript - Unexpected Token - 现有 React + Web-pack 应用程序的 Jest,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45372145/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com