«свойство текучести не найдено в свойствах реактивного элемента», когда оно присутствует для ферментативного рендеринга компонента

Мой компонент:

// @flow
import React from 'react'

type Props = {
  close: Function,
  name: string
}

const MyComponent = ({ close, name }: Props) => (
  <div className='click' onClick={close}>
    {name}
  </div>
)

export default MyComponent

Мой ферментный тест:

// @flow
import React from 'react'
import assert from 'assert'
import { shallow } from 'enzyme'
import sinon from 'sinon'

import MyComponent from 'client/apps/spaces/components/slideouts/record-settings/myc'

const defaultProps = {
  close: () => {},
  name: 'My Name'
}

const render = (props) => shallow(<MyComponent {...defaultProps} {...props} />)

describe('<MyComponent />', () => {
  it('renders the name', () => {
    const component = render()

    assert.equal(component.find('.click').text(), 'My Name')
  })

  it('calls close on Click', () => {
    const close = sinon.spy()
    const component = render({ close })
    const clickableDiv = component.find('.click')
    clickableDiv.simulate('click')

    assert(close.calledOnce)
  })
})

Тесты проходят, но это дает мне следующую ошибку потока в моем объявлении «MyComponent», которое ссылается на строку рендеринга в моем тесте, несмотря на то, что name определенно передается как часть объекта defaultProps, который передается в компонент:

свойство 'имя' Свойство не найдено в реквизитах реагирующего элемента 'MyComponent'


reactjs javascript flowtype enzyme
person Tay Hess    schedule 07.07.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Итак, если бы я полностью удалил второй тест, в написанном выше не было ошибки потока.

Я думаю, проблема заключалась в том, что всякий раз, когда я передавал что-то в render() в моем тестовом файле, поток проверял только переопределяющие свойства компонента, а не все из них.

Переписав мою тестовую функцию рендеринга таким образом, я решил свою проблему:

const render = (overrideProps) => {
  const props = {
    ...defaultProps,
    ...overrideProps
  }

  return shallow(<MyComponent {...props} />)
}
person Tay Hess    schedule 07.07.2017