javascript - React enzyme 无法测试 onclick 功能

Question

] 1

这是我在该图像中的组件的完整代码和测试代码

import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import ProfileCard from '../profileCard';
import Adapter from 'enzyme-adapter-react-16';
import InfoCard from '../infoCard';
import renderer from 'react-test-renderer';

Enzyme.configure({
  adapter: new Adapter()
});

describe('Profile Card', () => {
  const props = {
    percentageCompleted: 20,
    toggleModalVisibility: () => console.log(''),
    title: 'Value From Test',
    icon: 'string',
    active: false
  };
  const component = mount(<InfoCard {...props} />);

  it('onclick function should toggle model visibality', () => {
    const wrapper = shallow(<InfoCard {...props} />).instance();
    const preventDefaultSpy = jest.fn();
    expect(component.props().title.length).toBe(15);
    //wrapper.onClick  //i am stuck here
    console.log('what is in there', wrapper);
  });

  // it('should render correctly', () => {
  //   const tree = renderer.create(<InfoCard {...props} />).toJSON();
  //   expect(tree).toMatchSnapshot();
  // });

  it('icon shpuld be equal to prop icon', () => {
    expect(component.find('img').prop('src')).toEqual(props.icon);
  });
});

因为我不知道如何测试 onClick 函数。在函数中，我没有将参数或其他东西作为参数传递到函数中。那么我该如何测试这个功能呢？对不起我的英语，因此我有点沮丧。

Answer 1

首先我很抱歉，因为我只知道如何在 React Functions 中进行开发。但这里有一个 MVP 来测试 onClick 功能。您只需对 toggleModalVisibility 和 title 进行断言即可。

您需要模拟 toggleModalVisibility，然后找到元素(在您的情况下为 div)并执行模拟事件(click) code>) 并在那里进行断言。您无需担心该类文件中的实现细节，因为这并不重要，您只关心预期的输出。

import { shallow } from "enzyme";
import React from "react";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import InfoCard from "../src/InfoCard";

Enzyme.configure({ adapter: new Adapter() });

const toggleModalVisibility = jest.fn();

const initialProps = {
  toggleModalVisibility,
  title: "My title",
  active: true
};
const getInfoCard = () => {
  return shallow(<InfoCard {...initialProps} />);
};

let wrapper;

beforeEach(() => {
  toggleModalVisibility.mockClear();
});
it("should call toggleModalVisiblity when onClick", () => {
  wrapper = getInfoCard();

  wrapper.find("div#myDiv").simulate("click");

  expect(toggleModalVisibility).toHaveBeenCalledWith(initialProps.title);
});