diff --git a/README.md b/README.md index d6f176f..cf227df 100644 --- a/README.md +++ b/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) diff --git a/react/mock-a-function-that-a-component-imports.md b/react/mock-a-function-that-a-component-imports.md new file mode 100644 index 0000000..f5ac4ef --- /dev/null +++ b/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 (
{/* ... */}
); + } else { + return (
Not authenticated
); + } +}; +``` + +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(); + 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); +```