Question

我正在为基于Promise的功能编写测试。具体来说，它是一个React组件＆amp;我正在测试以确保正确调用onChange处理程序。

我的组件如下所示：

class TextInput extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: props.value || '',
        };

        this.onChange = this.onChange.bind(this);
    }

    updateState(values) {
        return new Promise(
            (resolve) => {
                this.setState(values, () => { resolve(this.state); });
            }
        );
    }

    onChange(event) {
        this.updateState({ value: event.target.value })
            // then fire the onChange handler (if necessary)
            //
            .then((state) => {
                if (this.props.onChange) {
                    // console.log(this.props.onChange) shows that this IS a
                    // Sinon spy function
                    this.props.onChange(state.value);
                }
            })

            .catch((err) => { console.log('-----------', err); });
    }

    render() {
        // render the component (omitted to keep this short)
    }
}

我的测试看起来像这样：

import React from 'react';
import { mount } from 'enzyme';
import chai from 'chai';
import sinon from 'sinon';
import TextInput from '../../../../client/modules/components/TextInput';

const expect = chai.expect;

describe('TextInput component editing', () => {

    it('calls the onChange handler', () => {

        const onchange = sinon.spy();

        const value = '';
        const editedValue = 'something';

        const component = mount(<TextInput value={value} onChange={onchange} />);

        // change the value
        //
        component.find('input').simulate('change', {
            target: { value: editedValue }
        });

        expect(component.find('input').prop('value')).to.equal(editedValue);

        expect(onchange.calledOnce).to.equal(true);
        expect(onchange.calledWith(editedValue)).to.equal(true);
    });
});

最后两次expect来电测试失败。

如果我用普通的旧函数替换sinon间谍，则调用该函数。如，

// instead of this...
// const onchange = sinon.spy();

// do this...
const onchange = (value) => { console.log(`VALUE = ${value}`); };

如果我直接使用setState方法的回调，它可以正常工作。如，

// instead of...
// this.updateState(values).then(...)

// do this...
this.setState(values, () => {
    // call the onChange handler...
});

我可以这样做，但我想避免它，因为我要为这个组件添加更多功能而我不想被困在pyramid of doom。

起初我认为它可能与this方法范围内的updateState问题或该方法中的某个回调函数有关，但添加了console.log整个陈述表明，this指的是TextInput在所有适当位置的实例。

在console.log处理程序被触发之前添加onChange语句以显示this.props.onChange实际上是一个Sinon间谍。

我查看了其他软件包，例如sinon-as-promised，但我认为该软件包确实解决了我想要做的事情 - 我只是想确保我的回调在promise then子句中调用。 sinon-as-promised是一个包含整个承诺的软件包。

我可能会忽略一些直截了当的事情，但无论如何，我都没有看到它。

Answer 1

在执行异步调用状态之前，您的同步测试似乎已完成。我不会评论你是否应该同时设置状态和调用更改方法以及何时。但我认为您目前的简单答案是通过传递done参数来使用异步测试。（显然你在这一点上根本不需要间谍，但我留下它只是为了表明它并不是那些本身不起作用的间谍：

describe('TextInput component editing', () => {
  it('calls the onChange handler', done => {
    const fakeOnChange = stuff => {
      expect(spyOnChange.calledOnce).to.equal(true);
      expect(editedValue).to.equal(stuff);
      expect(component.find('input').prop('value')).to.equal(editedValue);
      done();
    }

    const spyOnChange = sinon.spy(fakeOnChange);

    const value = '';
    const editedValue = 'something';

    const component = mount(<TextInput value={value} onChange={spyOnChange} />);

    component.find('input').simulate('change', {
        target: { value: editedValue }
    });

  });
});

为什么我的Sinon间谍功能在promise then子句中调用时不起作用？

1 个答案: