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

如果我用这样的组件方法包装存储方法：

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

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

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

如何验证存储函数调用？

1 个答案: