开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Jest模拟函数返回未定义而不是object

Jest是一个流行的JavaScript测试框架，用于编写和运行单元测试。在使用Jest进行单元测试时，有时候我们需要模拟函数的返回值。如果模拟函数返回未定义而不是object，可能是由于以下几个原因：

模拟函数未正确设置返回值：在使用Jest的模拟函数时，我们可以使用mockReturnValue或mockResolvedValue等方法来设置模拟函数的返回值。如果没有正确设置返回值，模拟函数将默认返回undefined。
模拟函数的返回值类型不匹配：如果模拟函数的返回值类型与被测试函数期望的返回值类型不匹配，Jest可能会将其解释为undefined。确保模拟函数的返回值类型与被测试函数的期望返回值类型一致。
被测试函数未正确调用模拟函数：在进行单元测试时，我们需要确保被测试函数正确调用了模拟函数。如果被测试函数没有调用模拟函数，那么模拟函数的返回值将不会被返回，从而导致返回undefined。

针对以上问题，可以采取以下解决方案：

使用mockReturnValue或mockResolvedValue设置模拟函数的返回值，确保返回一个期望的对象。

const mockFunction = jest.fn().mockReturnValue({ key: 'value' });

检查被测试函数是否正确调用了模拟函数，可以使用toHaveBeenCalled或toHaveBeenCalledWith等方法进行断言。

expect(mockFunction).toHaveBeenCalled();

确保模拟函数的返回值类型与被测试函数期望的返回值类型一致，避免类型不匹配导致返回undefined。

在腾讯云的产品中，与Jest相关的产品可能包括云函数（Serverless Cloud Function）和云测试（Cloud Test）。云函数是一种无需管理服务器即可运行代码的计算服务，可以用于编写和运行函数，包括单元测试中的模拟函数。云测试是一种云端测试服务，可以帮助开发者进行自动化测试和性能测试。这些产品可以与Jest结合使用，提供更好的测试环境和工具。

腾讯云云函数产品介绍：https://cloud.tencent.com/product/scf

腾讯云云测试产品介绍：https://cloud.tencent.com/product/cts

相关搜索:ajax datatable返回"[object Object]“而不是datetime格式 Angular GET返回Object而不是Array HQL返回List<MyClass>而不是List<Object[]>Jest:模拟构造函数以返回错误 Jest单元测试。模拟函数返回，监视函数调用 Jest无法模拟函数的返回值 Jest模拟request.res.setHeader总是返回错误-而不是函数 Jest，如何模拟由模拟函数返回的函数 JSON.parse返回[Object Object]而不是value Laravel 5.4返回为数组而不是object

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

为什么 useState 返回的是 array 而不是 object？

