Javascript ';在react元素';组件的酶渲染何时存在

Javascript ';在react元素';组件的酶渲染何时存在,javascript,reactjs,flowtype,enzyme,Javascript,Reactjs,Flowtype,Enzyme,我的组件: // @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'

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

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

export default MyComponent
/@flow
从“React”导入React
类型道具={
关闭:功能,
名称:string
}
常量MyComponent=({close,name}:Props)=>(
{name}
)
导出默认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)
  })
})
/@flow
从“React”导入React
从“assert”导入assert
从“酶”导入{shall}
从“sinon”导入sinon
从“客户端/应用程序/空间/组件/滑出/记录设置/myc”导入MyComponent
const defaultProps={
关闭:()=>{},
名字:“我的名字”
}
常量渲染=(道具)=>shallow()
描述(“”,()=>{
它('呈现名称',()=>{
const component=render()
assert.equal(component.find('.click').text(),'My Name')
})
它('点击即关闭',()=>{
const close=sinon.spy()
const component=render({close})
const clickableDiv=component.find(“.click”)
clickableDiv.simulate('单击')
断言(close.calledOnce)
})
})
测试通过了,但它在我的“MyComponent”声明中给出了以下流错误,该声明引用了测试中的渲染行,尽管
name
肯定是作为传递到组件中的
defaultProps
对象的一部分传入的:

在react元素的props中找不到属性“name”属性 “MyComponent”


因此,如果我完全删除了第二个测试,那么上面的代码中就没有流错误了

我认为问题在于,每当我向测试文件中的
render()
传递内容时,flow只检查组件上的覆盖道具,而不是所有道具

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

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

  return shallow(<MyComponent {...props} />)
}
const render=(overrideProps)=>{
常量道具={
…默认道具,
…重写操作
}
返回浅()
}