在导入的组件中测试占位符道具答案

【问题标题】：Testing placeholder prop in imported component在导入的组件中测试占位符道具
【发布时间】：2018-11-14 02:45:22
【问题描述】：

我有一个 react 组件，我在其中导入了 react-date-picker，它无法将占位符设置为输入字段的 prop，因此我使用了找到的解决方法（在 componentDidMount 中）在其 github 页面上here。

这是我的组件：

import React from 'react';
import DatePicker from 'react-date-picker';

class AlertModal extends React.Component {

...

  componentDidMount(){
     document.querySelector('.react-date-picker__button__input__day').placeholder = 'Day';
     document.querySelector('.react-date-picker__button__input__month').placeholder = 'Month';
     document.querySelector('.react-date-picker__button__input__year').placeholder = 'Year'
   }

    render = () => {
       return (
          <div>
             <DatePicker
              onChange={this.handleToDate}
              value={this.state.toDate}
              minDate={this.state.minToDate}
              calendarIcon={null}
              showLeadingZeros={true}
            />
          </div>
       )
    }


    }

我遇到的问题是在我的测试中，当我尝试以下失败时：Cannot set property 'placeholder' of undefined。

describe('datepicker placehoder overrides', () => {
  let component;
  const mockSubmit = jest.fn();
  const mockCancel = jest.fn();

  it('should be DD for days', () => {
    component = mount(<AlertModal submit={mockSubmit} cancel={mockCancel} />);
    expect(
      component
        .find('.react-date-picker__inputGroup__day')
        .at(0)
        .props().placeholder
    ).toBeEqual('DD');
  });
});

有什么想法吗？

【问题讨论】：

与答案没有直接关系，但您可能希望避免在反应中直接进行 dom 操作。考虑使用 setState 而不是 querySelector。

标签： javascript reactjs jestjs

【解决方案1】：

来自Jest: 的文档

Jest 附带 jsdom，它模拟 DOM 环境，就好像你是在浏览器中。这意味着我们调用的每个 DOM API 都可以以与在浏览器中观察相同的方式观察！

因此，您只需在继续测试之前将相关的 HTML 标记添加到 DOM。

describe('datepicker placehoder overrides', () => {
  let component;
  document.body.innerHTML = `<div>
    <input class="react-date-picker__button__input__day" />
    <input class="react-date-picker__button__input__month" />
    <input class="react-date-picker__button__input__year" />
  </div>`;
  const mockSubmit = jest.fn();
  const mockCancel = jest.fn();

  it('should be DD for days', () => {
    component = mount(<AlertModal submit={mockSubmit} cancel={mockCancel} />);
    expect(
      component
        .find('.react-date-picker__inputGroup__day')
        .at(0)
        .props().placeholder
    ).toBeEqual('DD');
  });
});

【讨论】：