我正在使用我自己的小"虚拟浏览器"实用程序在jsdom下测试我的React组件.工作得很好,直到我努力setState.例如,在测试儿童年龄输入控制时:
describe('rendering according to the draft value', function () {
var component;
beforeEach(function () {
component = TestUtils.renderIntoDocument(
React.createElement(ChildrenInput, {value: []})
);
component.setState({draft: [{age: null}, {age: null}]}, done);
});
it('overrides the value property for the count', function () {
assert.strictEqual(component.refs.count.props.value, 2);
});
it('overrides the value property for the ages', function () {
assert.strictEqual(component.refs.age1.props.value, null);
});
});
...... setState我在线上:
未捕获错误:不变违规:dangerouslyRenderMarkup(...):无法在工作线程中呈现标记.确保window和document提供需要的时候进行单元测试或使用React.renderToString服务器渲染才反应过来全局.
我知道window并且document全局变量确实是由基于jsdom设置的TestBrowser,就像那样:
global.document …如何在一个页面中读localhost入无头的Jasmine规范,以便测试用例可以在DOM元素上工作？
我的Gulp任务成功运行Jasmine规范进行单元测试,现在我需要构建集成测试来验证所提供的完整网页localhost.我正在使用该gulp-jasmine-browser插件运行PhantomJS.
例:
gulpfile.js
var gulp = require('gulp');
var jasmineBrowser = require('gulp-jasmine-browser');
function specRunner() {
gulp.src(['node_modules/jquery/dist/jquery.js', 'src/js/*.js', 'spec/*.js'])
.pipe(jasmineBrowser.specRunner({ console: true }))
.pipe(jasmineBrowser.headless());
}
gulp.task('spec', specRunner);
规格/车,spec.js
describe('Cart component', function() {
it('displays on the gateway page', function() {
var page = loadWebPage('http://localhost/'); //DOES NOT WORK
var cart = page.find('#cart');
expect(cart.length).toBe(1);
});
});
没有loadWebPage()功能.这只是为了说明我认为需要的功能.
在我的Jest单元测试中,我正在使用ColorPicker渲染一个组件.该ColorPicker组件创建一个canvas对象和2d上下文,但返回'undefined'会引发错误"Cannot set property 'fillStyle' of undefined"
if (typeof document == 'undefined') return null; // Dont Render On Server
var canvas = document.createElement('canvas');
canvas.width = canvas.height = size * 2;
var ctx = canvas.getContext('2d'); // returns 'undefined'
ctx.fillStyle = c1; // "Cannot set property 'fillStyle' of undefined"
我遇到了麻烦,弄清楚为什么我无法获得二维背景.也许我的测试配置存在问题？
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/react-tools"
],
"moduleFileExtensions": [
"jsx",
"js",
"json",
"es6"
],
"testFileExtensions": [
"jsx"
],
"collectCoverage": true …因此,我很难使用React光纤门户为模态组件编写测试.因为我的模态安装到根目录上的<body />domNode但由于domNode不存在,测试失败.
一些代码,上下文:
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="modal-root"></div>
<div id="root"></div>
</body>
</html>
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Modal, ModalHeader } from './Modal';
class App extends Component {
constructor(props) {
super(props);
this.state = …我试着让node-jquery工作.contextify是其中一个依赖项(jsdom所需).
需要使用Python以某种方式构建上下文.但这似乎不适用于Windows 7 x64.至少一台我的电脑:)
一些读数(后#10,#12,#17),并试图通过此提供一些二进制叉,这一个我能得到它的工作...
我node-gyp configure从node-gyp rebuild(或npm install jquery)获得了相同的错误:
info it worked if it ends with ok
info downloading: http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz
info downloading: http://nodejs.org/dist/v0.6.14/x64/node.lib
info downloading: http://nodejs.org/dist/v0.6.14/node.lib
spawn python [ 'D:\\Users\\ngryman\\.node-gyp\\0.6.14\\tools\\gyp_addon',
'binding.gyp',
'-ID:\\Users\\ngryman\\build\\config.gypi',
'-f',
'msvs',
'-G',
'msvs_version=2010' ]
File "D:\Users\ngryman\.node-gyp\0.6.14\tools\gyp_addon", line 40
print 'Error running GYP'
^
SyntaxError: invalid syntax
ERR! Error: `gyp_addon` failed with exit …我正在使用Jest为使用canvas元素的组件编写测试.当我运行看起来像这样的测试时,我一直收到错误.
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
根据我的理解,Jest使用jsdom进行测试,如果安装了canvas或canvas预构建的包,jsdom与canvas兼容.
我尝试过安装这些软件包,但都没有解决错误.我认为唯一可能出错的是jsdom无法找到画布或画布预建包.有没有人知道一种方法来修复此错误或测试,以查看jsdom是否找到其他包？非常感谢!
在express.js中使用jsdom.jsdom()我创建了一个带有"base"布局标记的文档,并将一些客户端库(如jQuery)附加到其窗口.
只需要做一次这样的设置就好了.
问题是窗口文档的DOM将根据请求的URL而改变.有没有办法让每个请求从同一个缓存的窗口对象启动并增强它,还是必须在每次请求时从头开始设置？
由于我正在处理的应用程序的复杂性,我决定使用嵌套的redux容器,而不是将一个动作作为prop传递给子组件.然而,这已被证明渲染时要进行单元测试问题OuterContainer与jsdom与组合mocha,chai和sinon.
这是一个人为的视图结构示例:
<OuterContainer>
<div>
<InnerContainer />
</div>
</OuterContainer>
其中OuterContainer&InnerContainer被包裹着连接.例如:
export connect(<mapStateToProps>)(<Component>)
运行测试时,我得到的错误是:
Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a `<Provider>`, or explicitly pass "store" as a prop to "Connect(Component)".
有没有办法解开或存根InnerContainer单元测试而不必使用浅渲染？
所以我正在编写一些代码测试,在文档上添加一个click事件.我正在使用JSDom,ReactJS和Mocha/Chai设置.我在测试中尝试了以下代码:
document.addEventListener('click', function() {
console.log('test');
});
React.addons.TestUtils.Simulate.click(document);
//also tried React.addons.TestUtils.Simulate.click(document.body);
但是这段代码不会产生我期待的回声.
有没有办法用JSDom和ReactJS模拟文档上的click,keyup等？
UPDATE
对Nick说,我尝试将此代码添加到测试中:
document.body.addEventListener('click', function() {
console.log('test');
});
document.body.click();
直到我没有得到控制台日志输出.我不确定JSDom是否存在某些问题以及做这类事情.
如果我不能对这段代码进行单元测试,那很好,已经有一些我现在无法进行单元测试的代码(代码需要真正的DOM才能获得宽度,高度等等)但是我我希望能够对大部分代码进行单元测试(我对使用PhantomJS进行单元测试不感兴趣).我的集成测试将涵盖这种类型的代码.
UPDATE2
另一件需要注意的是,当我console.log(document);看到附加到_listeners属性的对象时click,我知道事件正在附加,它似乎似乎没有执行.
在查看了 Jest 问题和SO 答案后，我尝试了以下 4 个选项，但我遇到了 TypeScript 错误或运行时错误。我真的很想让选项 1 (spyOn) 工作。
// ------ option 1 -----
// Gives this runtime error: "Cannot spyOn on a primitive value; undefined given"
const writeText = jest.spyOn(navigator.clipboard, 'writeText');
// ------ option 2 -----
Object.defineProperty(navigator, 'clipboard', {
writeText: jest.fn(),
});
// ------ option 3 -----
// This is from SO answer but gives a TypeScript error
window.__defineGetter__('navigator', function() {
return {
clipboard: {
writeText: jest.fn(x => x)
}
}
})
// ------ option …jsdom ×10
javascript ×5
reactjs ×5
jestjs ×4
node.js ×2
canvas ×1
dom ×1
enzyme ×1
express ×1
html5-canvas ×1
jasmine ×1
jest-dom ×1
mocha.js ×1
phantomjs ×1
redux ×1
testing ×1
typescript ×1
unit-testing ×1