Библиотека тестирования React не отображает ввод onChange в моментальном снимке

У меня есть простой тест моментального снимка с RTL и Jest, любой другой реквизит, который я использую, кроме type и placeholder, я не вижу в результирующем снимке. Это мой компонент ввода: (я использую стилизованный компонент)

const TextField = ({ className, placeholder, onChange, type }) => {
  return (
    <Styled>
      <Styled.input
        type={type}
        placeholder={placeholder}
        className={className}
        onChange={onChange}
      />
    </Styled>
  );
};

Это мой тест:

  it('shall render correctly', () => {
    const { asFragment  } = render(
      <ThemeProvider theme={theme}>
        <TextField placeholder="Ramdom text" type="search" onChange={jest.fn()} />
      </ThemeProvider>,
    );

    expect(asFragment()).toMatchSnapshot();
  });

Полученный снимок:

exports[`TextField component shall render correctly 1`] = `
<DocumentFragment>
  .c0 {
  position: relative;
}

.c1 {
  width: 100%;
  outline: none;
  border: solid 0px;
  border-radius: 10em;
  background: #f4f5f8;
  padding: 8px 8px 8px NaNpx;
  font: 400 1.6rem/normal 'Open Sans','Helvetica','Arial',sans-serif;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  text-transform: none;
}

<label
    class="c0"
  >
    <input
      class="c1"
      placeholder="Ramdom text"
      type="search"
    />
  </label>
</DocumentFragment>
`;

Как видите, во входных реквизитах нет реквизита onChange.


person JSK    schedule 30.08.2020    source источник


Ответы (1)


onChange в вашем JSX — это обработчик событий, предоставляемый React, и он не отображается в фактическом DOM, который отображает RTL.

person Dobby Dimov    schedule 30.08.2020
comment
Не только onChange, даже blabla prop не отображается, ничего, кроме официальных входных атрибутов HTLM, не отображается - person JSK; 30.08.2020