Start practices unit testing.
And faced with such problem: I am trying to test store method call.
When I run this test:
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();
});
});
but have such error
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 | });
If I wrap store method by component method like this:
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();
});
});
Test passed and all is fun. Is there any possibility to verify store method without wrapping it by component method?
This variant works fun. But this doesn't answered to the question.
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();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.