How to test render prop with mount?
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
Hey guys,
I was wondering how one should test a render prop using mount? The reason for that is because I'm using Apollo and trying to test a render prop that is wrapping Apollo Mutation render prop. I'm trying to test the loading state, but I cannot figure out how to pass properties to AuthRender and I believe that I must use mount since Apollo used component lifecycles behind the scenes. Any help would be highly appreciated. Thanks.
The test
```
it('renders loading state initially', done => {
const mocks = [
{
request: {
query: LOGIN_MUTATION,
variables: { email: 'test@gmail.com', password: 'password' }
},
result: { data: registerUser }
}
];
wrap = mount(
);
// How do I access AuthRender and pass props?
expect(wrap.find(LoadingBar)).toHaveLength(1);
done();
});
```
The component I'm trying to test.
```
class Login extends Component {
validateInputs(
{ email, password }: { email?: string, password?: string }
): string | null {
if (!email || !password) {
return UNFILLED_FIELDS_ERROR;
}
return null;
};
render() {
return (
{({ handleSubmit, onInputChange, errorMessage, auth, setErrorMessage }: InjectedProps) => {
return (
{ }}>
{(mutate: any, { loading, error, data }: any) => {
if (!error && data) {
Router.push('/');
}
console.log('properties', data, loading);
return (
{loading && }
{error && }
{errorMessage && }
) =>
onInputChange(e)
}
/>
) =>
onInputChange(e)
}
/>
);
}}
)
}}
);
}
}
export default withAuthPages(Login);
```
Contributor guide
Assessment
This issue has not been assessed yet.