javascript - 如何测试用多个高阶组件包装的组件？

Question

import React from 'react'
import sinon from 'sinon'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import FileListEditable from './index.js'
import {shallow} from 'enzyme'


const middlewares = []
const mockStore = configureStore(middlewares)
const initialState = {
  customer: {
    clientId:'123'
  }
}
const store = mockStore(initialState)

const minProps = {
  files: []
}
const removeFile = sinon.spy()

const wrapper = shallow(
  <FileListEditable
    store={store}
    {...minProps}
    removeFile={removeFile} />,
  {context: {store}})

test.skip('Component: <FileListEditable/>, renders', () => {
  expect(wrapper.length).toBe(1)
  expect(wrapper.find('Tag').length).toBe(0)
})

test.skip('Component <FileListEditable/>, Add and remove files', () => {
  wrapper.setProps({
    files: [
      {
        name: 'file1',
        extension: 'txt'
      },
      {
        name: 'file2',
        extension: 'txt'
      }
    ]
  })

  expect(wrapper.find('Tag').length).toBe(2)

  wrapper.find('Tag').at(0).find('button').simulate('click')
  expect(removeFile.called).toBe(true)
  expect(removeFile.args[0][0]).toBe(0)

  wrapper.find('Tag').at(1).find('button').simulate('click')
  expect(removeFile.args[1][0]).toBe(1)
})

test.skip('Component <FileListEditable/>, File from documents will have link to that document', () => {

  wrapper.setProps({
    files: [
      {
        name: 'file1',
        extension: 'txt',
        id: 'file-document-id'
      },
      {
        name: 'file2',
        extension: 'txt'
      }
    ]
  })

  expect(wrapper.find('Tag').at(0).find('a').length).toBe(1)
  expect(wrapper.find('Tag').at(1).find('a').length).toBe(0)
})

这些测试不起作用，因为 FileListEditable 是用injectIntl​​ 和我们自己创建的高阶组件之一包装的。这意味着当我使用浅层渲染时，它将渲染 InjectIntl​​ 组件，如果我使用安装，我必须潜水两层。但我似乎无法把它做好。是否有一个通用的解决方案来测试用高阶组件包装的组件，而不必关心高阶组件？

Answer 1

感谢 Daniel Lizik 分享链接 https://github.com/airbnb/enzyme/issues/98#issuecomment-169761955

引用自链接:

在 Airbnb 内部，我们使用如下模式:

class MyComponent extends React.Component {
  ...
}
export default connect(MyComponent); // default export. used in your app.
export { MyComponent as PureMyComponent}; // pure component. used in tests

这可以与 redux 的 connect 函数一起正常工作，但不能与装饰器语法一起使用。您可以打开一个对 redux 的拉取请求，让 @connect 装饰器将底层包装组件公开为静态 prop，如 UnderlyingComponent 或类似的东西

这有帮助吗？