Question

我正在导出并要测试的

组件：

export default connectToStore(DefaultComponent);

connectToStore 包装器围绕组件：

import React from 'react';
import AppContext from '../components/context/AppContext';

const connectToStore = Component => props => (
  <AppContext.Consumer>
    {({ state }) => (
      <Component {...props} state={state} />
    )}
  </AppContext.Consumer>
);

export default connectToStore;

单元测试调用组件

 it('should render view', () => {
    const wrapper = render(<DefaultComponent />);
    expect(wrapper.html()).toBeTruthy();
  });

我得到的错误：

无法解构'undefined'或'null'的属性state。

在导出时，如果组件周围有包装纸，那么通常如何测试它？如何将状态注入到包装中？

Answer 1

仅提供一种从测试角度来看不太复杂的替代方法，您可以简单地将组件本身的命名导出作为测试工具包含

export { DefaultComponent }
export default connectToStore(DefaultComponent)

那样，您的原始测试仍然有效，您只需导入为

import { DefaultComponent } from './defaultComponent'

当然还有在安装模拟环境时提供的state道具的情况

const wrapper = render(<DefaultComponent state={{ ... }} />);

Answer 2

AppContext值属性需要被模拟：

解决方案：

  const wrapper = mount(
      <AppContext.Provider
        value={{
          data,
          callbackList: {}
        }}
      >
        <DefaultComponent />
      </AppContext.Provider>
    );

如何使用Jest和Enzyme在React中模拟<AppContenxt.Consumer>

2 个答案: