故障使用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創建一個輸入元素

回答

相關問題