How to spy on functions outside a component? - jestjs

Question

// ./index.js
import { Component } from 'react';
export default class Test extends Component {
method () {
console.log('method()');
}
do () {
this.method();
func();
}
render () {
return null;
}
}
export function func () {
console.log('func()');
}
// ./index.test.js
import { shallow } from 'enzyme';
import React from 'react';
import * as Test from './index';
describe('<Test>', () => {
const component = shallow(<Test.default/>),
method_spy = jest.spyOn(component.instance(), 'method'),
func_spy = jest.spyOn(Test, 'func');
test('func()', () => {
component.instance().do();
expect(method_spy).toHaveBeenCalledTimes(1); // passed
expect(func_spy).toHaveBeenCalledTimes(1); // failed
});
});
I want to spy on function outside a component, but It doesn't work well.
I've got a message like Expected mock function to have been called one time, but it was called zero times.
And I don't want to use mock() method instead of spyOn() in the situation.
Is there way to fix it? Thaks you for reading. :D

Answer 1

It doesn't work because this line:
const func_spy = jest.spyOn(Test, 'func');
...is creating a spy on the module export for func...
...but Test.do doesn't call the module export for func, it calls func directly.
There are two options to fix it.
One is to move func into its own module.
Then the module export for it will be imported into index.js and called within Test.do...
...and when the module export for func is wrapped in a spy the spy will get called by Test.do.
The other option is to note that "ES6 modules support cyclic dependencies automatically" so a module can be imported into itself.
If the module is imported into itself then Test.do can call the module export for func:
import { Component } from 'react';
import * as index from './index'; // <= import the module into itself
export default class Test extends Component {
method() {
console.log('method()');
}
do() {
this.method();
index.func(); // <= use the module
}
render() {
return null;
}
}
export function func() {
console.log('func()');
}
...and the spy on the module export for func will be called as expected:
import { shallow } from 'enzyme';
import React from 'react';
import * as Test from './index';
describe('<Test>', () => {
const component = shallow(<Test.default />),
method_spy = jest.spyOn(component.instance(), 'method'),
func_spy = jest.spyOn(Test, 'func');
test('func()', () => {
component.instance().do();
expect(method_spy).toHaveBeenCalledTimes(1); // Success!
expect(func_spy).toHaveBeenCalledTimes(1); // Success!
});
});