程序员经验分享-hwhale

Jest 的间谍期间发生类型错误：无法设置仅具有 getter 的 # 的属性 getRequest
2023-12-30

我正在使用 TypeScript 编写 React 应用程序。我使用 Jest 进行单元测试。

我有一个进行 API 调用的函数：

import { ROUTE_INT_QUESTIONS } from "../../../config/constants/routes";
import { intQuestionSchema } from "../../../config/schemas/intQuestions";
import { getRequest } from "../../utils/serverRequests";

const intQuestionListSchema = [intQuestionSchema];

export const getIntQuestionList = () => getRequest(ROUTE_INT_QUESTIONS, intQuestionListSchema);

The getRequest函数看起来像这样：

import { Schema } from "normalizr";
import { camelizeAndNormalize } from "../../core";

export const getRequest = (fullUrlRoute: string, schema: Schema) =>
  fetch(fullUrlRoute).then(response =>
    response.json().then(json => {
      if (!response.ok) {
        return Promise.reject(json);
      }
      return Promise.resolve(camelizeAndNormalize(json, schema));
    })
  );

我想尝试使用 Jest 的 API 功能，如下所示：

import fetch from "jest-fetch-mock";
import { ROUTE_INT_QUESTIONS } from "../../../config/constants/routes";
import {
  normalizedIntQuestionListResponse as expected,
  rawIntQuestionListResponse as response
} from "../../../config/fixtures";
import { intQuestionSchema } from "../../../config/schemas/intQuestions";
import * as serverRequests from "./../../utils/serverRequests";
import { getIntQuestionList } from "./intQuestions";

const intQuestionListSchema = [intQuestionSchema];

describe("getIntQuestionList", () => {
  beforeEach(() => {
    fetch.resetMocks();
  });

  it("should get the int question list", () => {
    const getRequestMock = jest.spyOn(serverRequests, "getRequest");
    fetch.mockResponseOnce(JSON.stringify(response));

    expect.assertions(2);
    return getIntQuestionList().then(res => {
      expect(res).toEqual(expected);
      expect(getRequestMock).toHaveBeenCalledWith(ROUTE_INT_QUESTIONS, intQuestionListSchema);
    });
  });
});

问题是该行与spyOn抛出以下错误：

  ● getRestaurantList › should get the restaurant list

    TypeError: Cannot set property getRequest of #<Object> which has only a getter

      17 |
      18 |   it("should get the restaurant list", () => {
    > 19 |     const getRequestMock = jest.spyOn(serverRequests, "getRequest");
         |                                 ^
      20 |     fetch.mockResponseOnce(JSON.stringify(response));
      21 |
      22 |     expect.assertions(2);

      at ModuleMockerClass.spyOn (node_modules/jest-mock/build/index.js:706:26)
      at Object.spyOn (src/services/api/IntQuestions/intQuestions.test.ts:19:33)

我用谷歌搜索了这个，只找到了有关热重载的帖子。那么在 Jest 测试中什么可能导致这个问题呢？我怎样才能通过这个测试？


这个很有趣。

Issue

Babel仅生成属性get为重新导出的函数定义。

utils/serverRequests/index.ts从其他模块重新导出函数，因此在以下情况下会引发错误jest.spyOn用于监视重新导出的函数。

Details

鉴于此代码重新导出所有内容lib:

export * from './lib';

...Babel产生这个：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _lib = require('./lib');

Object.keys(_lib).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _lib[key];
    }
  });
});

请注意，所有属性均仅由get.

尝试使用jest.spyOn任何这些属性都会生成您所看到的错误，因为jest.spyOn尝试用包装原始函数的间谍替换该属性，但如果该属性仅定义为get.

Solution

而不是导入../../utils/serverRequests（再出口getRequest）进入测试，导入模块getRequest定义并使用该模块来创建间谍。

替代解决方案

模拟整个utils/serverRequests@Volodymyr 和 @TheF 建议的模块

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

ReactJS

unittesting

jestjs

Spy

spyon

Jest 的间谍期间发生类型错误：无法设置仅具有 getter 的 # 的属性 getRequest 的相关文章

  • 公式无效：/usr/local/Homebrew/Library/Taps/facebook/homebrew-fb/buck.rb

    我运行了brew 命令来安装Facebook homebrew tap 我有一个 M1 Apple Silicon 芯片组 并使用 Rosetta 下的终端来执行 brew 命令 brew tap facebook fb 我收到错误消息 g

  • 错误 TS2314：通用类型“Component”需要 2 个类型参数

    在将 ReactJS 与 TypeScript 一起使用时 会出现以下错误 error TS2314 Generic type Component

  • ASP.NET Core 中 AsNoTracking 的模拟或更好的解决方法

    您如何模拟 AsNoTracking 或者是否有更好的解决方法来解决此问题 Example public class MyContext MyContextBase Constructor public MyContext DbContex

  • 如何使用 API 中的数据填充选择的下拉元素 - ReactJS

    我对 React 还很陌生 我正在从 API 获取数据 当我检查控制台日志时可以看到数据 但是我不知道如何使用 map 创建一个新数组 然后选项元素可以使用该数组来显示货币代码 目前它填充下拉列表 但选项元素全部为空 结果显示为 NaN 下

  • redux - 如何存储和更新键/值对

    我正在使用 redux 和 React js 我想存储简单的键 值对 但无法获得正确的减速器语法 在这种情况下 每个键 值对将保持与外部系统的连接 这是正确的做法吗 我刚开始使用 redux 所以这有点神秘 export default s

  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题

  • 使用 QTestLib 时抑制 qDebug

    我正在向 Qt 中的项目添加单元测试 并希望使用 QTestLib 我已经设置了测试并且它们运行良好 问题是在项目中我们重写了 qDebug 以输出到我们自己的日志文件 这在运行应用程序时效果很好 问题是当我测试类时 它有时会开始记录 然后

  • Bug：VS2017 Live 单元测试 - 只有减号 - 不起作用

    TL 博士 编辑6 我缩小了范围并提供了重现问题 错误的 5 个步骤 创建 VS2017 c 控制台应用程序 Net 完整框架 将方法添加到 Program cs 并使该类公开 public class Program static voi

  • 模拟 DBSet，EF 模型优先

    正如标题所说 我遵循模型优先方法 所以我的模型类是自动生成的 如果我想嘲笑DBContext衍生的MyModelContainer其中包含DBSets实体类 阅读一些内容 为了进行单元测试 您需要将其更改为IDBSet 是否可以做到这一点

  • 检测 mobx observable 何时发生变化

    是否有可能检测到可观察的变化何时发生 例如 假设你有这个 observable myObject id 1 name apples id 2 name banana 随后 随着一些用户输入 这些值会发生变化 我怎样才能轻松检测到这一点 我想

  • 如何在打字稿中使用react-navigation的withNavigation？

    我正在尝试结合使用react native react navigation 和typescript 来创建一个应用程序 只有两个屏幕 HomeScreen and ConfigScreen 和一个组件 GoToConfigButton 总

  • 对 Java Servlet 进行单元测试

    我想知道对 servlet 进行单元测试的最佳方法是什么 只要内部方法不引用 servlet 上下文 测试内部方法就不是问题 但是测试 doGet doPost 方法以及引用上下文或使用会话参数的内部方法呢 有没有办法简单地使用经典工具 例

  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个

  • 如何使用 React TransitionMotion willEnter()

    Using React Motion 的 TransitionMotion https github com chenglou react motion 我想要为 1 个或多个盒子进出设置动画 当一个盒子进入视图时 它的宽度和高度应该从 0

  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏

  • Hydrate with RTK Query 确实会抛出错误

    我有一个非常简单的组件来显示来自本地 API 的数据 使用 Nextjs API 路由制作 我使用 RTK 查询来获取数据 const api createApi reducerPath data baseQuery fetchBaseQu

  • 在 createAsyncThunk 上调度操作？

    我有一个 thunk 动作是由createAsyncThunk 我想在调用 api 更新状态之前调度一个操作 我不想使用动作getProducts pending因为我想要派遣actionLoading 对于其他 thunk 操作 我怎样才

  • Enzyme - 测试嵌套组件是否正确呈现

    我正在尝试测试当通过简单的布尔值更新状态时 在父组件中其子组件是否正确呈现 在父组件下面 class Parent extends Component render const isReady this state const props

  • 开玩笑 setTimeout 不暂停测试

    it has working hooks async gt setTimeout gt console log Why don t I run expect true toBe true 15000 我已经查看了这个答案 Jest 文档和几

  • 使用样式组件更改 SVG 描边的颜色

    我有一个 SVG 用作 img 标签 使用样式组件 我试图达到在悬停时更改描边颜色的程度 我导入了 SVG import BurgerOpenSvg from images burger open svg 我为它创建了一个样式组件 cons

随机推荐