用玩笑模拟高阶组件

2024-06-29

我想确保 HOC 组件被开玩笑地调用,但我似乎无法理解jest.mock上班。我的 HOC 是这样的:

const withEntity = (
  ...args
) => {
  const wrappedComponent = WrappedComponent => {
    const innerComponent = ({ ...props }) => {    
      return (
        <WrapperComponent
          {...props}
        >
          <WrappedComponent />
        </WrapperComponent>
      );
    };

    innerComponent.propTypes = {
      ...
    };

    return innerComponent;
  };

  wrappedComponent.propTypes = {
    ...
  };

  return wrappedComponent;
};

withEntity.propTypes = {
  ...
};

export default withEntity;

在一个单独的文件中,withEntity函数的调用方式如下:

export const DoSomething = withEntity(...args)(MyComponent);

然后,在测试文件中DoSomething组件,我正在尝试导入withEntity函数并像这样模拟它:

import withEntity from "../../../shared/entity/higher_order_components/withEntity";
jest.mock("../../../shared/entity/higher_order_components/withEntity");

但是当我实际尝试运行测试时,我收到此错误:

  ● Test suite failed to run

    TypeError: (0 , _withEntity.default)(...) is not a function

不知道该怎么处理这个错误,我在这里做错了什么?


嘲笑你的 HOC 应该是这样的:

jest.mock('../your/HOC', () => () => 
    Component => props => <Component {...props} /> 
)

它可以读作:

