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

测试通过，但它在我的“我的组件”上给出了以下流量错误。声明引用我的测试中的渲染行，尽管name肯定是作为传递给组件的defaultProps对象的一部分传入的：

property＆＃39; name＆＃39;在反应元素的道具中找不到的属性＆＃39; MyComponent的＆＃39;

Answer 1

因此，如果我完全删除了第二个测试，则上面写的没有流错误。

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

重写我的测试渲染功能就像解决了我的问题：

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

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

＆＃39;在反应元素的道具中找不到流动特性＆＃39;何时存在组分

1 个答案: