Блог

Здравствуйте, я пытаюсь высмеять параметры URL в своем тесте на шутку. в основном то, что происходит, у нас есть крючок эффекта использования, который устанавливает состояние контекста на основе предоставленных параметров URL. Затем это должно быть отображено в полях ввода см. Ниже

 useEffect(() => {
    const search = window.location.search;
    const params = new URLSearchParams(search);
    if (search) {
      const streetAddressParam = params.get('streetAddress');
      const cityParam = params.get('city');
      console.log(cityParam);

      const stateParam = params.get('state');
      const zipCodeParam = params.get('zip');
      streetAddressParam amp;amp;
        setUserQFData({
          streetAddress: streetAddressParam,
          city: cityParam,
          state: stateParam,
          zipCode: zipCodeParam,
        });
    }
  }, []);
 

это работает, как и ожидалось.
Однако моя тестовая реализация не отражает изменений в пользовательском интерфейсе, я высмеиваю параметры SERARCH, как показано ниже

 function renderAddressWithContext(value: any) {
  return render(
    <QFFormContext.Provider value={value}>
      <Address />
    </QFFormContext.Provider>
  );
}




test('if params exist ensure they are pre-filled in input fields', () => {

    const location = {
      ...window.location,
      search:
        'streetAddress=8927 Sage Place Dramp;city=Houstonamp;state=TXamp;zip=77071',
    };
    Object.defineProperty(window, 'location', {
      writable: true,
      value: location,
    });

    renderAddressWithContext(props);


    expect(screen.getByTestId('city')).toContain('Houston');
  });
 

у меня есть консольный журнал в эффекте использования, и это работает нормально, он показывает значение Хьюстона, ОДНАКО мой тест на шутку не обновляет значение на входе

Вот входные данные ниже, показывающие, как мы используем задачу userQFState, не имеет значения, но мы используем стилизованные компоненты и извлекаем их из нашей библиотеки

   <Fieldset>
          <Input
            data-testid='city'
            onChange={fieldHandler('city')}
            label='City'
            name='city'
            inputType='text'
            value={userQFData?.city}
            error={getValidationError(validationData, 'city')}
          />
        </Fieldset>
 

вот типы свойств для входного компонента

 export declare type InputProps = {
    autoComplete?: string;
    className?: string;
    disabled?: boolean;
    error?: React.ReactNode;
    inputType?: string;
    label?: React.ReactNode;
    name?: string;
    onBlur?: React.FocusEventHandler;
    onChange?: (value: any, e: React.ChangeEvent) => void;
    value?: string | number | null;
    type?: string;
    endAdornment?: React.ReactNode;
    maxLength?: number;
    children?: React.ReactNode;
    multiline?: boolean;
};
declare const Input: ({ error, inputType, label, onChange, value, maxLength, ...otherProps }: InputProps) => JSX.Element;
export default Input;