6 votes

Impossible de lire la propriété 'selectionEnd' de null en utilisant React + Jest + Datepicker + TextMask

J'avais un test unitaire qui fonctionnait, mais j'ai ajouté un nouveau paquet à mon fichier react-datepicker appelé react-text-mask et j'ai essayé de l'imiter, mais je reçois le message suivant lorsque je lance npm run test :

TypeError : Impossible de lire la propriété 'selectionEnd' de null

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)

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

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

Mon react-datepicker con 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/]}
        />}
      >

Mon test unitaire :

describe('<DatePicker />', () => {
  it('should have default props', () => {
    const mock = jest.mock('react-text-mask', () => props => <input type="text" {...{ ...props }} />);
    const tree = renderer.create(<DatePicker onChange={Function} />).toJSON()
    jest.spyOn(mock)

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

5voto

Felipe Augusto Points 1458

J'ai trouvé la solution, il suffisait de mettre le simulacre à l'extérieur de la description.

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()
  })
})

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X