Instead of changing the input enzyme inserts new variable into my TaskForm state with undifined key and the value that im trying to insert. My results looks like this
Expected value to equal: {"description": "new task description", "id": "", "title": "new task"} Received: {"description": "", "id": "", "title": "", "undefined": "new task"}
import React, { Component } from 'react';
const uuidv4 = require('uuid/v4')
//This is my component
class TaskForm extends Component {
state = {
title: '',
description: '',
id:''
};
onChange = e => this.setState({ [e.target.name]: e.target.value });
resetForm = () => {
this.setState({
title:'',
description:''
})
}
onSubmit = e => {
e.preventDefault()
const task = this.state
if(this.props.editTask){
this.props.editTaskFunc(this.state)
}else{
this.setState(prevstate => ({
id:uuidv4()
}))
this.props.addTask(this.state)
}
this.resetForm()
this.props.closeToggle()
}
componentDidMount = () => {
if(this.props.editTask){
const {id,title,description} = this.props.editTask
this.setState(
prevState => ({
id,
title,
description
})
);
}
}
render() {
const { title, description } = this.state;
return (
<form className="task-form" onSubmit={this.onSubmit}>
<input name="title" placeholder="Enter task title" type="text" value={title} onChange={this.onChange} required/>
<input name="description" placeholder="Enter task description" type="text" value={description} onChange={this.onChange} required />
<button>Submit</button>
<button id="reset-btn" type="button" onClick={this.resetForm}>Reset</button>
</form>
);
}
}
export default TaskForm;
//This is my test
import React from 'react';
import ReactDOM from 'react-dom';
import TaskForm from './TaskForm';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'
configure({adapter: new Adapter()});
const taskForm = shallow(<TaskForm/>)
describe('<TaskForm/>',() => {
it('renders without crashing', () => {
expect(taskForm).toMatchSnapshot()
});
it('renders state inital empty array called tasks ', () => {
expect(taskForm.state()).toEqual({
title: '',
description: '',
id:''
})
});
describe('entering input and reseting <TaskForm/> state',() => {
beforeEach(() => {
// taskForm.find("[name='title']").simulate('change',{target:{value:"new task"}})
// taskForm.find("[name='description']").simulate('change',{target:{value:"new task description"}})
taskForm.find("[name='title']").simulate('change',{target:{value:"new task"}})
})
afterEach(() => {
taskForm.setState({
title: '',
description: '',
id:''
})
})
it('<TaskForm/> should have changed state',() => {
expect(taskForm.state()).toEqual({
title: 'new task',
description: 'new task description',
id:''
})
})
// it('resets <TaskForm/> state on click',() => {
// taskForm.find('#reset-btn').simulate('click')
// expect(taskForm.state()).toEqual({
// title: '',
// description: '',
// id:''
// })
// })
})
})
Aucun commentaire:
Enregistrer un commentaire