Как unit-тестом проверить вызов метода store?

Question

[BooooBka]

Добрый день, пытаюсь проверить выхов метода при клике на div.

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

с чем связано такое поведение?
как правильно тестировать подобное?

Comments

[BooooBka]

вариант который работает, но хотелось бы использовать ts-mockito

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