在测试 React 组件时，我们如何检查 Simulate.change 方法是否有效？

Question

我正在尝试测试一个反应组件，该组件接受输入并在值更改时触发事件。我传递给它一个客户端和一个在值更改时调用的回调。

我正在使用 mocha 和 react 的 TestUtils 对此进行测试。这是组件：

var React = require('react');

var SearchBar = React.createClass({
    handleChange : function(event){
        var algoliaClient = this.props.client;
        // call algoliaClient.search with event.target.value
        // this returns a promise on which .then is called 
        // with a function which calls the onSearch callback
    },
    render: function(){
        return (
            <div className="search-bar">
                <input id="search-bar" type="text" onChange={this.handleChange} />
            </div>
        );
    }
});

module.exports = SearchBar;

为了测试这一点，我编写了以下测试：

describe('SearchBar', function(){
it('Sets searchResults state variable on input', function(){
    require('es6-promise').polyfill()
    var React = require('react/addons');
    var SearchBar = require('../app/components/SearchBar.js');
    var TestUtils = React.addons.TestUtils;

    var mockSearchResults = {};

    var mockSearch = function(mockData) {
        var mockPromise = new Promise(function(resolve, reject){
            resolve(mockData);
        });

        return mockPromise;
    };

    var mockAlgoliaClient = {
        search : mockSearch
    };

    var mockSetState = function(data){
        mockSearchResults = data;
    }

    // Rendering component into the testdom
    var searchBar = TestUtils.renderIntoDocument(
        <SearchBar client={ mockAlgoliaClient } onSearch={ mockSetState } />
    );
    debugger;

    var input = TestUtils.findRenderedDOMComponentWithTag(
        searchBar, 'input'
    );

    assert.equal( Object.keys(mockSearchResults).length, 0 );

    TestUtils.Simulate.change(input, {target : {value : 's'}});
    debugger;

    assert.equal( mockSearchResults , {data : 's'});
});
});

在 Simulate.change 调用结束时，mockSearchResults 的值仍然相同。

Answer 1

所以我想出了如何着手测试涉及外部 api 调用或使用 sinon.js.

进行的任何其他函数调用的功能

例如，如果我想模拟正在进行的搜索调用

var mocksearch = sinon.mock(algoliaclient).expects("search").
                   .once()
                   .returns(Promise.resolve(
                     { results : "test" }))

将 done 回调传递给 it 方法并在 .then 函数中调用它并使用支持断言的断言框架确保测试运行顺利.

在测试 React 组件时，我们如何检查 Simulate.change 方法是否有效？

How can we check if Simulate.change method is working when testing a react component?

javascript

mocha.js

reactjs