useContext hook not working with shallow

[mstorus]

The useContext hook does not work with shallow rendering and passing in context. Are there any workarounds for now?

Current behavior

The value returned by useContext in a function component appears to be empty when using shallow and passing in a context argument. (The same problem also occurs when wrapping the component in the appropriate context Provider directly and then calling .dive()).

Here is a minimal test case, also reproduced at https://codesandbox.io/s/nice-blackwell-yz7tn in the index.spec.js file.

import React, { useContext } from "react";
import PropTypes from "prop-types";

import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

const MyContext = React.createContext({});

export const MyComponent = () => {
  const { myVal } = useContext(MyContext);

  return <div data-test="my-component">{myVal}</div>;
};

it("renders the correct text", () => {
  MyComponent.contextTypes = {
    myVal: PropTypes.any
  };
  const wrapper = shallow(
    <MyComponent />,
    {context: {myVal: 'foobar'}}
  );
  expect(wrapper.text()).toEqual("foobar"); // expected "foobar" received ""
});

Expected behavior

The text in the example above is expected to be "foobar", but it's actually "".
In general, the value returned from useContext appears to be undefined.

Note that using mount instead of shallow causes the test to pass.

Also note: the codesandbox above has a second file (class.spec.js) in which a hack is employed that makes the test pass, which uses the legacy contextTypes. But this only appears to work with classes and this.context, not with useContext.

Your environment

enzyme 3.10.0
enzyme-adapter-react-16 1.14.0
react 16.8.6
react-dom 16.8.6

API

• shallow
• mount
• render

Version

library	version
enzyme
react
react-dom
react-test-renderer
adapter (below)

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[ljharb]

enzyme's context options only work with "legacy" context; I believe useContext uses a different mechanism. React, and react's shallow renderer, don't seem to provide any way for us to hook into hooks.

[DerekLouie]

I also am having this problem, and would MEGA appreciate any workarounds or fixes that might come :)

[mstorus]

for the sake of explicitness, here's an example of directly using a context provider and calling .dive(), which also doesn't work:

https://codesandbox.io/s/elastic-zhukovsky-w5pjc
index.spec.js

import React, { useContext } from "react";

import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

const MyContext = React.createContext({});

export const MyComponent = () => {
  const { myVal } = useContext(MyContext);

  return <div data-test="my-component">{myVal}</div>;
};

it("renders the correct text", () => {
  const wrapper = shallow(
    <MyContext.Provider value={{ myVal: "foobar" }}>
      <MyComponent />
    </MyContext.Provider>
  ).dive();
  expect(wrapper.text()).toEqual("foobar"); // expected "foobar" received ""
});

@ljharb is the reason why this variation also doesn't work the same as you mentioned above?

[ljharb]

It'd be because .dive() needs to access the context in order to forward it along. However, if you try this, it might work:

