Question

我有一个我导入了react-date-picker的react组件，它无法将占位符设置为输入字段的prop，所以我使用了一种解决方法（在{{ 1}}）在其github页面here上。

这是我的组件：

componentDidMount

我遇到的问题正在测试中，当我尝试以下操作时，它失败并显示：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

有什么主意吗？

Answer 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');
  });
});

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

1 个答案: