[英]Jest/Enzyme testing Form component
我正在我的 React 應用程序上測試表單組件。 我遇到了與此處未解決的帖子類似的錯誤( 在玩笑和酶中測試表單輸入)。
我在下面為 form.test.js 嘗試了 2 種不同的方法,但都沒有讓我通過測試。
//simple form component
import React from "react";
import Checkbox from "../checkbox/checkbox.component";
import { withRouter } from 'react-router-dom';
class Form extends React.Component {
constructor(props){
super(props);
this.state={
fullName:"",
email:""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event){
this.setState({[event.target.name]: event.target.value});
}
handleSubmit = async event => {
event.preventDefault();
try {
const requestData = {
method: 'POST',
headers:{
'Content-Type': 'application/json'
},
body: JSON.stringify(this.state)
};
const response = await fetch('http://localhost:5000/results', requestData);
this.props.history.push('/thankyou');
}
catch (error) {
console.log(error);
}
}
render(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<label>
Full Name
</label>
<input
type="text"
value={this.state.fullName}
onChange={this.handleChange}
name="fullName"
required
/>
<br></br>
<label>
Email
</label>
<input
type="email"
value={this.state.email}
onChange={this.handleChange}
name="email"
required
/>
<br></br>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
export default withRouter(Form);
方法#1:
Expected: "Hello World"
Received: ""
//form.test.js
import React from 'react';
import Form from './form.component';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
describe ('Form', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(
<MemoryRouter>
<Form/>
</MemoryRouter>
)
});
it('should capture fullname correctly onChange', () => {
const input = wrapper.find('input').at(0);
input.simulate('change', {
target: { value : 'Hello World'}
});
expect(input.instance().value).toEqual("Hello World")
})
});
方法 #2:資源 - https://www.mydatahack.com/unit-testing-react-form-with-jest-and-enzyme/
TypeError: Cannot read property 'fullName' of null
//form.test.js
import React from 'react';
import Form from './form.component';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
describe ('Form', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(
<MemoryRouter>
<Form/>
</MemoryRouter>
)
});
it('should capture fullname correctly onChange', () => {
const input = wrapper.find('input').at(0);
input.instance().value = "Hello World";
input.simulate('change');
expect(wrapper.state().fullName).toEqual('Hello World');
})
});
看起來您在第一次嘗試模擬change
事件時錯過了添加name
。
當您將name
添加為事件有效負載的一部分時,它將起作用,如下所示:
input.simulate('change', {
// without the `name`, the eval (`[event.target.name]`) will result in void 0
target: { value: 'Hello World', name: 'fullName' }
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.