Как читать детей в узлах при тестировании ферментов

Question

У меня есть компонент, и я хочу проверить метод щелчка. Я использую мелкий, но мой тест не пройден, так как он не может найти кнопку и, следовательно, это метод щелчка. Что не так с моим кодом?

interface IProps {
  label: string;
  className: string;
  onClick: () => void;
}

export const NewButton: React.StatelessComponent<IProps> = props => {
  return (
    <Button type="button" className={props.className} onClick={props.onClick}>
      {props.label}
    </Button>
  );
};

import { shallow } from 'enzyme';
import * as React from 'react';
import { NewButton } from "../Buttons";

describe('<NewButton />', () => {
    describe('onClick()', () => {
      const props = {
        className: "buttonSubmit",
        label: "submit",       
        onClick: () => {},
      }
      test('successfully calls the onClick handler', () => {
        const mockOnClick = jest.fn();
        const wrapper = shallow(
          <NewButton {...props}  />
        );
        const button = wrapper.find('submit').dive();
        expect(button.exists()).toEqual(true)   
        button.simulate('click');
        expect(mockOnClick.mock.calls.length).toBe(1);
      });
    });
  });

Answer 1

Поскольку вы используете метод shallow, он будет отображать только тот компонент, который мы тестируем. Он не отображает дочерние компоненты. Поэтому вы должны попытаться найти компонент Button.

const button = wrapper.find('Button');

После этого вы должны смоделировать обработчик события props.onClick, переданный как реквизит компоненту NewButton.

const props = {
   className: "buttonSubmit",
   label: "submit",       
   onClick: jest.fn(),
}

Так что вы можете использовать

 describe('<NewButton />', () => {
    describe('onClick()', () => {
      const props = {
        className: "buttonSubmit",
        label: "submit",       
        onClick: jest.fn(),
      }
      test('successfully calls the onClick handler', () => {
        const wrapper = shallow(
          <NewButton {...props}  />
        );
        const button = wrapper.find('Button');
        expect(button.exists()).toEqual(true)   
        button.simulate('click');
        // Since we passed "onClick" as props
        // we expect it to be called when 
        // button is clicked
        // expect(props.onClick).toBeCalled();
        expect(props.onClick.mock.calls.length).toBe(1);
      });
    });
  });