You have a component that relies on an imported function,
isAuthenticated().
// MyComponent.js
import React from 'react';
import { isAuthenticated } from './authentication';
const MyComponent = (props) => {
if (isAuthenticated()) {
return (<div>{/* ... */}</div>);
} else {
return (<div>Not authenticated</div>);
}
};You'd like to test that component without having to manage the
authentication of a user. One option is to mock out that function. This can
be done with some help from jest.fn() and the mock.mockReturnValue()
function.
// MyComponent.test.js
// ... various testing imports
import * as authModules from './authentication';
it('renders the component', () => {
authModules.isAuthenticated = jest.fn().mockReturnValue(true);
const wrapper = shallow(<MyComponent />);
expect(toJson(wrapper)).toMatchSnapshot();
});By importing the same module and functions used by MyComponent, we are
then able to replace them (specifically, isAuthenticated) with a mocked
version of the function that returns whatever value we'd like. As
MyComponent is being rendered, it will invoked our mocked version of
isAuthenticated instead of the actual one.
You could test the other direction like so:
authModules.isAuthenticated = jest.fn().mockReturnValue(false);