✨ add react contexts externals option

packages/component-test-utils-react/src/__tests__/react-context.spec.js

@@ -73,4 +73,25 @@ describe('shallow - react context', () => {
       '<Symbol(react.provider)><Toolbar><div><ThemedButton><div>light</div></ThemedButton></div></Toolbar></Symbol(react.provider)>'
     );
   });
+
+  it('should overide the context when givin a specific param to the shallow', () => {
+    const ThemeContext = React.createContext('light');
+
+    const ThemedButton = () => {
+      const context = React.useContext(ThemeContext);
+      return <div>{context}</div>;
+    };
+
+    const cmp = shallow(<ThemedButton/>, {
+      externals: {
+        contexts: [
+          {id: ThemeContext, value: 'dark'}
+        ]
+      }
+    });
+
+    expect(cmp.html()).toBe(
+      '<div>dark</div>'
+    );
+  });
 });

packages/component-test-utils-react/src/dispatcher/index.js

@@ -56,7 +56,11 @@ class Dispatcher {
   }
 
   useContext(context) {
-    return context._currentValue;
+    const contextOveride = this._shallowedComponent._config.externals &&
+      this._shallowedComponent._config.externals.contexts &&
+      this._shallowedComponent._config.externals.contexts.find(c => c.id === context);
+
+    return contextOveride ? contextOveride.value : context._currentValue;
   }
 
   useReducer(reducer, initialState) {

packages/component-test-utils-react/src/dispatcher/index.spec.js

@@ -6,7 +6,8 @@ describe('dispatcher', () => {
 
   beforeEach(() => {
     component = {
-      _render: jest.fn()
+      _render: jest.fn(),
+      _config: {}
     };
     dispatcher = createDispatcher(component);
   });
@@ -77,6 +78,38 @@ describe('dispatcher', () => {
       const contextValue = dispatcher.useContext({_currentValue: 42});
       expect(contextValue).toBe(42);
     });
+
+    it('should return the context overide when there is one', () => {
+      const contextTest = {_currentValue: 42};
+      component._config = {
+        externals: {
+          contexts: [{id: contextTest, value: 0}]
+        }
+      };
+
+      const contextValue = dispatcher.useContext(contextTest);
+      expect(contextValue).toBe(0);
+    });
+
+    it('should should return actualValue when context is not found', () => {
+      const contextTest = {_currentValue: 42};
+      component._config = {
+        externals: {
+          contexts: [{id: {}, value: 0}]
+        }
+      };
+      const contextValue = dispatcher.useContext(contextTest);
+      expect(contextValue).toBe(42);
+    });
+
+    it('should should return actualValue when no contexts found', () => {
+      const contextTest = {_currentValue: 42};
+      component._config = {
+        externals: {}
+      };
+      const contextValue = dispatcher.useContext(contextTest);
+      expect(contextValue).toBe(42);
+    });
   });
 
   describe('useReducer', () => {

website/docs/api-react.md

@@ -1,12 +1,39 @@
 ## React specialty
 
+### React context
+
+When you want to test component that use a context, you can set while shallow the context using `externals` shallow constructor option.
+
+### Example with jest
+
+```jsx
+const ThemeContext = React.createContext('light');
+
+const ThemedButton = () => {
+  const context = React.useContext(ThemeContext);
+  return <div>{context}</div>;
+};
+
+const cmp = shallow(<ThemedButton/>, {
+  externals: {
+    contexts: [
+      {id: ThemeContext, value: 'dark'}
+    ]
+  }
+});
+
+expect(cmp.html()).toBe(
+  '<div>dark</div>'
+);
+```
+
 ### useDebugValue() hook
 
 If you want to test that your component use this hook, you can set the debug option to true.
 
 If the option is at true, useDebugValue will call `console.debug` function.
 
-#### example with jest :
+#### Example with jest
 
 ```jsx
 it('should call console.debug', () => {