如何在 React 中测试组件内部的内部方法?

IT技术 reactjs react-redux enzyme jestjs
2022-07-06 08:41:45

我正在尝试测试在 React 组件中使用的方法,但我失败了。该组件如下:

export class SiderMenu extends PureComponent {

formatter(data, parentPath = '', parentAuthority) {
  return data.map((item) => {
  const result = {
    ...item,
    path: `${parentPath}${item.path}`,
  };
  return result;
});
}
constructor(props) {
  super(props);
  this.menus = this.formatter(props.menuData);
}
render(....)
}

我正在使用酶,我想测试格式化程序方法是否已被调用:

describe.only('SiderMenu.formatter', () => {
  it('Expect to have been called', () => {
  // const spy = jest.spyOn(SiderMenu.prototype, 'formatter');
  const wrapper = shallow(<SiderMenu />);
  const instance = wrapper.instance();
  const method = jest.spyOn(instance, 'formatter');
  expect(method).toHaveBeenCalled();
  });
 });

我也尝试使用组件的原型来窥探该方法,但我不断出现以下错误

TypeError:无法读取未定义的属性“_isMockFunction”

此错误是由 'jest.spyOn(instance, 'formatter');' 创建的。有人可以帮我解决这个问题吗?如何测试已调用格式化程序方法?

2个回答

以下对我来说非常好:

describe.only('SiderMenu.formatter', () => {
  it('Expect to have been called', () => {
    const spy = jest.spyOn(SiderMenu.prototype, 'formatter');
    const wrapper = shallow(<SiderMenu menuData={[{ path: 'foo' }]} />);
    const instance = wrapper.instance();

    expect(spy).toHaveBeenCalled();
  });
});

确保您传递了一些menuData,以便组件在尝试映射时不会爆炸undefined让它工作有一些陷阱(例如使用类属性),但你在这里避免了它们。有关详细信息,请参阅此 GitHub 问题

我对您的应用一无所知,但您对它的formatter功能或输出不感兴趣。为什么不在this.menus创建SiderMenu.