mar*_*tee 6 javascript testing reactjs jestjs enzyme
使用 React + jest + Enzyme 运行测试时出现以下错误,请帮忙!
? 测试套件无法运行
TypeError:无法
在 Generator.throw (
E:/TEST-UI/node_modules/jsdom/lib/jsdom/browser/Window.js:498:51)
处设置未定义的属性 '_eventListeners' at Generator.throw ( )
错误很奇怪!甚至我尝试设置 jsdom 如下所示,但没有任何效果!
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
Run Code Online (Sandbox Code Playgroud)
下面是代码片段。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jsdom-global/register';
import "isomorphic-fetch";
Enzyme.configure({adapter: new Adapter()});
export * from 'enzyme';
Run Code Online (Sandbox Code Playgroud)
测试:
import React from "react";
import Notification from "./Notification";
import { shallow, mount, render } from 'enzyme';
import "src/config/jsdom.setup";
describe('<Notification />', () => {
test("always renders notificationCount", () => {
let wrapper = shallow(<Notification/>);
const divs = wrapper.find("div");
expect(divs.length).toBeGreaterThan(0);
});
});
Run Code Online (Sandbox Code Playgroud)
>
require('babel-register')();
const jsdom = require('jsdom').jsdom;
const exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach(property => {
if (typeof global[property] === 'undefined') {
exposedProperties.push(property);
global[property] = document.defaultView[property];
}
});
global.navigator = {userAgent: 'node.js'};
Run Code Online (Sandbox Code Playgroud)
package.json 片段:
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-polyfill": "^6.26.0",
"css-loader": "^0.28.11",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.5.0",
"jsdom": "^11.12.0",
"jsdom-global": "3.0.2",
"mini-css-extract-plugin": "^0.4.1",
"raw-loader": "^0.5.1",
"react-hot-loader": "^4.1.1",
"regenerator-runtime": "^0.12.1",
"style-loader": "^0.21.0",
"url-loader": "^1.1.1",
"webpack": "^4.19.1",
"webpack-cli": "^3.0.3",
"webpack-dev-server": "^3.1.4"
},
Run Code Online (Sandbox Code Playgroud)
对于 JSDOM,您是否应该指定您正在访问的 DOM 中的对象?您所在的位置global.document = jsdom('');可能会导致错误。您应该将其指向窗口还是文档?在这种情况下,节点模块是抛出错误的模块,通常是由于未正确实现或由于某些不兼容所致。在这种情况下我的猜测是前者。虽然我不知道有问题的库,但我对此类事情的经验告诉我,它可能没有正确实施。
我建议查看的另一件事是循环方法。当你可以轻松地做一个更简单的循环时,这样做Object.keys().forEach()看起来很混乱而且效率低下for——类似于:
for (let property in document.defaultView) {
if (document.defaultView.hasOwnProperty(property)) {
exposedProperties.push(property);
global[property] = document.defaultView[property];
}
}
Run Code Online (Sandbox Code Playgroud)