Can't test value of React Context.Provider?

[craigkovatch]

I searched the Issues history and common issues and didn't find anything speaking to this. There's lots of discussion about how to mock a context, but I'm looking for a way to actually test the value of a Context.Provider.

The render tree of my component looks like this:

<div {...}>
  <TextFieldWidget {...} />
  <ListIsActiveContext.Provider value={focusWithin && activeItemIndex > -1}>
    <List {...} />
  </ListIsActiveContext.Provider>
</div>

JSX transforms context providers into a standard React.createElement call, i.e.:

return React.createElement("div", {...}),
  React.createElement(TextFieldWidget, {...}),
  React.createElement(ListIsActiveContext.Provider, { value: focusWithin && activeItemIndex > -1 },
    React.createElement(List, {...})));

Expected behavior

I expected the following test code to work:

const expectListIsActive = (expectedValue: boolean) => {
  expect(list.find(ListIsActiveContext.Provider).props().value).toBe(expectedValue); // this doesn't work
  expect(listIsActive).toBe(expectedValue);
};

Current behavior

The above code does not work; the ListIsActiveContext.Provider doesn't appear at all in the enzyme .debug() tree output.

Your environment

API

mount

Version

library	version
enzyme	3.10.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.14.0
adapter (below)	1.15.1

Adapter

enzyme-adapter-react-16

[ljharb]

The way to test a Provider is to use a component that has the Consumer in it. In other words, List itself has to be using the consumer. What does List look like?

[shidaying]

same problem, someone help me please

how to get listPage instance

listPage.js

listPage.test.js

const setup1 = () => {
    const initialState = {}
    let mockStore = configureStore()
    let store = mockStore(initialState)
    return (
        <Provider store={store}>
            <ListPage />
        </Provider>
    )
}

const setup2 = () => {
    return (
            <ListPage />
    )
}
describe('>>> test', () => {
    it('+++ test', () => {
        const wrapper1 = shallow(setup1())
        console.log(wrapper.debug())
    })
})

setup1 debug

setup2 debug

[craigkovatch]

@ljharb that sounds like taking a testing dependency on the implementation details of a consuming component, which seems like a bit of an antipattern to me. I'm additionally confused because IIRC JSX <Context.Provider> just maps to another layer of React.createElement. Must be something I'm missing here because my expectation is that a Provider would work like any other component in the React tree.

[ljharb]

@craigkovatch i'm not sure what you mean. If you have a component that accepts context, the component has already taken on that dependency, and forced all consumers to know that somewhere in the react tree, they need to inject the Provider. Thus, tests need to do the same.

If you don't want to do that, then don't use React Context, because that's precisely how it works.

[craigkovatch]

Ah, ok. So you’re suggesting I write a mock component to test consuming the context value, rather than testing the provider prop directly.

This works, but still seems more complex to me. I know you’ve put lots of thought into the paradigms here — could you help me understand why you don’t think the provider value should (also?) be directly testable in the way I suggested in my original report?

[ljharb]

Either way. It's perfectly fine to test the provider prop directly, because "the provider" is already an implicit dependency of the component.

React simply doesn't provide a way to test Providers directly, outside of the render pipeline (the same is true for hooks, and almost everything else).

[craigkovatch]

Ok, thanks Jordan.