Как написать контрольный пример для простого компонента React с использованием Jest и Enzyme

Question

У меня есть простой компонент React, который выглядит примерно так, как показано ниже:

export default class New_Component {
   static propTypes = {
        name: PropTypes.string.isRequired,
        mobile: PropTypes.number.isRequired,
        address: PropTypes.string.isRequired
   };
}

render() {
   return(
    <div>
      <h1>{this.props.name}</h1>
      <h6>{this.props.mobile}</h6>
      <p>{this.props.address}</p>
   </div>
 )
}

Итак, если я хочу написать контрольный пример для вышеуказанного компонента с использованием Jest и Enzyme , какие возможные тестовые сценарии можно написать для этого компонента? Может кто-нибудь, пожалуйста, направить меня? Я не могу выяснить возможные тестовые случаи, поскольку у меня нет никаких функций в этом компоненте, поэтому я могу проверить результат функции в функции Ожидаем () .

Answer 1

Поскольку я только недавно прыгнул в мир React, я дам вам образец для начала. Тестирование может быть сложной задачей.

ОДНАКО Я согласен с принятым ответом в том, что это может быть излишним для компонента такого размера.

Это будет моей отправной точкой для чего-то, что может стать более сложным.

describe("<New_Component/>", () => {
  let actual;

  const complete_props = {
    name: "test",
    mobile: 12345678,
    address: "123 test road"
  };



 describe("given all neccessary props", () => {
    beforeEach(() => {
      actual = shallow(<NewComponent {...complete_props} />);
    });

    it("renders correctly", () => {
      expect(actual).toMatchSnapshot();
    });

    it("should render the component", () => {
      expect(actual.find("NewComponent"));
    });

    it("should render three children", () => {
      expect(actual.children().length).toEqual(3);
    });

    it("should render h1 with correct prop", () => {
      expect(actual.props().children[0]).toEqual(
        <h1>{complete_props.name}</h1>
      );
    });

    it("should render h6 with correct prop", () => {
      expect(actual.props().children[1]).toEqual(
        <h6>{complete_props.mobile}</h6>
      );
    });

    it("should render p with correct prop", () => {
      expect(actual.props().children[2]).toEqual(
        <p>{complete_props.address}</p>
      );
    });
  });
});

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

Answer 2

Полагаю, что не стоит писать какие-либо модульные тесты для этого простого компонента, и, к примеру, сфокусируйте свое короткое время на этом сквозном тестировании.

Если ваш менеджер отслеживает% покрытия теста в вашем приложении, вы можете просто проверить, что ваш компонент отображает name, mobile и address:

const wrapper = shallow(<New_Component
  name="testName"
  mobile="000000"
  address="addressMobile"
/>);

expect(wrapper.find('h1').text()).to.equal('testName');
expect(wrapper.find('h6').text()).to.equal('000000');
expect(wrapper.find('p').text()).to.equal('addressMobile');