Javascript 如何测试用多个高阶组件包装的组件？ 从“React”导入React 从“sinon”导入sinon 从“酶”导入{mount} 从“redux模拟存储”导入配置存储 从“./index.js”导入FileListedTable 从“酶”导入{shall} const middleware=[] const mockStore=configureStore（中间件） 常量初始状态={ 客户：{ 客户ID:'123' } } 常量存储=模拟存储（初始状态） 常量minProps={ 文件：[] } const removeFile=sinon.spy（） 常数包装=浅( , {上下文：{store}}） test.skip（'组件：，呈现'，（）=>{ expect（wrapper.length）.toBe（1） expect（wrapper.find（'Tag'）.length）.toBe（0） }) test.skip（'组件，添加和删除文件'，（）=>{ 包装器.setProps({ 档案：[ { 名称：“文件1”， 扩展名：“txt” }, { 名称：'file2'， 扩展名：“txt” } ] }) expect（wrapper.find（'Tag'）.length）.toBe（2） wrapper.find（'Tag'）。位于（0）。find（'button'）。simulate（'click'）） expect（removeFile.called）.toBe（true） 期望（removeFile.args[0][0]）.toBe（0） wrapper.find（'Tag'）。位于（1）。find（'button'）。simulate（'click'）） 期望（removeFile.args[1][0]）.toBe（1） }) test.skip（'组件，文档中的文件将具有指向该文档的链接'，（）=>{ 包装器.setProps({ 档案：[ { 名称：“文件1”， 扩展名：“txt”， id:'文件文档id' }, { 名称：'file2'， 扩展名：“txt” } ] }) expect（wrapper.find（'Tag'）。at（0）。find（'a'）。length）。toBe（1） expect（wrapper.find（'Tag'）。at（1）。find（'a'）。length）。toBe（0） })

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

感谢Daniel Lizik分享此链接

引自链接：

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

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

这在redux的connect函数中可以很好地工作，但在decorator语法中无法立即工作。您可以打开一个对redux的拉取请求，让@connect decorator将底层包装组件作为静态道具公开，比如UnderlyingComponent或类似的东西

---

这有帮助吗？

谢谢丹尼尔·利兹克！！显然我在谷歌搜索方面很差劲：）

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