javascript - 如何测试用多个高阶组件包装的组件?
问题描述
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,我必须潜入两层。但我似乎无法做到正确。是否有一个通用的解决方案来测试用高阶组件包装的组件而不必关心高阶组件?
解决方案
感谢 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 这样的静态道具或类似的东西
这些帮助有用?