在 Enzyme 中，如何从功能组件的道具中获取功能？

Question

我正在使用 Jest 和 Enzyme 为我的 React 项目编写单元测试。如下图，我通过propsupdateUser给待测组件传递了一个命名的函数。EditCarddescribe('The EditCard screen', () => {  let wrapper;  beforeEach(() => {    const defaultProps: Partial<EditCardProps> = {      toggleEditing: jest.fn(),      user: mockUsers[0],      updateUser: jest.fn(),      // passes this function to the "EditCard" component via props      showSnackbar: jest.fn(),    };    wrapper = shallow(<EditCard {...(defaultProps as EditCardProps)} />);  });然后我想测试模拟点击按钮后调用了多少次。  it('should match the snapshot when the "Name" textfield is not filled and the "submit" button is clicked', () => {    wrapper.find('#Name').simulate('change', { target: { value: null } });    wrapper.find('#submit').simulate('click');        // Try to get the "updateUser" function from the props, but get "undefined".     expect(wrapper.prop('updateUser')).toHaveBeenCalledTimes(0);  });但是我得到如下所示的错误：    Matcher error: received value must be a mock or spy function    Received has value: undefined      24 |     wrapper.find('#Name').simulate('change', { target: { value: null } });      25 |     wrapper.find('#submit').simulate('click');    > 26 |     expect(wrapper.prop('updateUser')).toHaveBeenCalledTimes(0);有人能告诉我我哪里做错了吗？为什么我无法从道具中获取功能并被undefined退回？提前致谢！

Answer 1

对您的代码进行一些调整应该可以正常工作...

import * as React from "react";

import { mount, ReactWrapper } from "enzyme";

import EditCard from "../path/to/EditCard";

/* 

  I'd recommend defining jest fns here to make them easier to reference anywhere

  within the tests below; otherwise, it'll have to referenced via 

  'defaultProps.updateUser', 'defaultProps.showSnackbar', ...etc. 

  Using 'const' here allows us to define these variables within the 

  module's closure -- in short, only accessible within these tests and NOT 

  globally accessible (from other file tests).

*/

const showSnackbar = jest.fn();

const toggleEditing = jest.fn();

const updateUser = jest.fn();

/* 

  if the EditCard component is properly typed, then you shouldn't need to

  add types to this 'defaultProps' object

*/

const defaultProps = {

  showSnackbar,

  toggleEditing,

  updateUser,

  user: mockUsers[0]

};

describe('The EditCard screen', () => {

  let wrapper: ReactWrapper;

  beforeEach(() => {

    /* 

      I'd recommend mount over shallow because child components can be 

      deeply nested and require multiple .dive calls; however, if 

      you know the child components of "EditCard" are just simple JSX elements, 

      then shallow will be fine

    */

    wrapper = mount(<EditCard {...defaultProps} />);

  });

  it("should not call 'updateUser' when the form is submitted with an empty '#Name' field", () => {

    /*

      I'm not sure what simulating "null" does for this input, but assuming this

      input is required you should at least pass a string value -- assuming

      "#Name" input is of type 'text' | 'password' | 'email' => string and 

      not a number. On a related note, if it's required, then simply remove this 

      code as it doesn't do much for the test.

    */

    // wrapper.find('#Name').simulate('change', { target: { value: "" } });

    /*

      I'm assuming this then simulates a form submit. Unfortunately,

      pressing the submit button won't work. Instead you'll have to 

      simulate a form submit. This is a limitation of Enzyme and last I 

      checked hasn't been/can't be fixed.

    */

    wrapper.find('form').simulate('submit');

    

    /*

     it should then NOT call the jest.fn() "updateUser" when submitted since 

     '#Name' is empty. Notice that we're referencing 'updateUser' -- the jest fn

     defined above -- and not the wrapper.prop fn.

    */ 

    expect(updateUser).not.toHaveBeenCalled();

  });

  

  // include other tests...

});