Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shallow rendered components can't use useContext #2349

Closed
3 of 13 tasks
clottman opened this issue Mar 9, 2020 · 1 comment
Closed
3 of 13 tasks

Shallow rendered components can't use useContext #2349

clottman opened this issue Mar 9, 2020 · 1 comment

Comments

@clottman
Copy link

clottman commented Mar 9, 2020

Current behavior

The only way to test a component that relies on a useContext hook appears to be to use render or mount, not shallow.

The following methods of attempting to provide context to a component that is shallow rendered all fail:
See Code Sandbox with full details, including implementations of Child and TestContextHelper

    it("receives context when context is provided by a context helper component", () => {
      const wrapper = shallow(<Child />, {
        wrappingComponent: TestContextHelper
      });
      expect(wrapper.exists());
      expect(wrapper.text().includes("hi there")).toBe(true);
    });

    it("can be provided a context provider via wrappingComponent and wrappingComponentProps", () => {
      const wrapper = shallow(<Child />, {
        wrappingComponent: TestContext.Provider,
        wrappingComponentProps: { value: "hi there" }
      });
      expect(wrapper.text().includes("hi there")).toBe(true);
    });

    it("can be provided a context provider via wrappingComponent and setting props later", () => {
      const wrapper = shallow(<Child />, {
        wrappingComponent: TestContext.Provider
      });
      const provider = wrapper.getWrappingComponent();
      provider.setProps({ value: "hi there" });

      expect(wrapper.text().includes("hi there")).toBe(true);
    });

    it("can be wrapped by context and shallow rendered", () => {
      const wrapper = shallow(
        <TestContext.Provider value="hi there">
          <Child />
        </TestContext.Provider>
      );
      expect(wrapper.text().includes("hi there")).toBe(true);
    });
  });

Expected behavior

I can use shallow on components that use useContext

Your environment

https://codesandbox.io/s/priceless-driscoll-j45bv

API

  • shallow
  • mount
  • render

Version

library version
enzyme 3.11.0
react 16.12.0
react-dom 16.12.0
react-test-renderer n/a
adapter (below)

Adapter

Tested with both; codesandbox reflects enzyme-adapter-react-16.

  • 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 ( )
@clottman
Copy link
Author

clottman commented Mar 9, 2020

I swear I searched for duplicate issues before I posted this.. but I did not see this one. 😭 Sorry, maintainers!

@clottman clottman closed this as completed Mar 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant