javascript - React 上下文测试 - 在 HOC 中模拟 Consumer

Question

我正在尝试测试我的组件，该组件正在通过 HOC 从上下文中使用数据。

设置如下:模拟上下文模块 /context/__mocks__

const context = { navOpen: false, toggleNav: jest.fn() } 

export const AppContext = ({
    Consumer(props) {
        return props.children(context)
    }
})

高阶组件 /context/withAppContext

import React from 'react'
import { AppContext } from './AppContext.js'

/**
 * HOC with Context Consumer
 * @param {Component} Component 
 */
const withAppContext = (Component) => (props) => (
    <AppContext.Consumer>
        {state => <Component {...props} {...state}/>}
    </AppContext.Consumer>
) 

export default withAppContext

组件 NavToggle

import React from 'react'
import withAppContext from '../../../context/withAppContext'

import css from './navToggle/navToggle.scss'

const NavToggle = ({ toggleNav, navOpen }) => (
    <div className={[css.navBtn, navOpen ? css.active : null].join(' ')} onClick={toggleNav}>
        <span />
        <span />
        <span />
    </div>
)

export default withAppContext(NavToggle)

最后是测试套件 /navToggle/navToggle.test

import React from 'react'
import { mount } from 'enzyme'

beforeEach(() => {
  jest.resetModules()
}) 

jest.mock('../../../../context/AppContext')


describe('<NavToggle/>', () => { 
  it('Matches snapshot with default context', () => {    
        const NavToggle = require('../NavToggle')        
        const component = mount( <NavToggle/> )
        expect(component).toMatchSnapshot()
  })
})

测试只是为了开始，但我遇到了这个错误:警告: Prop 类型失败:组件必须是有效的元素类型!
在 WrapperComponent 中我认为这是 HOC 的问题，我应该以某种方式模拟它而不是 AppContext，因为从技术上讲，AppContext 不是由 NavToggle 组件直接调用的，而是在包装组件中调用的。

在此先感谢您的任何意见。

Answer 1

所以我解决了。

我上面的尝试几乎没有问题。

1. require 不理解默认导出，除非您指定它
2. 挂载空白组件返回错误
3. 当我想为测试修改上下文时，使用 __mock__ 文件模拟 AppContext 导致了问题

我已经按照下面的方法解决了。我使用自定义上下文作为参数创建了模拟 AppContext 的辅助函数

export const defaultContext = { navOpen: false, toggleNav: jest.fn(), closeNav: jest.fn(), path: '/' } 

const setMockAppContext = (context = defaultContext) => {
    return jest.doMock('../context/AppContext', () => ({
        AppContext: {
            Consumer: (props) => props.children(context)
        }
    }))  
}
export default setMockAppContext

然后测试文件看起来像这样结束

import React from 'react'
import { shallow } from 'enzyme'
import NavToggle from '../NavToggle'
import setMockAppContext, { defaultContext } from '../../../../testUtils/setMockAppContext'

beforeEach(() => {
  jest.resetModules()
}) 

describe('<NavToggle/>', () => { 
  //...   
  it('Should have active class if context.navOpen is true', () => {
    setMockAppContext({...defaultContext, navOpen: true})
    const NavToggle = require('../NavToggle').default //here needed to specify default export
    const component = shallow(<NavToggle/>)
    expect(component.dive().dive().hasClass('active')).toBe(true) //while shallow, I needed to dive deeper in component because of wrapping HOC   
  })
  //...
})

另一种方法是将组件导出两次，一次是用 HOC 装饰的，一次是干净的组件，并在其上创建测试，只是用不同的 props 测试行为。然后只测试 HOC 作为单元，它实际上将正确的 props 传递给任何包装的组件。

我想避免这种解决方案，因为我不想为了适应测试而修改项目文件(即使只是一个词)。