问题描述
我正在尝试为使用 Formik 构建的 React Native 组件编写一些测试。这是一个简单的表单,要求输入用户名和密码,我想使用使用 Yup 构建的验证架构。
当我使用模拟器并手动测试表单时,表单的行为符合预期,只有在输入值无效时才会显示错误消息。
但是,当我尝试使用 @testing-library/react-native
编写一些自动化测试时,行为并不是我所期望的。即使提供的值有效,错误消息也会显示在测试中。代码如下:
// App.test.js
import React from 'react';
import { render,act,fireEvent } from '@testing-library/react-native';
import App from '../App';
it('does not show error messages when input values are valid',async () => {
const {
findByPlaceholderText,getByPlaceholderText,getByText,queryAllByText,} = render(<App />);
const usernameInput = await findByPlaceholderText('Username');
const passwordInput = getByPlaceholderText('Password');
const submitButton = getByText('Submit');
await act(async () => {
fireEvent.changeText(usernameInput,'testUser');
fireEvent.changeText(passwordInput,'password');
fireEvent.press(submitButton);
});
expect(queryAllByText('This field is required')).toHaveLength(0);
});
// App.js
import React from 'react';
import { TextInput,Button,Text,View } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';
const Schema = Yup.object().shape({
username: Yup.string().required('This field is required'),password: Yup.string().required('This field is required'),});
export default function App() {
return (
<View>
<Formik
initialValues={{ username: '',password: '' }}
validationSchema={Schema}
onSubmit={(values) => console.log(values)}>
{({
handleChange,handleBlur,handleSubmit,values,errors,touched,validateForm,}) => {
return (
<>
<View>
<TextInput
onChangeText={handleChange('username')}
onBlur={handleBlur('username')}
value={values.username}
placeholder="Username"
/>
{errors.username && touched.username && (
<Text>{errors.username}</Text>
)}
</View>
<View>
<TextInput
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
value={values.password}
placeholder="Password"
/>
{errors.password && touched.password && (
<Text>{errors.password}</Text>
)}
</View>
<View>
<Button
onPress={handleSubmit}
// If I explicitly call validateForm(),the test will pass
// onPress={async () => {
// await validateForm();
// handleSubmit();
// }}
title="Submit"
/>
</View>
</>
);
}}
</Formik>
</View>
);
}
我不确定我是否正确编写了测试。我认为 Formik 会在调用 handleSubmit
函数时自动验证表单。
在 App.js
中,如果我显式调用 validateForm
,测试将通过。但是,仅仅为了满足测试而更改 onPress
处理程序的实现感觉是不对的。也许我错过了围绕这个问题的一些基本概念。任何见解都会有所帮助,谢谢。
软件包版本:
"@testing-library/react-native": "^7.1.0","formik": "^2.2.6","react": "16.13.1","react-native": "0.63.4","yup": "^0.32.8"
解决方法
终于有时间重温这个问题了。虽然我还不能 100% 确定幕后发生了什么,但我认为我发现的结果可能会让其他人受益,所以我会在这里分享。
这个问题与两个子问题交织在一起。第一个与 Promise
的模块中使用的 React Native
有关,第二个与 Formik
下面是修改后的App.test.js
内的代码,保持App.js
不变,
// App.test.js
import React from 'react';
import { render,fireEvent,waitFor } from '@testing-library/react-native';
import App from '../App';
it('does not show error messages when input values are valid',async () => {
const { getByPlaceholderText,getByText,queryAllByText } = render(<App />);
const usernameInput = getByPlaceholderText('Username');
const passwordInput = getByPlaceholderText('Password');
const submitButton = getByText('Submit');
await waitFor(() => {
fireEvent.changeText(usernameInput,'testUser');
});
await waitFor(() => {
fireEvent.changeText(passwordInput,'password');
});
fireEvent.press(submitButton);
await waitFor(() => {
expect(queryAllByText('This field is required')).toHaveLength(0);
});
});
通常情况下,我们不需要使用 act
来包裹 fireEvent
,因为 fireEvent
默认已经用 act
包裹,这要归功于 testing-library
.但是,由于Formik
在文本值改变后异步执行验证,并且验证函数不受React
的调用栈管理,所以我们需要手动将fireEvent
调用包裹起来act
,或其他方便的方法:waitFor
。简而言之,由于其异步性,我们需要用 fireEvent.changeText
包裹 waitFor
。
但是,将代码改成上述格式并不能解决所有问题。尽管测试通过,但您会遇到与 act
相关的警告。这是一个与 Promise
相关的已知问题,因为 React Native 的 Jest 预设会覆盖原生 Promise。 (https://github.com/facebook/react-native/issues/29303)
如果您注释掉该行
global.Promise = jest.requireActual('promise');
在第 20 行左右的 node_modules/react-native/jest/setup.js
中,此问题将得到解决。但不建议直接修改node_modules
中的文件。一种解决方法是设置一个笑话预设来恢复原生 Promise,就像这里 (https://github.com/sbalay/without_await/commit/64a76486f31bdc41f5c240d28263285683755938)