Работает ли .defaultProps с компонентами React без состояния?

Question

код:

export default function RoundedLink({ url, text, className, target }) {
  return (
    <a
      className={`${buttonCorners} ncss-btn-medium border-black ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm ${className}`}
      href={url}
      rel="noopener"
      target={target}
    >
      {text}
    </a>
  );
}

RoundedLink.defaultProps = {
  className: '',
  target: '_self',
};

RoundedLink.propTypes = {
  url: string.isRequired,
  text: string.isRequired,
  className: string,
  target: string,
};

Но когда я проверяю его, я получаю undefined в className и target:

expect(RoundedLink({})).toMatchSnapshot();

...

 <a
    className="css-1by5joz ncss-btn-medium border-black ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm undefined"
    href={undefined}
   rel="noopener"
   target={undefined}
  />

1. Разве это не должно быть ошибкой, когда я пытаюсь создать его без необходимой пропы?

2. Почему реквизит по умолчанию не заполняется?

Мой единственный вывод заключается в том, что значения по умолчанию и типы пропов не работают, если вы не используете class или createReactClass для объявления своих компонентов.

https://reactjs.org/docs/react-without-es6.html#declaring-default-props

Answer 1

Вы можете использовать defaultProps также для компонентов функции без сохранения состояния.Может быть, вы получаете такое поведение, потому что вы вызываете компонент как обычную функцию вместо использования renderer.create для создания экземпляра компонента:

  const tree = renderer.create(<RoundedLink />).toJSON();
  expect(tree).toMatchSnapshot();

Полный пример:

import TestRenderer from 'react-test-renderer';
import React from 'react';
import RoundedLink from './RoundedLink';

describe('<RoundedLink />', () => {
  test('#render', () => { 
    const tree = TestRenderer.create(<RoundedLink />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});