当存在用于组分的酶提纯时，“在反应元素的道具中未发现流动性”

Question

My Component:

// @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

My Enzyme Test:

// @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)
  })
})

The tests pass, but it is giving me the following flow error on my 'MyComponent' declaration which refers to the rendering line in my test, despite name definitely being passed in as part of the defaultProps object that is passed into the component:

property 'name' Property not found in props of react element 'MyComponent'

Answer 1

So, if I completely removed the second test, there was no flow error in the above as written.

I think the problem was that whenever I was passing something to the render() in my test file, flow only checked the overriding props on the component instead of all of them.

Rewriting my test render function like so solved my problem:

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

  return shallow(<MyComponent {...props} />)
}