如何验证存储函数调用？答案

【问题标题】：How to verify store function call?如何验证存储函数调用？
【发布时间】：2019-11-01 21:12:35
【问题描述】：

开始练习单元测试。

遇到这样的问题：我正在尝试测试 store 方法调用。

当我运行这个测试时：


import * as React from 'react';
import {observer} from 'mobx-react';
import {mount} from 'enzyme';
import {instance, mock, verify, when} from 'ts-mockito';

class TestStore {
    onClick = () => {};
}

interface Props {
    store: any;
}

@observer
export class Test extends React.Component<Props, any> {
    render() {
        return (
            <div
                className={'test'}
                onClick={this.props.store.onClick}/>
        );
    }
}

describe('onclick test', () => {
    let testStoreMocked: any;
    let testStoreInst: any;
    let testElem: any;

    beforeEach(() => {
        testStoreMocked = mock(TestStore);
        testStoreInst = instance(testStoreMocked);
        testElem = mount<Test>(<Test
            store={testStoreInst}
        />);
    });

    test('test', () => {
        when(testStoreMocked.onClick).thenReturn();
        console.log(testElem.find('div.test').html());
        testElem.find('div.test').simulate('click');
        verify(testStoreMocked.onClick()).once();
    });
});

但是有这样的错误

Expected "onClick()" to be called 1 time(s). But has been called 0 time(s).

      50 |         console.log(testElem.find('div.test').html());
      51 |         testElem.find('div.test').simulate('click');
    > 52 |         verify(testStoreMocked.onClick()).once();
         |                                           ^
      53 |     });
      54 | });

如果我像这样通过组件方法包装存储方法：

import * as React from 'react';
import {observer} from 'mobx-react';
import {mount} from 'enzyme';
import {instance, mock, verify, when} from 'ts-mockito';

class TestStore {
    onClick = () => {};
}

interface Props {
    store: any;
}

@observer
export class Test extends React.Component<Props, any> {
    onClick = () => {
        this.props.store.onClick();
    };

    render() {
        return (
            <div
                className={'test'}
                onClick={this.onClick}/>
        );
    }
}

describe('onclick test', () => {
    let testStoreMocked: any;
    let testStoreInst: any;
    let testElem: any;

    beforeEach(() => {
        testStoreMocked = mock(TestStore);
        testStoreInst = instance(testStoreMocked);
        testElem = mount<Test>(<Test
            store={testStoreInst}
        />);
    });

    test('test', () => {
        when(testStoreMocked.onClick).thenReturn();
        console.log(testElem.find('div.test').html());
        testElem.find('div.test').simulate('click');
        verify(testStoreMocked.onClick()).once();
    });
});

测试通过了，一切都很有趣。是否有可能在不通过组件方法包装的情况下验证 store 方法？

【问题讨论】：

标签： reactjs typescript jestjs ts-mockito

【解决方案1】：

这个变体很有趣。但这并没有回答问题。

import * as React from 'react';
import {observer} from 'mobx-react';
import {mount} from 'enzyme';
import {mock, instance} from 'ts-mockito';

class TestStore {
    onClick = () => {};
}

interface Props {
    store: any;
}

@observer
export class Test extends React.Component<Props, any> {

    render() {
        return (
            <div
                className={'test'}
                onClick={this.props.store.onClick}/>
        );
    }
}

describe('onclick test', () => {
    let testElem: any;
    let store: any;
    let storeInst: any;
    let spyOnClick: any;

    beforeEach(() => {
        store = mock(TestStore);
        storeInst = instance(store);
        spyOnClick = jest.spyOn(storeInst, 'onClick');
        testElem = mount<Test>(<Test
            store={storeInst}
        />);
    });

    test('test', () => {
        testElem.find('.test').simulate('click');
        expect(spyOnClick).toBeCalled();
    });
});

【讨论】：