Question

我正在编写单元测试，以验证带有很少文本输入和自定义下拉字段的react本机表单。我在jest中使用react-native-testing-library。该表格在提交btn新闻时经过验证。表单值将保存到上下文中，并可以从上下文中访问（使用useReducer（）挂钩）。

我无法模拟到Dropdown字段的输入值，因此要跳过它，我想通过向上下文分配一个随机有效值来设置字段的上下文值，并用{包裹{1}}，以便验证不会在此处停止，而是继续验证下一个act()。

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

ContextProvider.js

TextInput

FormComponent.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.test.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>
    );
  }
}

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

注意：我不是在模拟上下文，而是希望以这种方式使用实际上下文。

Answer 1

实际上，问题是我犯了一些错误，而不是测试库有任何古怪之处。

上下文正在更新，只是我正在使用的全局变量具有旧值，并且要获得更新的上下文值，我必须再次访问上下文，例如form.getByTestId("context_exposer").props。formValues < / li>
我在第一个文本输入中输入了无效文本（“有效输入文本” / *无效:) * /），从而使验证本身停在那里。

谢谢您的时间。

React Native：在Jest单元测试中更新上下文api值

1 个答案: