阳光真好123 2021-03-26 17:30 采纳率: 0%
浏览 76

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

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

  • 写回答

2条回答 默认 最新

  • CSDN专家-三岁丫 2021-03-29 18:52
    关注

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

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

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

    评论

报告相同问题?