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