'flow property not found in props of react element' 何时存在用于组分的酶渲染

Question

我的组件：

// @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 传入组件的对象：

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

Answer 1

所以，如果我把第二个测试完全去掉，上面写的就没有流程错误了。

我认为问题是每当我在我的测试文件中将某些东西传递给 render() 时，流程只检查组件上的覆盖道具而不是所有道具。

像这样重写我的测试渲染函数解决了我的问题：

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

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

'flow property not found in props of react element' 何时存在用于组分的酶渲染

'flow property not found in props of react element' when is present for enzyme rendering of component

javascript

reactjs

flowtype

enzyme