我正在为我的React代码编写Jest测试,并希望使用/测试PropType检查.我对Javascript世界很陌生.我正在使用npm进行安装react-0.11.2并有一个简单的:
var React = require('react/addons');
在我的测试中.我的测试看起来非常类似于jest/react教程示例,其代码如下:
var eventCell = TestUtils.renderIntoDocument(
<EventCell
slot={slot}
weekId={weekId}
day={day}
eventTypes={eventTypes}
/>
);
var time = TestUtils.findRenderedDOMComponentWithClass(eventCell, 'time');
expect(time.getDOMNode().textContent).toEqual('19:00 ');
但是,似乎EventCell没有触发组件中的PropType检查.我知道检查只在开发模式下运行,但后来我也认为react通过npm给你开发版本.当我使用watchify构建组件时,检查会在浏览器中触发.
我错过了什么？
我正在使用我自己的小"虚拟浏览器"实用程序在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 …我希望能够使用reactjs模拟用户在文本框中键入内容,以便我可以测试我的验证状态消息.
我有一个在keyUp上验证的react组件
以下是我尝试过的一个简单示例.
nameInput.props.value = 'a';
React.addons.TestUtils.Simulate.keyUp(nameInput);
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');
当我在验证器中调试时,这似乎不会更改绑定文本框的值
React.addons.TestUtils.Simulate.keyUp(nameInput, {key: 'a'});
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');
这也不是.
有人能指出我在正确的轨道上,第二个内容是我可以在模拟(http://facebook.github.io/react/docs/test-utils.html)周围找到的文档,第一个对我有意义(设置实际的文本框值,然后伪造一个事件)
https://github.com/JedWatson/react-select
我想使用React-Select react组件,但我需要添加测试.
我已经尝试了谷歌发现的几个选项,但似乎没有任何效果.我有下面的代码,但它不会导致更改事件.我已经能够添加一个焦点事件,它增加了'is-focusedsed'类,但'is-open'类仍然缺失.
我用过:https://github.com/JedWatson/react-select/blob/master/test/Select-test.js作为参考
我曾尝试仅在输入字段上使用更改事件,但这也没有帮助.我注意到有一个onInputChange={this.change}选择.
测试
import Home from '../../src/components/home';
import { mount } from 'enzyme'
describe('Home', () => {
it("renders home", () => {
const component = mount(<Home/>);
// default class on .Select div
// "Select foobar Select--single is-searchable"
const select = component.find('.Select');
// After focus event
// "Select foobar Select--single is-searchable is-focussed"
// missing is-open
TestUtils.Simulate.focus(select.find('input'));
//this is not working
TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 40, key: 'ArrowDown' });
TestUtils.Simulate.keyDown(select.find('.Select-control'), { keyCode: 13, …我有一个带有3个单选按钮的表单,如下(假名):
<form className="myForm" onSubmit={this.done}>
<input className="myRadio" checked={?rue} type="radio" name="myRadio" onChange={this.change} value="value1"
<input className="myRadio" type="radio" name="myRadio" onChange={this.change} value="value2"
<input className="myRadio" type="radio" name="myRadio" onChange={this.change} value="value3"
<input type="submit" className="submit" />
</form>
我正在努力测试onChange和onSubmit事件.
inputs = TestUtils.scryRenderedDOMComponentsWithClass(MyComponentRendered, 'myRadio');
myForm = TestUtils.findRenderedDOMComponentWithClass(MyComponentRendered, 'myForm');
我有一个测试:
it("changes the checked state when clicked", function() {
MyComponent.change = jest.genMockFunction();
expect(inputs[0].getDOMNode().checked).toBe(true);
TestUtils.Simulate.change(inputs[1], {target: {value: 'value2'}});
expect(inputs[0].getDOMNode().checked).toBe(false);
expect(inputs[1].getDOMNode().checked).toBe(true);
expect(inputs[2].getDOMNode().checked).toBe(false);
expect(MyComponent.change).toBeCalled(); //Fails
expect(MyComponent.change.mock.calls.length).toBe(1); //Fails too
});
除了应该调用的函数(MyComponent.change)之外,它是有效的,但它不是.
我对onSubmit也有一个测试:
it("saves on submit", function()
MyComponent.done = jest.genMockFunction();
MyComponent.insideDone = jest.genMockFunction();
TestUtils.Simulate.submit(myForm);
expect(MyComponent.done).toBeCalled(); //Fails
expect(MyComponent.insideDone).toBeCalled(); //Success …我有以下React组件,我想在我的select-block中选择一个带有TestUtils的selectElements.我怎么做？
var selectElements = ["type_a", "type_b"];
var SelectElement = React.createClass({
render: function() {
return (
<option value={this.props.type}>{this.props.type}</option>
);
}
});
var MyForm = React.createClass({
handleSubmit: function(e) {
console.log("submitted");
},
render: function () {
var selectElements = this.props.availableTypes.map(function (type) {
return (
<SelectElement key={type} type={type} />
);
});
return (
<form role="form" onSubmit={this.handleSubmit}>
<select ref="type" name="type">
<option value="">-- Choose --</option>
{selectElements}
</select>
<input type="submit" value="Search"/>
</form>
);
}
});
我已经尝试过这样做了:
var myFormComponent = TestUtils.renderIntoDocument(<MyForm selectElements={selectElements} />);
var form = TestUtils.findRenderedDOMComponentWithTag(myFormComponent, 'form'); …我有一个具有以下渲染效果的组件:
render: function() {
<input
type="file"
name: this.props.name,
className={this.props.className}
onChange={this.props.handleChange}
accept={this.props.accept}/>
}
State由一个容器管理,该容器使用jquery AJAX调用上传文件服务器端:
getInitialState: function() {
return {
uploaded: false
};
}
handleChange: function(event) {
event.preventDefault();
var file = event.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
var self = this;
reader.onload = function(e) {
var content = e.target.result;
var a = $.ajax({
type: 'PUT',
url: 'http://localhost:8080/upload',
contentType: 'application/json',
dataType: "json",
data: JSON.stringify({
"input": content
})
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("ERROR WHEN UPLOADING"); …考虑React组件中的以下输入元素:
<input onChange={() => console.log('onChange')} ... />
在测试React组件时,我正在模拟用户更改输入值:
input.value = newValue;
TestUtils.Simulate.change(input);
这会导致'onChange'按预期记录.
但是,当'change'直接调度事件时(我正在使用jsdom):
input.value = newValue;
input.dispatchEvent(new Event('change'));
该onChange处理器不叫.
为什么？
我使用的动机dispatchEvent不是TestUtils.Simulate因为TestUtils.Simulate不支持事件冒泡而且我的组件的行为依赖于此.我想知道是否有办法测试事件没有TestUtils.Simulate？
在JEST for React文件中编写测试用例时,我收到此错误.以下是我的示例代码:
search_basr_test.js
jest.autoMockOff();
global.React = require('react/addons');
jest.setMock('../stores/browser_store.jsx');
beforeEach(function() {
var search_bar = require('../components/search_bar.jsx');
});
var TestUtils = React.addons.TestUtils;
describe("Test", function() {
it("should render Test", function() {
var test = TestUtils.renderIntoDocument(<search_bar/>);
expect(test).toBeDefined();
});
it("renders a list in a box with proper CSS classes", function() {
var test = TestUtils.renderIntoDocument(<search_bar/>);
let box = TestUtils.findRenderedDOMComponentWithTag(test, "div");
expect(box.className).toEqual("sidebar__collapse");
});
});
search_bar.jsx
return (
<div>
<div
className='sidebar__collapse'
onClick={this.handleClose}
>
<span className='fa fa-angle-left'></span>
</div>
<span
className='search__clear'
onClick={this.clearFocus}
>
{'Cancel'}
</span>
}
有谁在那里帮我解决这个问题？
我的组件中有以下代码
var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
我在组件中使用d3js并渲染图形.但是当我运行测试时,有任何svg标签.我认为它发生是因为所有rect的字段等于0.
这是浏览器中console.log(rect)的输出:
ClientRect {top:89,right:808,bottom:689,left:8,width:800 ...}
当我运行测试时:
{bottom:0,height:0,left:0,right:0,top:0,width:0}
那么有没有办法设置元素的大小？
reactjs ×10
jestjs ×4
javascript ×2
mocha.js ×2
testing ×2
unit-testing ×2
fs ×1
jsdom ×1
node.js ×1
react-select ×1