单击模拟后,React测试无法调用函数

时间:2015-07-10 12:02:02

标签: javascript reactjs reactjs-testutils

我正在接管一个人的项目,它是在React中构建的。其中一个测试失败,因为在模拟按钮上单击后未调用函数。当我在浏览器中使用该应用程序时,该功能被称为ok,因此不确定发生了什么。我对React很新,并且之前没有写过任何测试,所以可能会有一些非常明显的东西我会忽略。

This is the test:
it('Clicks save entry without meeting validation', function() {
        expect(WorkHistoryItemContainer.state.saving).toBe(undefined);
        expect(WorkHistoryItemContainer.state.errors.length).toBe(0);

        var organisation = React.findDOMNode(WorkHistoryItemContainer).querySelector('input[name=organisation]'),
            role = React.findDOMNode(WorkHistoryItemContainer).querySelector('input[name=role]'),
            date = React.findDOMNode(WorkHistoryItemContainer).querySelector('input[name=period]'),
            duration = React.findDOMNode(WorkHistoryItemContainer).querySelector('input[name=duration]');

        organisation.value = mockValues.organisation;
        role.value = mockValues.role;
        date.value = mockValues.organisation;
        duration.value = mockValues.duration;

        console.log('----------------');
        console.log(organisation.value);

        ReactTestUtils.Simulate.change(organisation);
        ReactTestUtils.Simulate.change(role);
        ReactTestUtils.Simulate.change(date);
        ReactTestUtils.Simulate.change(duration);

        ReactTestUtils.Simulate.blur(organisation);
        ReactTestUtils.Simulate.blur(role);
        ReactTestUtils.Simulate.blur(date);
        ReactTestUtils.Simulate.blur(duration);

        console.log('----------------');
        console.log(organisation.value);

        var SaveButton = React.findDOMNode(WorkHistoryItemContainer).querySelectorAll('.Form-link')[1];
        expect(SaveButton.innerText).toBe('Save');

        console.log('----------------');
        console.log(SaveButton);

        ReactTestUtils.Simulate.click(SaveButton);

        // THIS LINE FAILS:
        expect(WorkHistoryItemContainer.handleSave).toHaveBeenCalled();

        expect(WorkHistoryItemContainer.state.saving).toBe(true);

        expect(spyFunc.handleSave).toHaveBeenCalled();
    });

这是handleSave函数,只要它是相关的:

handleSave: function (ev, eventAttrs) {

        var isNew = this.state.id === '';

        this.setState({
            editing: false,
            saving: true
        });

        this.props.saveEntry(ev, eventAttrs, this);
    },

我在控制台中收到的错误是:

PhantomJS 1.9.8 (Linux) Rendering a new work history item Clicks save entry without meeting validation FAILED
    Expected spy handleSave to have been called.
        at /tmp/d89697d9775596afa26fe8390227c689.browserify:3044
    Expected undefined to be true.
        at /tmp/d89697d9775596afa26fe8390227c689.browserify:3049
    Expected spy handleSave to have been called.
        at /tmp/d89697d9775596afa26fe8390227c689.browserify:3051

有什么想法吗?我不确定从哪里开始...我记录了一些东西,看起来很好(即有一个按钮等)。

0 个答案:

没有答案