使用umi useModel 简易数据流进行单元测试的简单方法

SiO2-A

已于 2023-07-11 15:11:33 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：单元测试前端 reactjs

于 2023-07-06 18:15:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37904407/article/details/131581751

文章讲述了在遇到不能直接测试React组件，特别是使用了useModel和UniContext的情况时，由于缺少对应的Provider导致的错误。作者提出了一种简单的实现方案，即在测试时创建一个TestModel组件，模拟Provider来提供context，包括initialState的数据。这样可以使得测试能够正常进行。示例代码展示了TestModel组件的实现和在Jest测试中的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不能直接测试的原因

报错 Cannot read properties of undefined (reading ‘@@initialState’)
看源码

useModel在内部是使用了useContext()，测试组件时在上层并没有对应的Provider，所以读取不到UniContext，更拿不到@@initialState

实现方案

在测试该组件时定义应该父组件UniContext.Provider，在这里提前指定好context。
这里简单封装一下，因为是简单实现所以没写更多的功能

import { UmiContext } from '@/.umi/plugin-model/helpers/constant';
import React from 'react';

interface ITestModelProps {
  data: Record<string, any>;
}

const TestModel: React.FunctionComponent<ITestModelProps> = (props) => {
  const callbackSet = new Set([() => {}]);
  const callbacks: Record<string, Set<() => void>> = {};
  Object.keys(props.data).forEach((item) => {
    callbacks[item] = callbackSet;
  });
  const update = (namespace: string) => {
    callbacks[namespace].forEach((callback: (val: any) => void) => {
      callback(props.data);
    });
  };
  return (
    <UmiContext.Provider
      value={{
        data: props.data,
        callbacks,
        update,
      }}
    >
      {props.children}
    </UmiContext.Provider>
  );
};

export default TestModel;

使用方式

test('test Home page', async () => {
	//...省略mock获取数据
	const ins = render(
      <TestModel
        data={{
          '@@initialState': { initialState: { currentUserInfo, settings: defaultSettings } },
        }}
      >
        <Home />
      </TestModel>,
    );
	//...省略测试内容
}