如果子组件被渲染，如何仅检查 Jest答案

【问题标题】：How to check with only Jest if a child component gets rendered如果子组件被渲染，如何仅检查 Jest
【发布时间】：2019-03-15 20:46:26
【问题描述】：

我在我的父组件中有一个愉快的测试路径，它将呈现一个组件或 p 标记。我迷失了如何测试该子组件是否被渲染。这是我的父组件。

if (startDate && endDate && startDate <= endDate) {
  return (
    <div className={styles.root}>
      <DateRangeInput {...this.props} />
      <DateRangePicker
        startDate={moment(startDate)}
        endDate={moment(endDate)}
        onChange={this.onDatePickerChange}
        mode={DateRangePicker.MODE_RANGE}
      />
    </div>
  );
}
return (
  <div className={styles.root}>
    <DateRangeInput {...this.props} />
    <p>Cannot have start date after end date</p>
  </div>
);

这是我的测试。我不确定我是否以错误的方式解决这个问题，或者测试 if 语句时的最佳实践

describe('<DateRangeInputPicker />', () => {
  it('should show null messaging when endDate < startDate', () => {
    const { getByText } = render(
       <DateRangeInputPicker
          startDate={new Date(2018, 0, 14)}
          endDate={new Date(2017, 1, 29)}
          onChange={jest.fn()}
       />
   );

  expect( getByText('Cannot have start date after end date')).toBeInTheDocument();
});

 it('should render DateRangePicker when endDate > startDate', () => {
   const { getByText } = render(
     <DateRangeInputPicker
       startDate={new Date(2018, 0, 14)}
       endDate={new Date(2017, 1, 29)}
       onChange={jest.fn()}
    />
  );


});

});

【问题讨论】：

你能用你正在使用的任何其他与 jest 相关的包的信息更新问题吗？我在 React 中使用过 Jest，但我不熟悉 getByText 或 toBeInTheDocument。

标签： reactjs typescript jestjs

【解决方案1】：

如果您计划测试组件的生命周期以及它如何根据更新呈现，您应该考虑在您的测试环境中使用 Jest 实现 Enzyme。

这段代码将测试您想要实现的目标。如果您不熟悉 Enzyme，互联网上有大量的课程、教程和博客文章。

import React from 'react';
import { shallow } from 'enzyme';
import DateRangeInputPicker from './DateRangeInputPicker';

describe('DateRangeInputPicker', () => {

    const component = shallow(<CreateTask />);

    describe('when endDate < startDate', () => {
        beforeEach(() => {
            // Any code here to make your component come to that condition
        });

        it('should show a message', () => {
            const message = component.find('p'); // would be better to use an id or class selector
            expect(message.text()).toBe('Cannot have start date after end date');
        });
    });
});

无论如何，我会尽力解释你应该怎么做。

使用 Enzyme shallow 渲染安装您的组件。
使您的组件满足您期望的条件。有很多方法可以实现这一点，如果你有这些属性，你可以访问setState 来更新组件状态。
使用 Enzyme 的 find() 方法找到您期望的 DOM 节点。

【讨论】：