Question

我有一个组件，我想测试click方法。我正在使用浅表，但是我的测试失败了，因为它找不到按钮，因此没有单击方法。我的代码有什么问题？

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

测试UISNG酶时如何阅读结节中的子代

1 个答案: