使用React + Jest + Datepicker + TextMask无法读取null的属性'selectionEnd'

时间:2018-06-08 19:05:57

标签: reactjs unit-testing jestjs react-datepicker

我有一个单元测试正在运行,但现在我向我的react-datepicker添加了一个名为react-text-mask的新程序包,我试图模仿它,但是当我运行时它会收到以下消息{ {1}}:

  

TypeError:无法读取null

的属性'selectionEnd'      

at Object.update(node_modules / react-text-mask / dist / reactTextMask.js:1:9205)

     

at t.value(node_modules / react-text-mask / dist / reactTextMask.js:1:2431)

     

at t.value(node_modules / react-text-mask / dist / reactTextMask.js:1:2490)

     

在commitLifeCycles(node_modules / react-test-renderer / cjs / react-test-renderer.development.js:6427:22)

     

在commitAllLifeCycles(node_modules / react-test-renderer / cjs / react-test-renderer.development.js:7516:7)

我的npm run testreact-datepicker

react-text-mask

我的单元测试:

<RCDatePicker
        {...rest}
        locale="pt-BR"
        selected={value}
        onChange={onChange}
        readOnly={readOnly}
        dateFormat={dateFormat}
        minDate={minDays ? moment(baseDate).subtract(minDays, 'days') : undefined}
        maxDate={maxDays ? moment(baseDate).add(maxDays, 'days') : undefined}
        disabled={disabled}
        customInput={<MaskedInput
          mask={[/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /[1-2]/, /\d/, /\d/, /\d/]}
        />}
      >

1 个答案:

答案 0 :(得分:4)

我找到了解决方案,只是将模拟放在描述之外。

import React from 'react'
import renderer from 'react-test-renderer'
import { DatePicker } from './DatePicker'

jest.mock('react-text-mask', () => props => <input type="text" {...{ ...props }} />)

describe('<DatePicker />', () => {
  it('should have default props', () => {
    const tree = renderer.create(<DatePicker onChange={Function} />).toJSON()

    expect(tree).toMatchSnapshot()
  })
})