要测试的组件

组件详情代码

https://www.jianshu.com/p/336db7ef1484

相关文档

Jest 、enzyme

组件调用代码

<Switch
  checked={isChecked}
  onChange={(checked) => {
    setIsChecked(checked);
  }}
/>

测试思路

1. 对默认值进行测试，当传给 checked 的值为 false，组件里相应的 input 的 checked 值也应该为 false。
2. 对默认值进行测试，当传给 checked 的值为 false，组件里相应的有类名为 switch-container-checked 的元素。
3. 对默认值进行测试，当传给 checked 的值为 true，组件里相应的 input 的 checked 值也应该为 true。
4. 对默认值进行测试，当传给 checked 的值为 true，组件里相应的没有类名为 switch-container-checked 的元素。
5. 对回调函数进行测试，onChange 函数能被成功触发且拿到相应的 event.target.checked 值。

选中时候的类 .switch-container.switch-container-checked
没选中时候的类 .switch-container

测试代码

import React from "react";
import { shallow } from "enzyme";

import Switch from "../components/Switch";

const onChange = jest.fn();
const props = {
  checked: true,
  onChange,
};

let wrapper = describe("test Switch component", () => {
  beforeEach(() => {
    wrapper = shallow(<Switch {...props} />);
  });

  it("快照", () => {
    expect(wrapper).toMatchSnapshot();
  });

  it("1.测试：当传入 checked 值为 false 时，input 的 checked 也为 false", () => {
    const falseWrapper = shallow(<Switch checked={false} />);
    expect(falseWrapper.find("input[type='checkbox']").props().checked).toEqual(
      false
    );
  });
  it("2.测试：当传入 checked 值为 false 时，没有显示 checked 样式", () => {
    const falseWrapper = shallow(<Switch checked={false} />);
    expect(falseWrapper.find(".switch-container-checked").length).toEqual(0);
  });

  it("3.测试：当传入 checked 值为 true 时，input 的 checked 也为 true", () => {
    expect(wrapper.find("input[type='checkbox']").props().checked).toEqual(
      true
    );
  });
  it("4.测试：当传入 checked 值为 true 时，有显示 checked 样式", () => {
    expect(wrapper.find(".switch-container-checked").length).toEqual(1);
  });
  it("5.测试：传入 onChange 函数有回调", () => {
    const input = wrapper.find("input[type='checkbox']");
    input.simulate("change", { target: { checked: false } });
    expect(onChange).toHaveBeenCalledWith(false);
    // 使用 input.prop("checked") 不准确，因为 input 已经是常量，应该重新取 wrapper.find("input[type='checkbox']")
    expect(wrapper.find("input[type='checkbox']").prop("checked")).toEqual(
      false
    );
  });
});

测试结果

nice