问题描述
我正在尝试为反思中的思考()
I'm trying to write tests in jest for the examples shown in "Thinking in React" (http://facebook.github.io/react/docs/thinking-in-react.html)
我是很难使用TestUtils.Simulate为搜索输入对象提供更改事件。
And I am having a hard time using TestUtils.Simulate to provide a change-event to the search input object.
/** @jsx React.DOM */
jest.dontMock('../ProductTable.js');
jest.dontMock('../FilterableProductTable.js');
jest.dontMock('../SearchBar.js');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var FilterableProductTable = require('../FilterableProductTable.js');
var SearchBar = require('../SearchBar.js');
var PRODUCTS = [
{category: 'thing', name: 'glove', price: '$0.50', stocked: true},
{category: 'thing', name: 'spam', price: '$1.50', stocked: true},
{category: 'thing', name: 'glam', price: '$9.50', stocked: false},
{category: 'thing', name: 'blam', price: '$99.00', stocked: true},
{category: 'thing', name: 'sham', price: '$0.20', stocked: true},
];
describe('FilterableProductTable', function() {
it('creates the entire table', function () {
filterableProductTable = TestUtils.renderIntoDocument(
<FilterableProductTable
products={PRODUCTS}
filterText = {''}
inStockOnly = {false}
/>
);
var rows = TestUtils.scryRenderedDOMComponentsWithTag(filterableProductTable, 'tr');
expect(rows.length).toEqual(7); // 5 items and 2 headers
});
it('searches the table for proper stuff', function() {
filterableProductTable = TestUtils.renderIntoDocument(
<FilterableProductTable
products={PRODUCTS}
filterText = {''}
inStockOnly = {false}
/>
);
// var inputBox = document.querySelectorAll('#search-box');
// console.log(inputBox.innerHTML);
var inputObjects = TestUtils.scryRenderedDOMComponentsWithTag(filterableProductTable, 'input');
var inputBox = inputObjects[0];
// TestUtils.Simulate.keyUp(inputBox, {key: 'a'});
TestUtils.Simulate.change(inputBox, {target: {value: 'a'}});
var rows = TestUtils.scryRenderedDOMComponentsWithTag(filterableProductTable, 'tr');
expect(rows.length).toEqual(6); // FAILS. This is equal to 7 as in the previous test.
});
});
有人有建议吗?我是否错误地使用了Testutils.Simulate?
Does anyone have a suggestion? Am I using Testutils.Simulate incorrectly?
推荐答案
我最近遇到了同样的问题而且只是这样做了:
I had the same problem recently and simply did this:
React.findDOMNode(inputBox).value = 'a';
TestUtils.Simulate.change(inputBox);
我无法让Simulate或SimulateNative更改值,所以只需手动更改节点上的值通过Simulate触发了一个更改事件。
I could not make Simulate or SimulateNative to change the value so just changed the value on the node manually then triggered a change event via Simulate.
在github上提到的React的一个开发人员,他们正在以相同的方式测试Simulate.change(手动设置值然后触发更改)。
我不知道为什么他们仍然在手册中有它(如果我正确读取它在0.11工作但从0.12开始破坏)。
One of the developers of React mentioned on github that they are currently testing the Simulate.change the same way (setting value manually then triggering change). I don't know why they have it in the manuals still (if I read it correctly it was working in 0.11 but broken since 0.12).
这篇关于使用TestUtils.Simulate在输入元素上创建更改事件时遇到问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!