it("renders the correct text", () => {
  const wrapper = shallow(
    <MyComponent />,
    {
      wrappingComponent: MyContext.Provider,
      wrappingComponentProps: { value: { myVal: 'foobar' }
    }
  );
  expect(wrapper.text()).toEqual("foobar"); // expected "foobar" received ""
});

[mstorus]

Unfortunately this also results in the context value being undefined.

https://codesandbox.io/s/amazing-noether-bv6u7

import React, { useContext } from "react";

import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

const MyContext = React.createContext({});

export const MyComponent = () => {
  const { myVal } = useContext(MyContext);

  return <div data-test="my-component">{myVal}</div>;
};

it("renders the correct text", () => {
  const wrapper = shallow(<MyComponent />, {
    wrappingComponent: MyContext.Provider,
    wrappingComponentProps: { value: { myVal: "foobar" } }
  });

  console.log(wrapper.debug()); // <div data-test="my-component" /> 
  console.log(wrapper.text()); // ""
});

[Tan90Qian]

shallow()just use wrappingComponentoption in makeShallowOptions() but not in adapter.createRenderer.So it just use wrappingComponent to create context param of option but never use wrappingComponent to wrap the node.

The evidence is that if you use snapshot test, you will not find wrappingComponent in the result.

[Tan90Qian]

ReactSixteenAdapter.createShallowRenderer() use react-test-renderer/shallow to create real component.

createShallowRenderer(options = {}) {
  const adapter = this;
  const renderer = new ShallowRenderer();
  ...
  return {
    render(el, unmaskedContext, {
      providerValues = new Map(),
    } = {}) {
      if (typeof el.type === 'string') {
        isDOM = true;
      } else if (isContextProvider(el)) {
        providerValues.set(el.type, el.props.value);
        const MockProvider = Object.assign(
          props => props.children,
          el.type,
        );
        return withSetStateAllowed(() => renderer.render({ ...el, type: MockProvider }));
      }
      ...
    },
    ...
  }
}

Maybe createShallowRenderer() could use wrappingComponent to wrap the result of withSetStateAllowed()?

[mstorus]

The workaround I'm using for now is the one described in this article; wrap useContext in a function and then use jest to mock the implementation.

https://codesandbox.io/s/crimson-mountain-vo7sk

MyContext.js

import React, { useContext } from "react";

const MyContext = React.createContext({});
export default MyContext;
export const useMyContext = () => useContext(MyContext);

index.spec.js

import React from "react";

import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import MyContext, { useMyContext } from "./MyContext";
import * as MyContextModule from "./MyContext";

Enzyme.configure({ adapter: new Adapter() });

export const MyComponent = () => {
  const { myVal } = useMyContext(); // instead of useContext(MyContext)

  return <div data-test="my-component">{myVal}</div>;
};

it("renders the correct text", () => {
  jest.spyOn(MyContextModule, "useMyContext").mockImplementation(() => ({
    myVal: "foobar"
  }));

  const wrapper = shallow(
    <MyContext.Provider>
      <MyComponent />
    </MyContext.Provider>
  ).dive();
  expect(wrapper.text()).toEqual("foobar");
});

[garyyeap]

I'm having same issue with using react-redux 7.1, but I can't change the way how react-redux use the useContext(). Is there any other workaround?

The workaround I'm using for now is the one described in this article; wrap useContext in a function and then use jest to mock the implementation.

https://codesandbox.io/s/crimson-mountain-vo7sk

MyContext.js

import React, { useContext } from "react";

const MyContext = React.createContext({});
export default MyContext;
export const useMyContext = () => useContext(MyContext);

index.spec.js

import React from "react";

import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import MyContext, { useMyContext } from "./MyContext";
import * as MyContextModule from "./MyContext";

Enzyme.configure({ adapter: new Adapter() });

export const MyComponent = () => {
  const { myVal } = useMyContext(); // instead of useContext(MyContext)

  return <div data-test="my-component">{myVal}</div>;
};

it("renders the correct text", () => {
  jest.spyOn(MyContextModule, "useMyContext").mockImplementation(() => ({
    myVal: "foobar"
  }));

  const wrapper = shallow(
    <MyContext.Provider>
      <MyComponent />
    </MyContext.Provider>
  ).dive();
  expect(wrapper.text()).toEqual("foobar");
});

[BlobRage0]

I'm having same issue with using react-redux 7.1, but I can't change the way how react-redux use the useContext(). Is there any other workaround?

The workaround I'm using for now is the one described in this article; wrap useContext in a function and then use jest to mock the implementation.
https://codesandbox.io/s/crimson-mountain-vo7sk
MyContext.js

import React, { useContext } from "react";

const MyContext = React.createContext({});
export default MyContext;
export const useMyContext = () => useContext(MyContext);

index.spec.js

import React from "react";

import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import MyContext, { useMyContext } from "./MyContext";
import * as MyContextModule from "./MyContext";

Enzyme.configure({ adapter: new Adapter() });

export const MyComponent = () => {
  const { myVal } = useMyContext(); // instead of useContext(MyContext)

  return <div data-test="my-component">{myVal}</div>;
};

it("renders the correct text", () => {
  jest.spyOn(MyContextModule, "useMyContext").mockImplementation(() => ({
    myVal: "foobar"
  }));

  const wrapper = shallow(
    <MyContext.Provider>
      <MyComponent />
    </MyContext.Provider>
  ).dive();
  expect(wrapper.text()).toEqual("foobar");
});

I have the same problem. Did you solve it?

[Alphy11]

This is broken until facebook/react#15589 gets though. As hooks do not really work in shallow without it.

[bdwain]

that react PR is only for getting useEffect to work. It doesn't address context, though something similar may be doable.