，那么为什么是返回数组而不是返回对象呢？...为什么是返回数组而不是返回对象要弄懂这个问题要先明白 ES6 的解构赋值，来看 2 个简单的例子：数组的解构赋值 const foo = [1, 2, 3]; const [one, two, three...，那么使用者可以对数组中的元素命名，代码看起来也比较干净如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值...array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就得定义别名了首发自：为什么 useState 返回的是 array...而不是 object？

2.1K2 0

Jest单元测试之旅—实践总结

Jest本身支持产出代码测试的覆盖率，而覆盖率则是评判单测的好坏途径之一（并不是唯一，再次提及我们不能为了单测而单测）。...第二：我们测试某个方法时，可能当前方法会夹杂对其他外部方法的调用，如果外部方法并不是一个纯函数，此时我们不应该再对外部方法再进行测试，而是通过Mock方式去模拟它。...每个方法都有不同的使用场景，每个API都会生成一个mock模拟函数，Jest对模拟函数提供了很多方法给予我们模拟方法的返回、实现等等，可移至文档参考 jest.fn jest.fn主要是创建一个模拟函数...而jest.mock的调用方式有所不同。Jest接管require系统，jest.mock告诉Jest，它在需要时应返回模块模拟，而不是实际模块。...模拟部分函数，这里使用了jest.requireActual，该方法主要是绕过模拟模块导出真实模块，然后通过jest.mock的工厂函数重新去定义该模拟模块的内容，这种方式就可以指定导出的模块具体哪些方法需要被模拟

10.2K2 0

Jest测试语法系列之Expect

我们要实现一个非常相似的matcher，而不是toBeDivisibleBy，唯一的区别是可分割的数字将从外部源中提取。...你可以在内部使用toEqual或toBeCalledWith而不是文字值。...例如如果你想检查一个模拟函数是否被调用，它的参数是非空的: test('map calls its argument with a non-null argument', () => { const...你可以在内部使用toEqual或toBeCalledWith而不是文字值。例如，如果你想检查一个模拟函数是否被调用时带有一个数字。...如果想要检查两个数组在它们的元素数量上是否匹配，而不是arrayinclude，这是非常有用的，因为它允许在接收的数组中添加额外的元素。

3.6K2 0

Jest + React Testing Library 单测总结

在组件单测中，有的时候我们可能只关注一个函数是否被正确地调用了，或者只想要某个函数的返回值来支持该组件渲染逻辑是否正确，而并不关心这个函数本身的逻辑。...2.3.1 jest.fn() 通过 jest.fn(implementation) 可以创建 mock 函数。如果没有定义函数内部的实现，mock 函数会返回 undefined。...: const returnsTrue = jest.fn(() =>true); // 定义了函数体 console.log(returnsTrue()); // true // 可以给mock的函数设置返回值...mockFn.mock.calls：传的参数 mockFn.mock.results：得到的返回值 mockFn.mock.instances：mock 包装器实例模拟函数 mockFn.mockImplementation...; fireEvent 函数需要两个参数，一个参数是定位的元素 node，另一个参数是 event。这个例子中就模拟了用户点击了 button，同时 fireEvent 有两种写法。

4.5K2 0

JavaScript 测试教程 part 1：用 Jest 进行单元测试

JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互有多种不同种类的测试，我会首先解释其中的一部分。...你可以测试程序的方方面面，从单个函数及其返回值到在浏览器中运行的复杂程序。由于这是本课程的第一篇文章，因此我会简要对比一些流行的测试类型。单元测试单元测试覆盖了代码块，确保它们在运行时没有问题。...E2E 测试的重点是在我们正在运行的程序中模拟实际用户。他们将模拟滚动，单击和键入之类的行为，并从实际用户的角度检查我们的程序是否运行良好。...expect 函数用于测试值。作为参数，它接受你要测试的值：在我们的例子中，它是 divide 函数的返回。你可以调用一组 matcher 函数（例子中使用的 toBe）以某种方式测试该值。...4.5 being 5', () => { 16 expect(Math.round(4.5)).toBe(5); 17 }) 18 }); 19 20}) 你可能会注意到用了 it 函数而不是

2.8K2 0

那些年错过的React组件单元测试（上）

的返回，测试函数就会结束。...jest.fn() jest.fn()是创建mock函数最简单的方式，如果没有定义函数内部的实现，jest.fn()会返回undefined作为返回值。...()所创建的mock函数还可以设置返回值，定义内部实现或返回Promise对象。...'); // 断言mockFn调用后返回的是Promise对象 expect(Object.prototype.toString.call(mockFn())).toBe("[object Promise...('axios')，我们让jest去对axios做模拟，这样就不会去请求真正的数据了。

4.9K2 0

如何自动化测试 React Native 项目 (下篇) - 单元测试

在交互测试中，我们主要利用 simulate() API模拟事件，来判断这个元素的 prop 上的特定函数是否被调用，传参是否正确，以及组件状态是否发生意料之中的修改。...layer 中，而不是堆放在组件中。...Reducer测试 Reducer 是纯函数，因此测试的时候只要引入函数，传入特定参数，判断函数返回是否符合预期即可。可以利用 jest 的 snapshot test 来判断结果。...Action Handler测试纯 Object的 action 测试比较简单，保证 action creator 函数返回的 Object 正确就可以了。...的 spy 函数， mock const dispatch = jest.fn()，然后把 dispatch 传给异步 action 的函数，并验证 dispatch spy 被传了正确的 object

3.2K2 1

Jest与React Testing Library：前端测试的最佳实践

Jest 是一个功能丰富的JavaScript测试框架，而React Testing Library 是一种提倡以用户角度编写测试的库，它鼓励测试组件的行为而不是内部实现细节。...模拟（Mocking）Jest 提供了强大的模拟功能，可以模拟组件的依赖，例如API调用。...测试组件的交互性React Testing Library 强调测试组件的行为，而不是它的实现细节。...();// 重置并清除模拟的返回值和调用记录myFunction.mockClear();// 恢复原函数myFunction.mockRestore();测试异步逻辑使用async/await和await...waitFor处理异步操作：it('fetches data and updates state', async () => { // 模拟API返回 fetchMock.mockResolvedValueOnce

780 0

从echarts-for-react源码中学习如何写单元测试

，但它们的值是一样的，也是可以的小结对于有返回值的function，就是通过判断「返回值」，是否与「期望值」相等即可这样的好处： ① 当有新需求要扩展该函数时，可以保证该函数的返回值仍保持不变，进而不会影响到使用到该函数的旧需求...② 当测试的函数比较复杂时，非常方便，不用了解内部的详细代码，只需返回值符合期望即可如何测试ReactComponent 当我写完一个React组件时，我该如何测试它呢？...只要求值相等，即使是不同的对象，只要值相等即可 const a={} const b={} expect(a).toEqual(b); //test passed [2] toBe()不仅要求值相等，还要求object...（return xxx）即可， // 不能因为 onChartReady 而影响到「测试目标」，为了减少依赖，就使用了 mock function 即 jest.fn() // 参考：https...() 作用：新建mock function 在进行单元测试时，应该将关注点放在「测试目标」上，而onChartReady作为被依赖的function，不管它的内部发生了什么，都与「测试目标」无关，只需关注返回的值

6.1K5 0

干货 | 携程租车React Native单元测试实践

在较大规模的前端项目中，测试对于保证代码质量十分重要，而React的组件化和函数式编程, 这种相同输入一定返回相同输出的幂等特性特别适合单元测试。.../jest.setup.js'], //运行测试前需运行的初始化文件，例子在下方 moduleNameMapper: { //需要模拟的静态资源 '\\....* toBeCalledWith：函数是否以某些参数为入参被调用 * assertions：检测用例中有多少个断言被调用，一般用于异步测试四、Jest 周期函数在写测试用例之前，可以用四个周期函数进行一些处理...七、Jest 异步测试 Jest单元测试是同步的，因此面对异步操作如fetch获取数据，需要进行异步的模拟测试。...；另外我们在写单元测试的时候并不是堆砌覆盖率，而是需要保证功能细节的正确，覆盖率并不是最重要的，单元测试也不是银弹，我们也在结合诸如airtest自动化测试等其他测试和手段保证代码的质量。

6K3 0

前端自动化测试实践03—jest异步处理&mock

/mock' import axios from 'axios' // jest 模拟 axios 请求 jest.mock('axios') test('测试 axios getData', async...() => { // 模拟函数的返回，getData 不会真正发起 axios 请求 axios.get.mockResolvedValueOnce({ data: 'hello' }.../mock'); 4. mock - function 模拟函数调用对于单元测试，无需关心外部传入的函数的实现，使用 jest.fn 生成一个 mock 函数，可以捕获函数的调用和返回结果，以及this.../mock' test('测试 callback', () => { // 【1】使用 jest 生成一个 mock 函数 func1，用来捕获函数调用 const func1 = jest.fn.../es6-class') jest.mock 如果发现是一个类，会自动把构造函数和方法变成 jest.fn() 以提升性能，相当于执行了 const Util = jest.fn() Util.a =

5.1K8 5

JavaScript单元测试利器Jest+mocha+chai

同步代码的测试比较简单，直接判断函数的返回值是否符合预期就行了，而异步的函数，就需要测试框架支持回调、promise或其他的方式来判断测试结果的正确性了。...Null：null表示一个空对象的指针，使用typeof检查null时会返回object。Boolean：true为真，false为假。...任何涉及NaN的操作都将返回NaN；NaN与任何数值都不相等包括其自身。Object：Object是一组数据或功能的集合。...但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象只是一个可读的字符串。...最终返回给调用的是Module.exports而不是exports。所有的exports收集到的属性和方法，都赋值给了module.exports。

4522 0

React + Redux Testing Library 单元测试

/sound-player 这个文件当中 export 出来的，而被 Mock 之后我们的测试就可以使用 Mock 所返回的数据或方法，从而保证模块所返回的内容是我们所期望的。...而另一种特定行为就是返回特定的数据，即 Stub 也可以根据输入模拟返回一种输出，作为某些模块的替身帮它演戏，比如“小鲜肉们”遇到要跳车啦、要卿卿我我（误）的时候就要找替身，“一二三四五六七八”连台词都不用背还需要配音...而 Stores 只能通过 Actions 被更新，这就会影响 Store 本身而不是那些只读的数据。...单一数据源整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。...然后我们就可以使用 Jest 模拟一个 action 的行为再传给 store，而 actionClick 这个伪造函数能够让我们去断言该 action 是否被调用过。

2.3K1 0

JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件

您可以测试应用程序的许多方面，从单个函数及其返回值到在浏览器中运行的复杂应用程序。万丈高楼平地起，让我们先来了解一下有哪些测试。...E2E 测试的重点是在我们正在运行的应用程序中模拟实际用户（例如模拟滚动、单击和键入等行为），并检查我们的应用程序是否从实际用户的角度运行良好。...因此这里建议直接使用 npx jest 执行测试。编写第一组测试每个测试文件通常有多个测试用例。Jest 允许我们通过 describe 函数对测试用例进行分组，它创建了一个可以组合多个测试的块。...of 4.5 being 5', () => { expect(Math.round(4.5)).toBe(5); }); }); }); 你也许注意到了这里我们用了 it 函数而不是...它允许我们在运行测试时，只渲染父组件而不渲染其所有的子组件。浅层渲染十分快速，因此非常适合单元测试。

2.9K1 0

Jest：给你的 React 项目加上单元测试

Jest 基本使用我们先写一个简单的函数，作为被测试的模块。...expect 会将模块返回的结果封装成一个对象，然后提供非常丰富的方法做测试。比如 toBe 就可以做 Object.is 的对比测试。...异步测试如果使用异步测试，需要将 Promise 作为返回值。...，你需要调用函数传入的 done 函数来表明测试完成： test('异步测试', done => { setTimeout(() => { expect('前端西瓜哥').toBeTruthy...React Testing Library 是以用户为角度的测试库，能够模拟浏览器的 DOM，将 React 组件挂载上去后，我们使用其提供的一些模拟用户操作的 API 进行测试。

2.8K2 0

react生态下jest单元测试

%Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？ %Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？...在写入或测试快照之前，将检查这些匹配器，然后将其保存到快照文件而不是接收到的值 it('will check the matchers and pass', () => { const user...在写入或测试快照之前，将检查这些匹配器，然后将其保存到快照文件而不是接收到的值 it('will check the matchers and pass', () => { const user =...()返回固定值', () => { let mockFn = jest.fn().mockResolvedValue('default'); expect(mockFn).toBe('default...; }); expect(mockFn(9, 9)).toBe(100); }); test('测试jest.fn()返回promise', async () => { let mockFn

2.2K2 0

JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互

Node 的某些核心模块（例如 fs 或 path ），则需要在模拟文件中明确调用 jest.mock（'moduleName'） Jest 允许我们对函数进行监视：接下来测试是否调用了我们所创建的...spyOn 函数返回一个 mock函数。有关其功能的完整列表，请阅读文档。我们的测试检查组件在渲染和运行之后是否从模拟中调用 get函数，并成功执行。...一个窍门是它是附加到 window 对象的全局函数并对其进行模拟，可以将其附加到 global 对象。首先，让我们创建模拟的 fetch 函数。...我们将要测试状态是否能够随着的新任务而更新。有趣的是请求是异步的。...从测试中返回 promise 是能够确保 Jest 等待其解决的一种方法。总结在本文中，我们介绍了模拟模块，并将其用于伪造 API 调用。由于没有发出实际的请求要求，我们的测试可以更可靠、更快。

3.7K1 0

JavaScript 测试系列实战（三）：使用 Mock 模拟模块并处理组件交互

在这篇教程中，我们将学习如何测试更复杂的组件，包括用 Mock 去编写涉及外部 API 的测试，以及通过 Enzyme 来轻松模拟组件交互初次尝试 Jest Mock 我们的应用程序通常需要从外部的...，并且会返回一个 Promise，包含预先设定的假数据。...首先通过 jest.spyOn，我们便可以监听一个函数的使用情况，然后使用配套的 toBeCalled Matcher 来判断该函数是否被调用。整体代码十分简洁，同时也保持了很好的可读性。...从测试返回 promise 是确保 Jest 等待其异步方法执行结束的一种方法。小结在本文中，我们介绍了 mock 模块，并将其用于伪造API调用。...但是，上述解决方案不是很好，并且不能为我们提供进一步测试 Hooks 的舒适方法。

4.8K2 0

写代码无BUG，网易云前端单元测试方案总结

_compile (internal/modules/cjs/loader.js:778:30) at Object.Module....同时观察上面的输出可以发现，这个报告更像是程序的错误报告，而不是一个单元测试报告。..._compile (internal/modules/cjs/loader.js:778:30) at Object.Module..../时间模拟 (sinon.js）等工具。...此外 Enzyme 还注册了许多友好的断言函数到 Jest 中，如下所示，参考地址[8] toBeChecked() toBeDisabled() toBeEmptyRender() toExist()

9.5K2 0

万字详文：彻底搞懂 Jest 单元测试框架

什么是Jest 测试意味着什么我怎么知道要测试什么测试块，断言和匹配器如何实现测试块如何实现断言和匹配器 CLI 和配置模拟怎么模拟一个函数执行环境作用域隔离 V8 虚拟机运行单测回调...例如：一个名为求和(sum)函数应该返回给定一些运算结果的预期输出。...模拟在复杂的测试场景，我们一定绕不开一个 Jest 术语：模拟(mock) 在 Jest 文档中，我们可以找到 Jest 对模拟有以下描述：”模拟函数通过抹去函数的实际实现、捕获对函数的调用，以及在这些调用中传递的参数...), }); 这是一个简单模拟的示例，模拟了 fs 模块 readFile 函数在测试特定业务逻辑的返回值。...而 jest.fn 的实现也不难，这里我们使用一个闭包 mockFn 把替换的函数和参数给存起来，方便后续测试检查和统计调用数据。

7.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