在编写反应测试时,我已经阅读了一些资源,并且Warning: You called act(async () => ...) without await.
警告对我来说仍然是永无止境的故事。这次我在提交Formik
表单后有条件地渲染了一些东西。
我确定了await
,findByTestId
所以应该有变化,对吧?测试通过了,那有什么问题呢?:/欢迎任何提示!
我的测试:
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>
);
}