Блог

Главная - Вопросы по программированию - Ошибка типа: не удается прочитать свойство ‘style’ с нулевым значением в textareautosize

Ошибка типа: не удается прочитать свойство ‘style’ с нулевым значением в textareautosize

#javascript #reactjs #typescript #jestjs #material-ui

#javascript #reactjs #typescript #jestjs #материал-пользовательский интерфейс

Вопрос:

У меня возникли проблемы с тестированием моментальных снимков и я не могу понять, почему. Я получаю следующую ошибку:

введите описание изображения здесь

Компонент на самом деле представляет собой форму с 3 полями: полное имя, адрес электронной почты и Примечание. Существует также флажок, который управляет полем электронной почты и заметок на случай, если мы не хотим помещать эту информацию в форму. Для заметки я использую textareautosize, чтобы изменить размер текстовой области (в соответствии с требованиями).

 const [missingInfo, setMissingInfo] = useState(false);

const initialValues = {
  fullName: '',
  email: '',
  note: '',
};

return (
  <Formik
      initialValues={initialValues}
      validationSchema={object({
        fullName: string().required('Must contain a full name'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        setSubmitting(true);
        ...
      }}
    >
      <Form>
        <Typography>Title</Typography>
        <HashLink
          to={{ hash: '#xxx' }}
          onClick={() => toggleHash()}
        >
          Changed your mind?
        </HashLink>
        <Typography>Full name</Typography>
        <Field name="fullName">
          {({ field }: FieldProps) => (
            <TextField
              id="fullName"
              variant="outlined"
              type="text"
              fullWidth
              {...field}
            />
          )}
        </Field>
        <ErrorMessage name="fullName">
          {msg => <div className={styles.errorMessage}>{msg}</div>}
        </ErrorMessage>
        <FormControlLabel
          control={
            <Checkbox
              checked={missingInfo}
              onChange={() => setMissingInfo(!missingInfo)}
              name="missingInfo"
            />
          }
          label="No info?"
        />
        {!missingInfo amp;amp; (
          <>
            <Typography>Email</Typography>
            <Field name="email">
              {({ field }: FieldProps) => (
                <TextField
                  id="email"
                  variant="outlined"
                  type="text"
                  fullWidth
                  {...field}
                />
              )}
            </Field>
            <Typography>Note</Typography>
            <Field name="note">
              {({ field }: FieldProps) => (
                <TextareaAutosize
                  rowsMin={3}
                  className={styles.textArea}
                  {...field}
                />
              )}
            </Field>
          </>
        )}

        <Button
          variant="contained"
          type="submit"
        >
          Apply
        </Button>
      </Form>
    </Formik>
)

Ошибка, как я сказал в тесте моментального снимка:

 test('matches snapshot', () => {
  const tree = renderer
    .create(
      <BrowserRouter>
        <MyComponent {...props} />
      </BrowserRouter>,
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Может кто-нибудь, пожалуйста, помочь?

Комментарии:

1. Вы когда-нибудь это выясняли? Я столкнулся с той же проблемой. Спасибо!