jest对组件快照测试,修改组件样式后测试依旧通过

【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();
});

测试用例第一运行时生成的快照文件为:

你好,我是问答小助手,本次您提出的有问必答问题,技术专家团超时未为您做出解答

本次提问扣除的有问必答次数,将会以问答VIP体验卡(1次有问必答机会、商城购买实体图书享受95折优惠)的形式为您补发到账户。

​​​​​因为有问必答VIP体验卡有效期仅有1天,您在需要使用的时候【私信】联系我,我会为您补发。

当我使用

import renderer from "react-test-renderer";

test("渲染header的样式", () => {
  const wrapper = renderer.create(<Header />).toJSON();
  expect(wrapper).toMatchSnapshot();
});

时,重复上述问题的操作可以完成组件的快照测试,并且生成的快照文件内容为:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`渲染header的样式 1`] = `
<div
  className="header"
>
  <div
    className="header-content"
  >
    Todolist
    <input
      className="header-input"
      data-test="input"
      onChange={[Function]}
      onKeyUp={[Function]}
      placeholder="todo"
      value=""
    />
  </div>
</div>
`;

学习的课程中提问的那种方式是可以的,在我本地运行时就不可以了,