jest.mock('../your/HOC', () => `

创建一个返回 HOC 函数的模拟,

() => 

返回你的 HOC 的函数withEntity(...args),

Component => props => <Component {...props} /> 

HOC 本身,它是一个获取组件并返回一个获取 props 的函数,并返回一个返回渲染组件及其 props 的函数。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用玩笑模拟高阶组件 的相关文章

  • React:无法使用 useContext 挂钩在 app.js 中设置上下文状态

    我无法在 app js 中设置上下文状态 我以某种方式在其中获得空值 但可以在子组件中访问它 我想在用户访问页面时在 app js 中设置上下文状态 以便我可以在整个应用程序中使用它 例如根据用户是否登录显示不同的标题 根据请求的沙盒 UR
  • 了解 HTML 5 事件拖动

    我不明白为什么在事件拖动中鼠标坐标clientX的返回值总是0或释放鼠标之前的负值 我准备了一个例子 当用户dragstart 鼠标位置正确 结束同样dragend 但是如果你查看控制台drag你会看到之前dragend负值 是正常行为吗
  • 比较两个javascript数组?

    我想相互比较两个数组 看看是否匹配 如果匹配则执行某些操作 var answers new Array a b c d e var correct new Array a d do a for loop if there s a match
  • 如何动态获取浏览器的高度和宽度?

    我想做的是创建一个不依赖媒体查询的聊天框 这从数学上设置了聊天框内容的大小 我正在尝试 window height window width 但这并没有覆盖整个浏览器窗口 我想在 javascript jquery 中完成这一切 而不需要
  • 如何使用javascript从另一个页面(同一域)的内容中获取信息?

    假设我有一个网页 index html 包含以下内容 li div item1 div a href details item1 html details a li 我想要一些 javascript index html加载那个 detai
  • Chrome 扩展弹出窗口的非阻塞警报

    我正在制作一个 chrome 扩展 为此我需要在弹出窗口中添加一些非阻塞警报 定期警报会暂停 javascript 代码执行 而客户端并不希望这样 我尝试使用 jQuery 的 UI 对话框 但是当我单击 确定 按钮关闭它时 弹出窗口失去焦
  • 字符串和数组泛型方法将来将被弃用

    在下面的链接 MDN 站点 中 它显示 字符串泛型是非标准的 已弃用 将来可能会被删除 请注意 如果不使用下面提供的填充程序 则不能跨浏览器依赖它们 他们所指的方法是否是他们在此声明下方提供的垫片中列出的方法 这是我见过的唯一对 字符串泛型
  • Canvas 按点绘制图像

    是否可以使用canvas drawImage但提供目标和源 x y 坐标 而不是大小 类似于Java的drawImage的工作原理 boolean Graphics drawImage Image img int dstx1 int dst
  • React + Redux 中的多个/批量删除

    我有一个允许多重选择和删除功能的数据网格 我的 api 有一个删除端点 DELETE http localhost 8888 api audit id 这就是动作创建者 export function deleteAudit audits
  • 在浏览器中输入有效网址时,React 路由不断重定向到登陆页面

    我有这个路由配置 它工作得很好 只有一件事一直让我烦恼 即使导航应用程序有效 当我转到地址栏并按 Enter 键时 它会将我重定向到 添加用户即使我不更改网址并按 Enter 键 这是我的路线配置 function AppRoutes se
  • 正则表达式替换“NO-BREAK SPACE”

    我正在寻找一个正则表达式来替换字符串中的 NO BREAK SPACE 有一些与 NO BREAK SPACE 相关的问题 但似乎没有一个问题能让我找到正确的答案 到目前为止 我尝试使用 字符串 AB 的第二个字符是不间断空格 但没有成功
  • 升级到 Angular v9 并启用 Ivy 后 Angular 编译失败

    我们最近将 Angular 应用程序升级到了最新版本的 Angular Angular v9 我们所有的依赖项也都升级了 ng update 表示我们所有的依赖项都 按顺序 当我们在启用 Ivy 的情况下构建应用程序时 编译过程会失败并出现
  • 将画布图像保存到服务器

    我正在尝试将画布图像保存到服务器 我可以保存文件 但它始终是 0 字节 我的代码有什么问题吗 php
  • 冻结 TH 标题和滚动数据

    我有一个 html 表 我想冻结标题行标签以滚动数据 我怎样才能做到这一点 我需要使用Dom吗 谢谢 我的解决方案是使用两个表并固定列宽 下面的表格位于可滚动的 div 中 并且没有标题
  • 如何在 Google 地图 v3 中的每个标记上添加编号?

    我想问大家如何使用 JavaScript 在 Google 地图 v3 中的每个标记上动态添加数字 例如 第一个标记是 1 第二个标记是 2 等等 在这种情况下 我的位置数据如下 new google maps LatLng 1 3667
  • 在 Bootstrap 中的悬停中打开折叠选项卡

    我在 Bootstrap 中有折叠面板 单击选项卡标题即可打开该面板 我试图弄清楚如何使用鼠标悬停在选项卡的总宽度上来打开 但我没有得到它 下面是默认关闭的单个选项卡的代码 div class panel panel default sty
  • JavaScript 作为 HTML 属性是不好的做法吗?

    例子 https stackoverflow com a 372 89566 710887 https stackoverflow com a 37289566 710887 我看到这种情况越来越频繁地发生 我总是被教导要将 javascr
  • 如何在javascript中获取表中复选框的值

    我需要获取表行中提供跨度的复选框的值 下面的代码是我的项目的一部分 HTML 代码用于动态我的表格 而 javascript 代码用于获取不适用于复选框的元素的值 它适用于其他输入元素 我的桌子 var html tr class rows
  • 获取 ES6 符号的描述

    我想知道是否有一种很好的方法来获取符号的描述 例如 var s Symbol 5 toString 的默认实现将简单地打印 符号 5 我想找到一种方法来提取实际描述 即 5 Symbol description https develope
  • WKScriptMessageHandler 不会侦听网页上按钮元素上的“onclick”或“click”事件。网页是使用Reactjs开发的

    我正在使用一个WKWebView在 UIViewController 的视图中使用 url 端点显示托管在服务器上的网页 该网页使用Reactjs 这就是我所掌握的有关该网页的所有信息 该代码创建一个 Web 视图并将该 Web 视图作为控

随机推荐