Add Mock A Function That A Component Imports as a react til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_661 TILs and counting..._
+_662 TILs and counting..._
 
 ---
 
@@ -464,6 +464,7 @@ _661 TILs and counting..._
 - [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
 - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
 - [Mapping Over One Or Many Children](react/mapping-over-one-or-many-children.md)
+- [Mock A Function That A Component Imports](react/mock-a-function-that-a-component-imports.md)
 - [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
 - [Proxy To An API Server In Development With CRA](react/proxy-to-an-api-server-in-development-with-cra.md)
 - [Quickly Search For A Component With React DevTools](react/quickly-search-for-a-component-with-react-devtools.md)

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

@@ -0,0 +1,49 @@
+# 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);
+```