til/react/mock-a-function-that-a-component-imports.md

# Mock A Function That A Component Imports

You have a component that relies on an imported function,
`isAuthenticated()`.

```javascript
// 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](https://github.com/jbranchaud/til/blob/master/javascript/mock-a-function-with-return-values-using-jest.md).

```javascript
// 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:

```javascript
authModules.isAuthenticated = jest.fn().mockReturnValue(false);
```