Jest 监视组件的属性方法

Question

我正在尝试测试是否在由 componentDidMount 调用的 init 方法中添加了一个事件，但是只有在组件的属性设置为“true”时才会添加该事件，因此我想监视 addEventHandler 方法并调用"toBeCalledWith('eventName')" 所以我有这样的事情：

export interface IMyComponentProps{
    flag?: boolean;
}

export class MyComponent extends Component<IMyComponentProps> {
    private myProperty: HTMLElement;

    public componentDidMount() {
        this.init();
    }

    private init() {
        if (this.props.flag) {
            this.myProperty.addEventListener("event", arg2, arg3);
        }
    }
}

然后我的测试看起来像这样：

test("Test 1", () => {
   const spyInit = jest.spyOn(MyComponent.prototype, "init");
   wrapper = mount(
      <MyComponent />
   );

   expect(spyInit).toBeCalled();
})

但是上面的测试不包括 addEventListener 是否被调用，所以我正在尝试以下不同的方法，但没有成功：

const spyAddListener = jest.spyOn(MyComponent.prototype, "myProperty.addEventHandler"); 
const spyAddListener = jest.spyOn(MyComponent.instance().myProperty, "addEventHandler"); 
const spyAddListener = jest.spyOn(MyComponent.prototype.myProperty, "addEventHandler");

有什么建议吗？

Answer 1

不完全回答这个问题，但从茉莉花迁移到玩笑的人可能会发现这很有用。

jest.spyOn(component, 'propertyName', 'get').mockReturnValue(...);

这相当于茉莉花的spyOnProperty：

jasmine.spyOnProperty(component, 'propertyName').and.returnValue(...);

Answer 2

您需要将flag道具传递给组件。例如

\n\n

index.ts:

\n\n

import { Component } from \'react\';\n\nexport interface IMyComponentProps {\n  flag?: boolean;\n}\n\nexport class MyComponent extends Component<IMyComponentProps> {\n  private myProperty!: HTMLElement;\n\n  public componentDidMount() {\n    this.init();\n  }\n  public render() {\n    return null;\n  }\n\n  private init() {\n    if (this.props.flag) {\n      this.myProperty.addEventListener(\'event\', () => null, false);\n    }\n  }\n}\n

\n\n

index.test.tsx:

\n\n

import { MyComponent } from \'./\';\nimport { mount } from \'enzyme\';\nimport React from \'react\';\n\ndescribe(\'60714899\', () => {\n  it(\'should add event listener\', () => {\n    const spyInit = jest.spyOn(MyComponent.prototype as any, \'init\');\n    const mMyProperty = { addEventListener: jest.fn() } as any;\n    MyComponent.prototype[\'myProperty\'] = mMyProperty;\n    const wrapper = mount(<MyComponent flag={true} />);\n    expect(spyInit).toBeCalled();\n    expect(mMyProperty.addEventListener).toBeCalledWith(\'event\', expect.any(Function), false);\n  });\n\n  it(\'should NOT add event listener\', () => {\n    const spyInit = jest.spyOn(MyComponent.prototype as any, \'init\');\n    const mMyProperty = { addEventListener: jest.fn() } as any;\n    MyComponent.prototype[\'myProperty\'] = mMyProperty;\n    const wrapper = mount(<MyComponent flag={false} />);\n    expect(spyInit).toBeCalled();\n    expect(mMyProperty.addEventListener).not.toBeCalled();\n  });\n});\n

\n\n

100%覆盖率的单元测试结果：

\n\n

 PASS  stackoverflow/60714899/index.test.tsx\n  60714899\n    \xe2\x9c\x93 should add event listener (42ms)\n    \xe2\x9c\x93 should NOT add event listener (2ms)\n\n-----------|---------|----------|---------|---------|-------------------\nFile       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s \n-----------|---------|----------|---------|---------|-------------------\nAll files  |   92.31 |      100 |      80 |     100 |                   \n index.tsx |   92.31 |      100 |      80 |     100 |                   \n-----------|---------|----------|---------|---------|-------------------\nTest Suites: 1 passed, 1 total\nTests:       2 passed, 2 total\nSnapshots:   0 total\nTime:        4.77s, estimated 10s\n

\n\n

源代码：https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60714899

\n