0

I am taking over a project from someone and it's been built in React. One of the tests is failing because a function isn't called after a click on a button has been simulated. The function is called ok when I use the app in the browser so not sure what's going on. I'm pretty new to React and haven't written any tests before so there might be something very obvious I'm overlooking.

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();
    });

this is the handleSave function in case it is relevant:

handleSave: function (ev, eventAttrs) {

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

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

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

The error I'm getting in the console is:

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

Any ideas? I'm not really sure where to start... I logged some stuff in the consle and it looks fine (i.e. there's a button etc.)

Dine
  • 7,223
  • 8
  • 25
  • 35
  • I think you need to render the component before simulating events. May be you need to use something like `jsdom` – Harish Jul 10 '15 at 14:40
  • Yeah, I don't see any code that renders your element into an attached or detached DOM node. You don't need `jsdom` like @Harish suggests, something like `TestUtils.renderIntoDocument` works just fine. I would also like to see some code pertaining to your component under test. Obviously the function you expect to be called is not called, but perhaps that's because there are problems with your actual component that your test is trying to tell you. Perhaps your button is not hooked up correctly? There's no way for us to know unless you post some more relevant code. – Michael Parker Jul 10 '15 at 17:12

0 Answers0