嗨，谁能解释一下如何在 React Native 中开玩笑地测试 formik

Question

您好，我使用 formik 创建了用于 React Native 的表单生成器。我正在使用 jest 进行测试，但是当我测试 onSubmit 时没有调用任何人都可以解释如何测试。

     function FormBuilder({data, onSubmit, initialValues, navigation}) {
          const formik = useFormik({
            enableReinitialize: true,
            initialValues: initialValues,
            onSubmit: data => {
              onSubmit(data);
            },
          });
    
      return (
        <View>
          {data.map((item,index) => {
            switch (item.type) {
              case 'text':
                return (
                  <TextBox
                  key={index}
                    onChangeText={formik.handleChange(item.name)}
                    onBlur={formik.handleBlur(item.name)}
                    value={formik.values[item.name]}
                    label={item.name}
                    touched={formik.touched}
                    errors={formik.errors}
                    required={
                      !!item.validators &&
                      item.validators.find(valid => valid.type === 'required')
                    }
                    {...item}
                  />
                );
              case 'button':
                return (
                  <CustomButton key={index} testID={item.testID} title= 
             {item.name} onPress={formik.handleSubmit} />
            );
           }
          })}
        </View>
         )
         }

我在屏幕上这样称呼这个组件。谁能解释一下我们如何为此编写测试集成测试

            <FormBuilder
                  initialValues={initialValues}
                  data={[
                    {
                      type: 'text',
                      name: 'whatsAppNumber',
                      testID: 'input',
                     
                    },
                    {type: 'button', name: 'login', testID: 'button'},
                  ]}
                  onSubmit={submitData}
                />

Answer 1

您可以通过以下方法测试您的代码，请使用 msw 为 api 调用创建虚拟服务器。

import {fireEvent, render,} from '@testing-library/react-native';
describe('Login Screen', () => {
  it('should validate form', async () => {
  
    const {getByTestId} = render(<Login />);
    const numberField = getByTestId('input');
    const button = getByTestId('button');
    expect(numberField).toBeDefined();
    expect(button).toBeDefined();
    fireEvent.changeText(numberField, '9876543215');
    fireEvent.press(button)

    await waitFor(() =>{
     //expect your function to be called
  })
 });
});

嗨，谁能解释一下如何在 React Native 中开玩笑地测试 formik

Hi can anyone explain how to test formik with jest in react native

jestjs

react-native

formik