Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

[Feature Request] MockedProvider can pass down props to child component #2482

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions Changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 8 additions & 1 deletion src/test-utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface MockedProviderProps<TSerializedCache = {}> {
defaultOptions?: DefaultOptions;
cache?: ApolloCache<TSerializedCache>;
resolvers?: Resolvers;
childProps?: object;
}

export interface MockedProviderState {
Expand Down Expand Up @@ -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() {
Expand Down
37 changes: 37 additions & 0 deletions test/test-utils.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down