故障使用TestUtils.Simulate创建一个输入元素

我想写开玩笑的“思考在响应”中的示例测试上的变化事件（http://facebook.github.io/react/docs/thinking-in-react.html）故障使用TestUtils.Simulate创建一个输入元素

，我有一个困难时期使用TestUtils.Simulate为搜索输入对象提供更改事件。

/** @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？

来源

2014-11-05 pbanka

你有没有得到这个解决？我正在尝试做同样的事情，并且更改事件不会激发:(查看React文档表明更改事件使用正确，但它在Jest中没有任何作用。 – alengel 2015-04-24 05:14:10

不，我从未得到过这个工作。 – pbanka 2015-04-28 11:46:14

最近我有同样的问题，只是这样做：

React.findDOMNode(inputBox).value = 'a'; 
TestUtils.Simulate.change(inputBox);

我不能让模拟或SimulateNative所以只是改变了节点的值更改数值手动然后触发通过模拟一个变化的事件。

在github上提到的React的开发人员之一，他们目前正在以相同的方式测试Simulate.change（手动设置值然后触发更改）。我不知道他们为什么仍然在手册中（如果我正确地阅读它，它在0.11工作，但从0.12破碎）。

来源

2015-05-01 00:05:00 Joe90

故障使用TestUtils.Simulate创建一个输入元素

回答

相关问题