Question

我正在尝试在我的反应应用中测试一个邮政编码搜索组件。下面是我的组件和单击处理程序，它使用superagent从api获取数据。我有业力，茉莉和webpack设置和运行基本组件测试，但我如何模拟数据和用户输入？我在数据文件中包含了所有json。我可以使用存根和模拟来获得一个简单的示例设置吗？

render: function () {
    return (
        <div className="mainContent add-school-page">
              <Loader loaded={this.state.loaded}>
            <div className="content has-header">
                <div className="list">
                    <label className="item item-input item-stacked-label">
                        <span className="input-label">Postcode</span>
                        <input ref="postcode" type="text" placeholder="A12 3BC"/>
                    </label>
                </div>
                <div className="padding">
                    <button className="button button-block button-positive clickable"
                        onClick={this.searchByPostcode}>
                        Find School
                    </button>
                </div>
                <SearchResults results={this.state.results} />
                <br />
                <br />
            </div>
            </Loader>
        </div>
    );
},

searchByPostcode: function() {
    var postcode = React.findDOMNode(this.refs.postcode).value;
    var url = OsaApiService.buildRequestUrl('find_schools_postcode', [postcode]);
    fetch(url)
        .then(function (response) {
            return response.json();
        }).then(function (json) {
            this.setState({
                results: json.data,
            });
        }.bind(this)).catch(function (ex) {
            console.log(ex);
        });
}

有谁能告诉我如何开始？

我已经尝试过Jest，但测试需要永远完成，而且作为一项观察任务，它需要永远。

Answer 1

以下是使用Sinon.js创建虚假服务器以响应您的请求的示例测试。它也可以用于存根函数，该测试通过在被测组件上对setState的调用进行存根来证明（对于存根setSate可能很愚蠢，但我只是想提供一个例子）< / p>

var React = require('react/addons'),
    TestUtils = React.addons.TestUtils,
    ComponentUnderTest = require('./component.js'); //whatever component you are testing

describe('ComponentUnderTest', function () {

    it('retrieves data and sets state when button is pressed', function () {
        //setups
        var server = sinon.fakeServer.create();
        server.respondWith('GET', 'find_schools_postcode', 'json_string');
        var component = TestUtils.renderIntoDocument(<ComponentUnderTest />);
        var button = React.findDOMNode(component.refs.button); //you will need to add this ref
        var setStateStub = sinon.stub(component, 'setState'); //you don't have to stub this, you could just check that state was set afterwards

        TestUtils.Simulate.click(button);
        server.respond(); //tells the server to respond

        //expectations
        expect(setStateStub.calledOnce).toBe(true);
        expect(setStateStub.calledWith({results : 'json_string'})).toBe(true);
        //expect(component.state.results).toEqual('json_string'); //if you did not stub setState
    });

});

如果您想在测试套件中使用Sinon.js，我建议您将其包含在您的Karma配置文件中：

frameworks: ['jasmine', 'sinon'],

希望这有帮助！

reactJs测试模拟组件输入和响应，从哪里开始？

1 个答案: