React JS: Find out if component is inside a context provider

Question

I'm using React's Context API to pass some context to lower level components.

I want to be able to run the component without a context provider (for testing). For this to work, I need to check whether there is a context provider around my component.

Example code:

const Wrapper = () => {

  // in my real app, there are some levels 
  // between the provider and the child component

  return <NameProvider value={name: 'User'}>
    <ChildComponent />
  </NameProvider>
}

const ChildComponent = () => {
  if (/* what can I put here ? */) {
    // inside Provider
    return <NameConsumer>
      {context => <span>{context.name}</span>}
    </NameConsumer>
  } else {
    // no provider available, e.g. in a test file
    return <span>Test Text</span>
  }
}

This question is not specifically about testing. There could be other situations where a component needs to work both inside and outside a context provider.

This is not a good approach to modify the component itself for test purposes only. You'd better try to mock the context in test. — gazdagergo
– gazdagergo, Commented Sep 4, 2018 at 13:47
@ArupRakshit That api seems to use the old context, not the new context in React 16.3 — KWeiss
– KWeiss, Commented Sep 4, 2018 at 13:55
It's unclear what is the problem with importing Provider in the place where you define ChildComponent, especially if this is for testing purposes. — Estus Flask
– Estus Flask, Commented Sep 4, 2018 at 13:57
@estus In my case, the problem is that this Provider does not cooperate with Enzyme's mount function (produces errors). That said, the answer could be "there is no way to find out if we're in a context provider". — KWeiss
– KWeiss, Commented Sep 4, 2018 at 14:00

Estus Flask · Accepted Answer · 2018-09-04 14:39:10Z

No official way is provided for checking whether there is <Provider> parent for <Consumer> child.

Generally, there is no difference if <Consumer> is inside or outside <Provider> with undefined value, it will be provided with undefined value in both cases.

It's possible to check current context value using internal _currentValue property, but this may result in false positives for undefined context value:

const ChildComponent = () => {
  if (NameConsumer._currentValue !== undefined) {
    // inside Provider
    return <NameConsumer>
      {context => <span>{context.name}</span>}
    </NameConsumer>
  } else {
    // no provider available, e.g. in a test file
    return <span>Test Text</span>
  }
}

Notice that this may not work as expected in asynchronous rendering, and relying on internals isn't recommended. A better way would be to check for test environment instead.

A more testable way is to use NameContext.Consumer consistently instead of NameConsumer, so Consumer property could be mocked in tests. Otherwise this may require to mock a module where NameConsumer is defined.

MiF · Accepted Answer · 2023-05-19 21:14:34Z

1

You can set object-like default value (not primitive or null for safity) for context:

export const someContextDefValue = {}
export const someContext = createContext(someContextDefValue)

Now you can check context value:

const someContextValue = useContext(someContext)
if (someContextValue === someContextDefValue) {
    // Non under context
} else {
    // Context provider detected
}

It will work because we must set value to context provider (<someContext.Provider value={currentContextValue}>), but new object in value not equal with default value

answered May 19, 2023 at 21:14

MiF

6987 silver badges13 bronze badges

1 Comment

MiF Over a year ago

Or you can set Symbol as default value

JonShipman · Accepted Answer · 2021-11-11 18:27:15Z

0

Just check the context. If it's undefined, then there's no Provider.

const myContext = useContext(theContext);

if ( myContext ) {
  return <div>I have a provider.</div>
}

return <div>I have no provider.</div>

I typically use it for components I want to work standalone and be part of a larger widget. See something like Google Maps where I want to hoist up the map context.

const __mapContext = useContext(MapContext);

if ( __mapContext ) {
  return <GoogleMap {...props} />
}

return (
  <GoogleMapProvider>
    <GoogleMap {...props} />
  </GoogleMapProvider>
);

answered Nov 11, 2021 at 18:27

JonShipman

7331 gold badge7 silver badges8 bronze badges

4 Comments

Ben Saufley Over a year ago

This is not a reliable method, as many contexts will have default values. In fact, using TypeScript, at least with certain configurations, a default value will be enforced. You can see an example of what that looks like here: codesandbox.io/s/twilight-browser-j40wod?file=/src/App.tsx

JonShipman Over a year ago

Another method, set a property and check for that. e.g. if ( myContext?.somePropertyThatIsUnique ) and in your context createContext just initialize with { somePropertyThatIsUnique: true }.

SnazzyPencil Over a year ago

As noted above, you will need to be sure that all created contexts have a default value of null, otherwise the guard will always pass.

JonShipman Over a year ago

Correct, you can createContext(undefined) to do that.

Collectives™ on Stack Overflow

React JS: Find out if component is inside a context provider

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related