我正在尝试测试是否在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");
任何建议?
您需要将flag
道具传递给组件。例如:
index.ts
:
import { Component } from 'react';
export interface IMyComponentProps {
flag?: boolean;
}
export class MyComponent extends Component<IMyComponentProps> {
private myProperty!: HTMLElement;
public componentDidMount() {
this.init();
}
public render() {
return null;
}
private init() {
if (this.props.flag) {
this.myProperty.addEventListener('event', () => null, false);
}
}
}
index.test.tsx
:
import { MyComponent } from './';
import { mount } from 'enzyme';
import React from 'react';
describe('60714899', () => {
it('should add event listener', () => {
const spyInit = jest.spyOn(MyComponent.prototype as any, 'init');
const mMyProperty = { addEventListener: jest.fn() } as any;
MyComponent.prototype['myProperty'] = mMyProperty;
const wrapper = mount(<MyComponent flag={true} />);
expect(spyInit).toBeCalled();
expect(mMyProperty.addEventListener).toBeCalledWith('event', expect.any(Function), false);
});
it('should NOT add event listener', () => {
const spyInit = jest.spyOn(MyComponent.prototype as any, 'init');
const mMyProperty = { addEventListener: jest.fn() } as any;
MyComponent.prototype['myProperty'] = mMyProperty;
const wrapper = mount(<MyComponent flag={false} />);
expect(spyInit).toBeCalled();
expect(mMyProperty.addEventListener).not.toBeCalled();
});
});
具有100%覆盖率的单元测试结果:
PASS stackoverflow/60714899/index.test.tsx
60714899
✓ should add event listener (42ms)
✓ should NOT add event listener (2ms)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 92.31 | 100 | 80 | 100 |
index.tsx | 92.31 | 100 | 80 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 4.77s, estimated 10s
源代码:https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60714899