0

我正在编写单元测试，以验证带有少量文本输入和自定义下拉字段的反应原生表单。我正在jest使用react-native-testing-library. 该表格在提交 btn press 时得到验证。表单值被保存到上下文并从上下文中访问（使用 useReducer() 钩子）。

我无法模拟该Dropdown字段的输入值，因此要跳过它，我想通过向上下文发送一个随机有效值来设置该字段的上下文值，用 in 包裹act()，这样验证就不会停在那里并且继续验证下TextInput。

但是，当我记录上下文值时，它仍然像以前一样保持不变，并且验证会因之前的字段而停止。

ContextProvider.js

export function FormContextProvider({children}){
  const [formValues, dispatchFormValues] = useReducer(
    formValuesReducer,
    individualFormInitialState
  );

  return <FormContext.Provider value={formValues,dispatchFormValues}> 
  {children}</FormContext.Provider>

}


function formValuesReducer(state, action) {
  switch (action.type) {
    case "FIELD_VALUE":
      return { ...state, ...action.payload };  
    default:
      return state;
  }
}

FormComponent.js


export default class FormComponent extends React.Component {
  render() {
  const formContext = useContext();
  const [t1Err, setT1Err] = useState("");
  const [t2Err, t2Err] = useState("");
  const [dpErr, dpErr] = useState("");

  const validateAndSubmit = ()=>{
   //some validations...

  }

  return (
      <View style={styles.container}>
        <TextInput
        value="whatever"
        onChange={(val)=>formContext.dispatch({
          type:"FORM_VALUE",
          payload:{t1:val}
        })}
        ></TextInput>
      <DropdownSelect 
        some={props}
        onChange={(val)=>formContext.dispatch({
          type:"FORM_VALUE",
          payload:{dp:val}
        })}
       value={formContext.formValues.dp}
     />
     <TextInput
        value="whatever"
        onChange={()=>formContext.dispatch({
          type:"FORM_VALUE",
          payload:{t2:val}
        })}
        ></TextInput>
      {t2Err ? <InputError>{"This field is mandatory"}</InputError>:<></>}
      <Button onPress={validateAndSubmit}></Button>
      </View>
    );
  }
}

FormComponent.test.js

   const form = (
    <FormContextProvider>
      <FormContext.Consumer>
        {props => {
          return (
            <Text testID="context_exposer" {...props}>
              Exposes Context
            </Text>
          );
        }}
      </FormContext.Consumer>
      <FormComponent navigation={navigation} />
    </FormContextProvider>
   );

    //expose the context for tests
    const {
     dispatchFormValues,
     formValues
    } = form.getByTestId("context_exposer").props;


   describe("form validations",()=>{

     it("t2 validations",done=>{

        fireEvent.changeText(t1, "valid input text");
        act(
          ()=>dispatchFormValues({
            type: "FIELD_VALUE",
            payload: { dp: 200 }
          })
        );
        console.log("formValues", formValues.dp);/* *** still logs old values *** */
        fireEvent.press(submitBtn);
        //t2 input is empty and required, so on submitbtnPress, should show an error msg.
        const t2Err = t2Input.findByType(InputError); 

        expect(t2Err).not.toBeNull();//test fails since no errorMsg element is showing.
        done();

   });


  })

所以，我的问题是，为什么上下文不更新？这是更新上下文的错误方法吗？

注意：我不是在嘲笑上下文，而是更喜欢这种方式来使用实际上下文。

4

1 回答 1

0

实际上问题是我犯了一些错误，而不是测试库的任何怪癖。

  1. 上下文正在更新，只是我使用的全局变量具有旧值，为了获取更新的上下文值，我必须再次访问上下文，如form.getByTestId("context_exposer").props.formValues
  2. 我在第一个文本输入中输入了无效文本（“有效输入文本”/* 无效:) */），将验证暂停到那里。

感谢您的时间。

于 2019-10-18T15:40:47.543 回答