Can I specify a value for a variable in an Enzyme shallow render?

Question

I am trying to write a test in Enzyme for a React component that receives an object with a particular key from another file. I need the code to believe that object has been received when running the test suite.

My desired output is a running test suite. My actual result is this error message:

 TypeError: Cannot read property 'user' of undefined

      104 |                             </div>
      105 |                         ) : null}
    > 106 |                         {auth.user ? (
          |                               ^
      107 |                             <SidebarProfile
      108 |                                 displayName={auth.user}
      109 |                                 username={auth.user}

      at Sidebar (src/components/sidebar/sidebar/Sidebar.js:106:31)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:829:32)

Lemme show you how I got here.

I have a Sidebar component. It reads like this:

import { useAuth } from "../../../auth/use-auth";

function Sidebar(props) {

    const auth = useAuth();

    return (
        <aside id="sidebar">
             // ...
            {auth.user ? (
                            <SidebarProfile
                                displayName={auth.user}
                                username={auth.user}
                                profilePic={Logo}
                                clicked={() => {
                                    setShowModal(true);
                                }}
                            />
                        ) : null}
               // ...
        </aside>
    );
}

export default Sidebar;

When the code is running for real, there is a user logged in (me) and the code updates the auth.user value to the user's username. But in the test suite, this doesn't happen.

The specific tests I want to run are:

describe("checking the Sidebar works properly", () => {
    const wrapper = shallow(<Sidebar />);
    const thinWrapper = shallow(<Sidebar shrink={true} />);

    it("renders a logo", () => {
        expect(wrapper.find("#sidebar_logo-wide")).toHaveLength(1);
    });

    it("renders a *thin* logo", () => {
        expect(thinWrapper.find("#sidebar_logo-thin")).toHaveLength(1);
    });

    it("renders 6 buttons", () => {
        expect(wrapper.find(SidebarButton)).toHaveLength(6);
        expect(thinWrapper.find(SidebarButton)).toHaveLength(6);
    });
});

All of them encounter this problem, I think.

I have searched Google for things like "react enzyme ..." and then "supply a constant", "mock a constant", "define a value", "value in my render is unavailable" but none of the threads deal with this issue.

What I want might look like writing this at the top of my test file:

const auth = { user: "someUser" }

but I don't expect it to be quite so simple.

edit: I have a temporary workaround. I moved const auth = useAuth() to the Sidebar's parent component. Then I put it back in as a prop. So now I can shallow render the Sidebar with const userInfo = { user: "someUser", jwt: "abcdefg" }; as the prop. It's an Ok solution but I'd really like to just say "Hey Enzyme, you're gonna pretend there's a constant that isn't actually there, OK?"

Sarun UK Sarun UK · Accepted Answer · 2020-11-14T08:50:57

Mock the useAuth like below: -

  jest.mock('./useAuth',
  () => ({
        useAuth: jest.fn().mockReturnValue({user: 'Roly Poly'})
  }));

Can I specify a value for a variable in an Enzyme shallow render?

1 Answers