[Feature Request] MockedProvider can pass down props to child compone…

…nt (#2482)

* MockedProvider takes a props object as prop and injects the key/values as props for the child component

* Change `props` to `childProps` for better clarity

* Changelog update

Changelog.md

@@ -2,6 +2,13 @@
 
 ## vNEXT
 
+### Improvements
+
+- `MockedProvider` now accepts a `childProps` prop that can be used to pass
+  props down to a child component.  <br/>
+  [@miachenmtl](https://github.com/miachenmtl) in [#2482](https://github.com/apollographql/react-apollo/pull/2482)
+
+
 ## v2.5.2
 
 ### Bug Fixes

src/test-utils.tsx

@@ -14,6 +14,7 @@ export interface MockedProviderProps<TSerializedCache = {}> {
   defaultOptions?: DefaultOptions;
   cache?: ApolloCache<TSerializedCache>;
   resolvers?: Resolvers;
+  childProps?: object;
 }
 
 export interface MockedProviderState {
@@ -46,7 +47,13 @@ export class MockedProvider extends React.Component<MockedProviderProps, MockedP
   }
 
   public render() {
-    return <ApolloProvider client={this.state.client}>{this.props.children}</ApolloProvider>;
+    const { childProps } = this.props;
+
+    return (
+      <ApolloProvider client={this.state.client}>
+        {React.cloneElement(React.Children.only(this.props.children), { ...childProps })}
+      </ApolloProvider>
+    );
   }
 
   public componentWillUnmount() {

test/test-utils.test.tsx

@@ -334,6 +334,43 @@ it('errors if the query in the mock and component do not match', done => {
   );
 });
 
+it('passes down props prop in mock as props for the component', done => {
+  interface VariablesWithProps {
+    username: string;
+    [propName: string]: any;
+  }
+
+  class Container extends React.Component<ChildProps<VariablesWithProps, Data, Variables>> {
+    componentWillReceiveProps(nextProps: ChildProps<VariablesWithProps, Data, Variables>) {
+      try {
+        expect(nextProps.foo).toBe('bar');
+        expect(nextProps.baz).toBe('qux');
+        done();
+      } catch (e) {
+        done.fail(e);
+      }
+    }
+
+    render() {
+      return null;
+    }
+  }
+
+  const withUser2 = graphql<VariablesWithProps, Data, Variables>(query, {
+    options: props => ({
+      variables: { username: props.username },
+    }),
+  });
+
+  const ContainerWithData = withUser2(Container);
+
+  renderer.create(
+    <MockedProvider mocks={mocks} childProps={{ foo: 'bar', baz: 'qux' }}>
+      <ContainerWithData {...variables} />
+    </MockedProvider>,
+  );
+});
+
 it('doesnt crash on unmount if there is no query manager', () => {
   class Container extends React.Component {
     render() {