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装饰器将底层包装的组件作为静态道具（如UnderlyingComponent或类似的东西）公开

这有帮助吗？

如何测试由多个高阶组件包装的组件？

1 个答案: