【create-react-app创建的react项目,使用的测试框架jest+enzyme】
对Header组件测试,在第一次运行测试代码生成快照文件之后,在对header组件的input的placeholder属性进行修改,再次运行测试代码,测试代码通过了,按道理应该是不通过的,不知道什么原因,各位高手帮我看下;
Header组件如下定义:
import React from "react";
import "../../../style.css";
class Header extends React.Component {
constructor() {
super();
this.state = {
value: "",
};
}
onChange = (e) => {
this.setState({ value: e.target.value });
};
onKeyUp = (e) => {
const { addUndoItem } = this.props;
if (+e.keyCode === 13 && this.state.value !== "") {
addUndoItem(this.state.value);
this.setState({ value: "" });
}
};
render() {
return (
<>
<div className="header">
<div className="header-content">
Todolist
<input
placeholder="todo"
className="header-input"
data-test="input"
value={this.state.value}
onChange={this.onChange}
onKeyUp={this.onKeyUp}
/>
</div>
</div>
</>
);
}
}
export default Header;
测试用例书写如下:
import Header from "../../components/Header";
import { shallow } from "enzyme";
test("渲染header的样式", () => {
const wrapper = shallow(<Header />);
expect(wrapper).toMatchSnapshot();
});
测试用例第一运行时生成的快照文件为: