0

在编写反应测试时,我已经阅读了一些资源,并且Warning: You called act(async () => ...) without await.警告对我来说仍然是永无止境的故事。这次我在提交Formik表单后有条件地渲染了一些东西。

我确定了awaitfindByTestId所以应该有变化,对吧?测试通过了,那有什么问题呢?:/欢迎任何提示!

我的测试:

test.only("Sign in form shows server error", async () => {
    server.use(
        rest.post("my url", (req, res, ctx) => {
            return res(
                ctx.status(400)
            );
        }),
    );    

    const component = render(<SignInScreen />);
    const usernameInput = await component.findByTestId(tiConfig.SIGN_IN_USERNAME_INPUT);
    const passwordInput = component.getByTestId(tiConfig.SIGN_IN_PASSWORD_INPUT);
    const submit = component.getByTestId(tiConfig.SIGN_IN_SUBMIT);

    fireEvent.changeText(usernameInput, "username");
    fireEvent.changeText(passwordInput, "password");
    fireEvent.press(submit);

    // Getting act warning on the line below
    const serverError = await component.findByTestId(tiConfig.SIGN_IN_SERVER_ERROR);

    expect(serverError).not.toBeNull();
    expect(serverError.props.children).toBe(translations.somethingWentWrongTryAgainLater);
});

登录屏幕:

const SignInScreen: React.FC = () => {
    const { translations } = useContext(LocalizationContext);
    const [signIn, { isLoading, isError }] = useSignInMutation();

    const initialValues: SignInRequest = {
        name: '',
        password: ''
    };

    const validationSchema = Yup.object({
        name: Yup.string()
            .required(translations['required'])
            .max(15, ({max}) => translations.formatString(
                translations['validationNCharOrLess'], { n: max })),
        password: Yup.string()
            .required(translations['required'])
    });

    const handleForgotPassword = () => navigation.navigate(ScreenNames.ForgotPassword);
    const handleSignUp = () => navigation.navigate(ScreenNames.SignUp);
    const handleSubmit = async (values: SignInRequest, formikHelpers: FormikHelpers<SignInRequest>) => {
        await signIn(values)
            .unwrap()
            .catch(e => {
                if ('data' in e && e.data &&
                    'errors' in e.data && e.data.errors)
                {
                    formikHelpers.setErrors(mapErrors(e.data.errors));
                }
            })
    }

    return (
        <SafeAreaView
            testID={tiConfig.SAFE_AREA_VIEW}
            style={{ flex: 1 }}>
            <View
                testID={tiConfig.SIGN_IN_SCREEN}
                style={styles.container}>
                <View>
                    <Text>{translations['signIn']}</Text>
                    <Formik
                        initialValues={initialValues}
                        validationSchema={validationSchema}
                        onSubmit={handleSubmit}>
                        {
                            ({ values, errors, handleSubmit, handleChange }) => (
                                <View>
                                    <Input
                                        testID={tiConfig.SIGN_IN_USERNAME_INPUT}
                                        value={values.name}
                                        placeholder={translations['username']}
                                        onChangeText={handleChange('name')}
                                        errorMessage={errors.name} />
                                    <Input
                                        testID={tiConfig.SIGN_IN_PASSWORD_INPUT}
                                        value={values.password}
                                        placeholder={translations['password']}
                                        onChangeText={handleChange('password')}
                                        errorMessage={errors.password}
                                        secureTextEntry />
                                    {
                                        isError ?
                                            <View>
                                                <Text testID={tiConfig.SIGN_IN_SERVER_ERROR}>
                                                    { translations['somethingWentWrongTryAgainLater'] }
                                                </Text>
                                            </View>
                                            : null
                                    }
                                    <Button
                                        testID={tiConfig.SIGN_IN_SUBMIT}
                                        title={translations['signIn']}
                                        onPress={handleSubmit}
                                        loading={isLoading} />
                                </View>
                            )
                        }
                    </Formik>
                </View>
            </View>
        </SafeAreaView>
    );
}
4

0 回答 0