samedi 25 novembre 2017

Failed React Jest Test when Expecting Mock Function to be called

New to jest and not a lot of experience with testing. Can't pass this test. I think maybe i'm not setting the todoText properly and the function just isn't being called in the if statement.

import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

import AddTodo from './AddTodo';

describe(AddTodo, () => {
    const todoText = 'Buy milk';
    const mockOnAddTodo = jest.fn();
    const component = shallow(<AddTodo onAddTodo={mockOnAddTodo} />);

    it('calls the passed in `onAddTodo` function when add button is clicked', () => {
        component.find('Button').simulate('click');
        expect(mockOnAddTodo).toBeCalled();
    });
});

Component Code:

class AddTodo extends Component {
    handleSubmit = e => {
        e.preventDefault();
        const todoText = this.todoText.value;
        if (todoText.length > 0) {
            this.todoText.value = '';
            this.props.onAddTodo(todoText);
        } else {
            // puts cursor back in text input field if no text exists on submit
            this.todoText.focus();
        }
    };
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <FormGroup>
                    <FormControl
                        type="text"
                        ref="todoText"
                        placeholder="...add your todo here"
                        inputRef={input => (this.todoText = input)}
                    />
                    <Button bsStyle="primary" bsSize="large" type="submit" block>
                        Add Todo
                    </Button>
                </FormGroup>
            </form>
        );
    }
}

export default AddTodo;

Any help greatly appreciated.

Aucun commentaire:

Enregistrer un commentaire