如何使用jest+Enzyme测试react切换？

Question

嗨，最近我正在用jest+enzyme测试我的react应用程序，用useState或useEffect写测试真的让我很困惑。

所以这是我的代码，我想测试当用户点击按钮时，描述是否显示。(通过更改状态值)

const Job = ({ job }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = (id) => {
    setIsOpen(!isOpen);
  };
  return (
    <Card>
    
        <Card.Text>
          <Button id="button" onClick={toggle} variant="primary">
            {!isOpen ? "View Detail" : "Hide Detail"}
          </Button>
        </Card.Text>
        {isOpen && (
          <div className="mt-4">
            <ReactMardown source={job.description} />
          </div>
        )}
    
    </Card>
  );
};

export default Job;

Job.test.js

import React from "react";

import Adapter from "enzyme-adapter-react-16";
import { mount, shallow, configure } from "enzyme";
import Job from "./Job";
configure({ adapter: new Adapter() });

describe("when user click the button state value should changed", () => {
  const job = jest.fn();

  let wrapper;
  beforeEach(() => {
    wrapper = mount(<Job job={job} />);
  });
  it("should render", () => {
    expect(wrapper).not.toBeNull();
  });

  test("user click button", () => {
    const setIsOpen = jest.fn();
    wrapper.find("#button").at(1).simulate("click");
    expect(setIsOpen).toHaveBeenLastCalledWith({ isOpen: false });
  });
});

但它只通过了第一次测试..

Answer 1

通常情况下，尤其是在无状态组件中，不是测试实现，而是测试结果。

it('user click button', () => {
    expect(wrapper.find(ReactMardown)).toHaveLength(0);

    wrapper.find('#button').simulate('click');

    expect(wrapper.find(ReactMardown)).toHaveLength(1);
});

Answer 2

@nambk我会测试一下样式，例如。某些组件的background-color

expect(component.find('#item-id').prop('style')).toHaveProperty('backgroundColor' 'black');