如何测试用多个高阶组件包装的组件？答案

【问题标题】：How do you test components that are wrapped with multiple higher order components?如何测试用多个高阶组件包装的组件？
【发布时间】：2018-09-18 06:21:37
【问题描述】：

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 组件，如果我使用 mount，我必须潜入两层。但我似乎无法做到正确。有没有通用的解决方案来测试用高阶组件包装的组件，而不必关心高阶组件？

【问题讨论】：

github.com/airbnb/enzyme/issues/98#issuecomment-169761955
谢谢丹尼尔·利兹克！！显然我不擅长谷歌搜索:)

标签： javascript reactjs jestjs

【解决方案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 装饰器将底层包装组件公开为像 UnderlyingComponent 这样的静态道具或类似的东西

这有帮助吗？

【讨论】：