Я пишу модульные тесты для проверки правильной собственной формы с небольшим количеством текстовых вводов и настраиваемым раскрывающимся полем. Я использую jest с react-native-testing-library. Форма проверена на отправку прессы. Значения формы сохраняются и доступны из контекста (который использует хук useReducer ()).
Я не мог смоделировать ввод значения в поле Dropdown, поэтому, чтобы пропустить его, я хотелустановить значение контекста поля, отправив случайное допустимое значение в контекст, завернутый в 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();
});
})
Итак, мой вопрос: почему контекст не обновляется? Это неправильный способ обновления контекста?
Примечание: Я не насмехаюсь над контекстом и предпочел бы этот способ использовать фактический контекст.