我正在尝试为“Thinking in React”( http://facebook.github.io/react/docs/thinking-in-react.html )中显示的示例开玩笑地编写测试

而且我很难使用 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?

最佳答案

我最近遇到了同样的问题,只是这样做了:

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

我无法使 Simulate 或 SimulateNative 更改该值,因此只需手动更改节点上的值,然后通过 Simulate 触发更改事件。

React 的一位开发人员在 github 上提到他们目前正在以相同的方式测试 Simulate.change(手动设置值然后触发更改)。
我不知道为什么他们仍然在手册中使用它(如果我正确阅读它,它在 0.11 中工作但从 0.12 开始就损坏了)。

关于javascript - 使用 TestUtils.Simulate 在输入元素上创建更改事件时遇到问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26762046/

10-12 01:13