How to test render prop with mount?

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: '[e-mail]', password: 'password' }
                    },
                    result: { data: registerUser }
                }
            ];

            wrap = mount(
                <MockedProvider mocks={mocks} addTypename={false}>
                    <LoginPage />
                </MockedProvider>
            );

            // 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 (
            <AuthRender>
                {({ handleSubmit, onInputChange, errorMessage, auth, setErrorMessage }: InjectedProps) => {
                    return (
                        <Layout title={'Login'}>
                            <Mutation mutation={LOGIN_MUTATION} onError={() => { }}>
                                {(mutate: any, { loading, error, data }: any) => {
                                    if (!error && data) {
                                        Router.push('/');
                                    }
                                    console.log('properties', data, loading);

                                    return (
                                        <div className="form-container d-flex flex-column justify-content-center">
                                            {loading && <LoadingBar />}
                                            {error && <Alert message={error.graphQLErrors[0].message} />}
                                            {errorMessage && <Alert message={errorMessage} />}
                                            <div className="text-center heading heading-large">Login</div>
                                            <div className="row d-flex justify-content-center">
                                                <form
                                                    className="d-flex flex-column col-10 col-sm-8 col-md-3"
                                                    onSubmit={handleSubmit.bind(
                                                        this, {
                                                            auth,
                                                            mutate,
                                                            validateInputs: this.validateInputs,
                                                            setErrorMessage
                                                        }
                                                    )}
                                                >
                                                    <InputField
                                                        name={'email'}
                                                        labelTitle={'Email'}
                                                        placeholderTitle={'Enter your email'}
                                                        onInputChange={(e: ChangeEvent<HTMLInputElement>) =>
                                                            onInputChange(e)
                                                        }
                                                    />
                                                    <InputField
                                                        name={'password'}
                                                        labelTitle={'Password'}
                                                        type="password"
                                                        placeholderTitle={'Enter your password'}
                                                        onInputChange={(e: ChangeEvent<HTMLInputElement>) =>
                                                            onInputChange(e)
                                                        }
                                                    />
                                                    <ButtonPrimary title={'Login'} />
                                                </form>
                                            </div>
                                        </div>
                                    );
                                }}
                            </Mutation>
                        </Layout>
                    )
                }}
            </AuthRender>
        );
    }
}

export default withAuthPages(Login);

[wwselleck]

I’m running into this as well, renderProp definitely exists on ReactWrapper, but the types only include it for ShallowWrapper. Where’s the best place to surface this to get it fixed @ljharb ?https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/enzyme/index.d.ts#L490

[ljharb]

Again, that’s a bug in the DT types for enzyme - something you should bypass in order to get your actual code working.