我是反应酶测试的新手。
我想模拟输入/更改操作。
我的第二个测试失败了，尽管找到了输入"#num1"：
Expected value to equal: "23"
Received: "undefined"
我尝试使用"text(("而不是"值"，然后返回"。
另外，我编写了一个测试来查找按钮文本并传递返回"+"。
当我删除两个输入之一并找到"输入"时，它也返回"未定义"。
应用.js：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component{
constructor(){
super();
this.state = {
number1: 0,
number2: 0,
result: 0
}
}
render(){
return(
<div>
<div>
<label>Number 1</label>
<input id="num1" onInput={this.rememberNumber1.bind(this)} />
<br/><br/>
<label>Number 2</label>
<input id="num2" onInput={this.rememberNumber2.bind(this)} />
</div>
<div>
<h1>{this.state.number1}+{this.state.number2}={this.state.result}</h1>
</div>
<div>
<button id="an" onClick={this.sum.bind(this)}>+</button>
<button onClick={this.subtract.bind(this)}>-</button>
<button onClick={this.multiply.bind(this)}>*</button>
<button onClick={this.divide.bind(this)}>:</button>
</div>
</div>
)
}
rememberNumber1(e){
if (e.target.value==""){
this.setState({
number1: 0
})
}
else {
this.setState({
number1: e.target.value
})
}
}
rememberNumber2(e){
if (e.target.value==""){
this.setState({
number2: 0
})
}
else {
this.setState({
number2: e.target.value
})
}
}
sum(e){
this.setState({
result: Number(this.state.number1)+Number(this.state.number2)
})
}
subtract(e){
this.setState({
result: Number(this.state.number1)-Number(this.state.number2)
})
}
multiply(e){
this.setState({
result: Number(this.state.number1)*Number(this.state.number2)
})
}
divide(e){
this.setState({
result: Number(this.state.number1)/Number(this.state.number2)
})
}
}
export default App;
设置测试.js：
import React from 'react';
import { shallow, mount } from 'enzyme';
import App from './App';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
it('includes input', () => {
const app = shallow(<App />);
expect(app.containsMatchingElement(<input/>)).toEqual(true)
});
it('on input', () => {
const wrapper = mount(<App />);
wrapper.find('#num1').simulate('change', {target: {value: 23}})
expect(wrapper.find('#num1').value).toEqual('23')
});
您需要更改代码中的两件事
1.give value prop to the inputs
2.give onChange handler instead of onInput, both work the same way
接下来，在测试代码中，您需要从 props 访问值，如下所示：wrapper.find("#num1").props().value
这是测试用例：
it("on input", () => {
const wrapper = mount(<App />);
const Num = wrapper.find("#num1");
Num.simulate("change", { target: { value: 23 } });
wrapper.update();//update wrapper to reflect the setState as component is updated again after setState
expect(wrapper.find("#num1").props().value).toEqual(23);
});
组件代码：
class App extends React.Component {
constructor() {
super();
this.state = {
number1: 0,
number2: 0,
result: 0
};
}
render() {
return (
<div>
<div>
<label>Number 1</label>
<input
id="num1"
value={this.state.number1}
onChange={this.rememberNumber1.bind(this)}
/>
<br />
<br />
<label>Number 2</label>
<input
id="num2"
value={this.state.number2}
onChange={this.rememberNumber2.bind(this)}
/>
</div>
<div>
<h1>
{this.state.number1}+{this.state.number2}={this.state.result}
</h1>
</div>
<div>
<button id="an" onClick={this.sum.bind(this)}>
+
</button>
<button onClick={this.subtract.bind(this)}>-</button>
<button onClick={this.multiply.bind(this)}>*</button>
<button onClick={this.divide.bind(this)}>:</button>
</div>
</div>
);
}
rememberNumber1(e) {
if (e.target.value == "") {
this.setState({
number1: 0
});
} else {
this.setState({
number1: e.target.value
});
}
}
rememberNumber2(e) {
if (e.target.value == "") {
this.setState({
number2: 0
});
} else {
this.setState({
number2: e.target.value
});
}
}
sum(e) {
this.setState({
result: Number(this.state.number1) + Number(this.state.number2)
});
}
subtract(e) {
this.setState({
result: Number(this.state.number1) - Number(this.state.number2)
});
}
multiply(e) {
this.setState({
result: Number(this.state.number1) * Number(this.state.number2)
});
}
divide(e) {
this.setState({
result: Number(this.state.number1) / Number(this.state.number2)
});
}
}
export default App;
这是工作沙箱：https：//codesandbox.io/s/2pkx1l8mn0
您正在获取的输入字段没有值属性，因此它们成为不受控制的组件。这些类型的字段不会像这里那样直接获取值
<input value={this.state.number} onInput={some function}></input>
因此，测试这些组件非常乏味。你必须创建引用。
constructor(){
this.num1Ref=React.createRef();
}
<input ref={this.num1Ref} onInput={some function}></input>
somefunction(e){
console.log(this.num1Ref.current.value)
<---code for setState--->
}
在测试文件中，您必须为包装器创建实例并像这样访问num1Ref。
wrapper.instance().num1Ref.current
最好将值属性保留在输入字段中。 谢谢。
我也遇到了与undefined相同的获取期望值的问题，后来通过使用mount方法而不是shallow解决了这个问题。
它不是一个优雅或极具可扩展性的解决方案，但它确实有效：
const wrapper = mount(<InputField {...basicProps} />);
const inputElement = wrapper.find("input.inputField__input");
inputElement.simulate("change", { target: { value: "1" } });
const updatedInputElement = wrapper.find("input.inputField__input");
expect(updatedInputElement.props().value).toBe("1"); // true
或者，类似地：
const wrapper = mount(<InputField {...basicProps} />);
let inputElement = wrapper.find("input.inputField__input");
inputElement.simulate("change", { target: { value: "1" } });
inputElement = wrapper.find("input.inputField__input");
expect(inputElement.props().value).toBe("1"); //true
。正在有效地执行我希望 update(( 方法对单个元素执行的操作。