Javascript Jest在react中导入新库时遇到意外标记
错误1的屏幕截图 错误2的屏幕截图 app.test.js：Javascript Jest在react中导入新库时遇到意外标记,javascript,reactjs,testing,jestjs,Javascript,Reactjs,Testing,Jestjs,错误1的屏幕截图 错误2的屏幕截图 app.test.js： import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<App />, div); Reac
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
jest{
"name": "x5_r_app",
"jest": {
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\](?!(@amcharts)\\/).+\\.js$"
]
},
"version": "0.1.0",
"private": true,
"dependencies": {
"@amcharts/amcharts4": "^4.2.4",
"@fortawesome/fontawesome-free": "^5.7.1",
"@fortawesome/fontawesome-svg-core": "^1.2.12",
"@fortawesome/free-solid-svg-icons": "^5.6.3",
"@fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"bootstrap": "^4.2.1",
"faker": "^4.1.0",
"jest-cli": "^24.5.0",
"jest-puppeteer": "^4.1.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"puppeteer": "^1.13.0",
"react": "^16.7.0",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
{
“名称”：“x5\u r\u应用程序”，
“笑话”：{
“transformIgnorePatterns”：[
“[/\\\\]节点\单元模块[/\\\]（？！（@amcharts）\\\/）。+\.js$”
]
},
“版本”：“0.1.0”，
“私人”：没错，
“依赖项”：{
“@amcharts/amcharts4”：“^4.2.4”，
“@fortawesome/fontawesome免费”：“^5.7.1”，
“@fortawesome/fontawesome svg core”：“^1.2.12”，
“@fortawesome/free实心svg图标”：“^5.6.3”，
“@fortawesome/react-fontawesome”：“^0.1.3”，
“axios”：“^0.18.0”，
“引导”：“^4.2.1”，
“伪造者”：“^4.1.0”，
“jest cli”：“^24.5.0”，
“开玩笑的木偶演员”：“^4.1.0”，
“时刻”：“^2.23.0”，
“节点sass”：“^4.11.0”，
“木偶演员”：“^1.13.0”，
“反应”：“^16.7.0”，
“react引导”：“^1.0.0-beta.5”，
“react bootstrap typeahead”：“^3.2.4”，
“反应日期时间”：“^2.16.3”，
“反应去盎司输入”：“^3.2.0”，
“react dom”：“^16.7.0”，
“反应路由器dom”：“^4.3.1”，
“反应脚本”：“2.1.2”，
“反应选择”：“^2.3.0”，
“reactstrap”：“^7.0.2”，
“rxjs”：“^6.3.3”，
“scss”：“^0.2.4”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：[
">0.2%",
“没有死”，
“不是ie安装软件包babel jest amcharts
npm install --D babel-jest-amcharts
在Jest
config下添加以下内容：
"transform": {
"^.+\\.(js|jsx)$": "babel-jest-amcharts"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\](?!(@amcharts)\\/).+\\.(js|jsx|ts|tsx)$"
]
这应该可以解决问题
此处完整的工作测试示例参考：
测试文件
import React from "react";
import ReactDOM from "react-dom";
import { PieChart } from "@amcharts/amcharts4/charts";
import AmCharts4Wrapper from "./index";
class SVGPathElement extends HTMLElement {}
window.SVGPathElement = SVGPathElement;
describe("AmCharts4Wrapper", () => {
const config = {
series: [
{
type: "PieSeries",
dataFields: {
value: "litres",
category: "country"
}
}
],
data: [
{
country: "Lithuania",
litres: 501.9
},
{
country: "Czech Republic",
litres: 301.9
}
]
};
test("Whether it renders", () => {
const div = document.createElement("div");
document.body.appendChild(div);
ReactDOM.render(
<AmCharts4Wrapper
config={config}
id="amcharts-4"
chartTypeClass={PieChart}
/>,
div
);
});
});
从“React”导入React；
从“react dom”导入react dom；
从“@amcharts/amcharts4/charts”导入{PieChart}”；
从“/index”导入AmCharts4Wrapper；
类svgpatheElement扩展了HtmleElement{}
window.SVGPathElement=SVGPathElement；
描述（“AmCharts4Wrapper”，（）=>{
常量配置={
系列：[
{
类型：“馅饼系列”，
数据字段：{
价值：“升”，
类别：“国家”
}
}
],
数据：[
{
国家：“立陶宛”，
升：501.9
},
{
国家：“捷克共和国”，
升：301.9
}
]
};
测试（“是否呈现”，（）=>{
const div=document.createElement（“div”）；
文件.正文.附件（div）；
ReactDOM.render(
,
div
);
});
});
注意：AmCharts4Wrapper是使用Amcharts的react组件
@Abhishek是对的，为我工作，谢谢你！：）我不得不为create react应用程序创建一个jest.config.js，但没有弹出它，我想这可能会对某些人有所帮助，这里有一个脚本将其转储到屏幕上，然后按照上面的说明操作：
const jestConfig = require("react-scripts/scripts/utils/createJestConfig.js")
const resolve = (path) => {
return "./node_modules/" + path
}
let actualConfig = jestConfig(resolve, ".", false)
console.log("actualConfig = ", actualConfig)
这是我的完整配置，它在相当标准的create-react应用程序中运行了一段时间，可以只运行jest--no-cache-w2
// jest.config.js
const {defaults} = require('jest-config');
module.exports = {
collectCoverageFrom: [ 'src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts' ],
setupFiles: [
'<rootDir>/node_modules/react-app-polyfill/jsdom.js'
],
setupFilesAfterEnv: [],
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/react-scripts/config/jest/babelTransform.js',
'^.+\\.css$': '<rootDir>/node_modules/react-scripts/config/jest/cssTransform.js',
'^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js',
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest-amcharts"
},
transformIgnorePatterns: [
// '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
'^.+\\.module\\.(css|sass|scss)$',
"[/\\\\]node_modules[/\\\\](?!(@amcharts)\\/).+\\.(js|jsx|ts|tsx)$"
],
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' ],
rootDir: '.',
globalSetup: './Setup.test.js'
}
//jest.config.js
const{defaults}=require（'jest-config'）；
module.exports={
collectCoverageFrom:['src/***.{js，jsx，ts，tsx}'，'！src/***.d.ts']，
设置文件：[
“/node_modules/react app polyfill/jsdom.js”
],
SetupFileAfterEnv:[]，
测试匹配：[
“/src/**/\\\\\\\/**.{js，jsx，ts，tsx}”，
“/src/***.{spec，test}.{js，jsx，ts，tsx}”
],
TestenEnvironment:'jest environment jsdom十四'，
转换：{
“^.+\.（js | jsx | ts | tsx）$”：“/node_modules/react scripts/config/jest/babelttransform.js”，
“^.+\.css$”：“/node\u modules/react scripts/config/jest/cstransform.js”，
“^（？。*\”（js | jsx | ts | tsx | css | json）$）：“/node_modules/react scripts/config/jest/fileTransform.js”，
“^.+\.（js|jsx）$”：“/node\u modules/babel jest amcharts”
},
转换信号模式：[
//“[/\\\\\]节点单元模块[/\\\\].+\\.（js | jsx | ts | tsx）$”，
“^.+\\.模块\（css | sass | scss）$”，
“[/\\\\\]节点单元模块[/\\\]（？！（@amcharts）\\\/）.+\\.（js | jsx | ts | tsx）$”
],
模块路径：[]，
模块映射：{
“^react native$”：“react native web”，
“^.+\\.module\\.（css | sass | scss）$”：“标识obj代理”
},
moduleFileExtensions：[
“web.js”、“js”，
‘web.ts’、‘ts’，
'web.tsx'、'tsx'，
“json”、“web.jsx”，
“jsx”，“节点”
],
watchPlugins:['jest-watch-typeahead/filename'，'jest-watch-typeahead/testname']，
rootDir:“.”，
globalSetup:“./Setup.test.js”
}
看来您必须配置jest设置。@JimboSlice我已经更新了指南中的package.json，但此处的ErrorsName问题没有任何更改，即使在@JimboSlice建议的更改之后仍然是相同的错误。您能够解决它吗？您是否也在使用create react应用程序？
import React from "react";
import ReactDOM from "react-dom";
import { PieChart } from "@amcharts/amcharts4/charts";
import AmCharts4Wrapper from "./index";
class SVGPathElement extends HTMLElement {}
window.SVGPathElement = SVGPathElement;
describe("AmCharts4Wrapper", () => {
const config = {
series: [
{
type: "PieSeries",
dataFields: {
value: "litres",
category: "country"
}
}
],
data: [
{
country: "Lithuania",
litres: 501.9
},
{
country: "Czech Republic",
litres: 301.9
}
]
};
test("Whether it renders", () => {
const div = document.createElement("div");
document.body.appendChild(div);
ReactDOM.render(
<AmCharts4Wrapper
config={config}
id="amcharts-4"
chartTypeClass={PieChart}
/>,
div
);
});
});
const jestConfig = require("react-scripts/scripts/utils/createJestConfig.js")
const resolve = (path) => {
return "./node_modules/" + path
}
let actualConfig = jestConfig(resolve, ".", false)
console.log("actualConfig = ", actualConfig)
// jest.config.js
const {defaults} = require('jest-config');
module.exports = {
collectCoverageFrom: [ 'src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts' ],
setupFiles: [
'<rootDir>/node_modules/react-app-polyfill/jsdom.js'
],
setupFilesAfterEnv: [],
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/react-scripts/config/jest/babelTransform.js',
'^.+\\.css$': '<rootDir>/node_modules/react-scripts/config/jest/cssTransform.js',
'^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js',
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest-amcharts"
},
transformIgnorePatterns: [
// '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
'^.+\\.module\\.(css|sass|scss)$',
"[/\\\\]node_modules[/\\\\](?!(@amcharts)\\/).+\\.(js|jsx|ts|tsx)$"
],
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' ],
rootDir: '.',
globalSetup: './Setup.test.js'
}