Реагировать фермент не в состоянии проверить функцию щелчка

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. в функции я не принимаю аргумент или что-то для передачи в качестве аргумента. Итак, как я могу проверить эту функцию. простите за мой английский sh Я немного расстроен из-за этого.

Answer 1

Прежде всего, я прошу прощения, потому что я знаю только, как развиваться в React Functions. Но вот MVP для тестирования onClick функциональности. Вам просто нужно подтвердить toggleModalVisibility и title.

. Вам нужно смоделировать toggleModalVisibility, затем найти элемент (в вашем случае div) и выполнить имитировать событие (click) и делать там свои утверждения. Вам не нужно беспокоиться о деталях реализации в этом файле класса, так как это не имеет значения, вам важны только ожидаемые результаты.

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