单元测试使用Jest，Enzyme对变化做出反应

Question

I have the following abbreviated react component

   render() {
        return (
            <div className={styles.srchBoxContaner}>
                <input
                    className={styles.incSrchTextBox}
                    type="text" name="search" placeholder="Search.."
                    onChange={this.onChange}
                />
            </div>
        );
    }

Now I want to unit test this, specifically I want to simulate an input and make sure onChange is called

How do I do this using Enzyme, and Jest. So far this is what I have come up with

it('calls \'onPerformIncrementalSearch\' when the user types in something', () => {
    const incrementalSearchWrapper = mount(<IncrementalSearch />);

    const onChangeSpy = sinon.spy(IncrementalSearch.prototype, 'onChange');

    //find the input element
    const searchInput = incrementalSearchWrapper.find('#search');
    searchInput.simulate('change', { target: { value: 'new search value' } });
    expect(IncrementalSearch.prototype.onChange.called).toEqual(true);
    onChangeSpy.restore();
});

However this does not seem to work.

Answer 1

Just in case someone else runs into this problem, the fix was to move the spy up before calling mount. So the working code is

const onChangeSpy = sinon.spy(IncrementalSearch.prototype, 'onChange');
const incrementalSearchWrapper = mount(<IncrementalSearch />);

// find the input element
const searchInput = incrementalSearchWrapper.find('#searchInput');
searchInput.node.value = 'David';
searchInput.simulate('change', searchInput);
expect(onChangeSpy.called).toEqual(true);
onChangeSpy.restore();