如何验证store函数调用？

Question

开始练习单元测试。

面对这样的问题:我正在尝试测试存储方法调用。

当我运行此测试时：

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 | });

如果我按组件方法包装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> {
    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方法？

Answer 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();
    });
});