使用Jest运行测试时无法访问窗口属性

Jest是一个流行的JavaScript测试框架，用于编写和运行单元测试和集成测试。在某些情况下，当使用Jest运行测试时，可能会遇到无法访问窗口属性的问题。

这个问题通常出现在使用Jest进行前端测试时，因为Jest默认在一个类似于Node.js环境的虚拟DOM中运行测试代码，而不是在真实的浏览器环境中。因此，无法直接访问浏览器窗口对象的属性。

解决这个问题的一种常见方法是使用Jest提供的模拟功能。通过模拟浏览器环境，我们可以在测试中访问窗口属性。下面是一些解决方案：

使用jsdom模拟浏览器环境：Jest可以使用jsdom库来模拟浏览器环境。在测试文件的顶部，可以添加以下代码来创建一个虚拟的全局window对象：

import { JSDOM } from 'jsdom';

const { window } = new JSDOM('<!doctype html><html><body></body></html>');
global.window = window;
global.document = window.document;

这样，你就可以在测试中访问window对象和其他浏览器API了。

使用jest-environment-jsdom插件：jest-environment-jsdom是一个Jest插件，它提供了一个预配置的jsdom环境，可以直接在测试中使用。首先，安装插件：

npm install --save-dev jest-environment-jsdom

然后，在Jest配置文件中，添加以下配置：

{
  "testEnvironment": "jest-environment-jsdom"
}

这样，Jest将使用jsdom环境来运行测试，你就可以访问窗口属性了。

使用全局变量：如果你的测试代码依赖于某些特定的窗口属性，你可以在测试文件的顶部定义一个全局变量，并在测试中使用它。例如：

global.myWindowProperty = 'some value';

然后，在测试中可以直接使用myWindowProperty变量。

相关·内容

Vue项目无法使用局域网IP直接访问的配置方法

一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的，比如 192.168.1.11:8080 。但是最近公司的一个项目只可以通过 localhost 访问。...需要配置一下，才可直接用局域网 IP 访问，方法如下：给 dev 添加--host 0.0.0.0 属性： "scripts": { "dev": "webpack-dev-server --inline...如果还是无法访问，需要配置一下电脑的防火墙，把所需的端口（如：8080）打开。设置方法如下： Windows 10 ，搜索“控制面板”，打开，Windows 7 可以直接在开始菜单打开。...获取电脑 IP 的方法： Win + R 运行“cmd”，输入 ipconfig 回车, 就可以看到自己的IP了，比如我的 192.168.2.103 。...这样更加方便真机调试，无需部署到服务器就可以进行访问和测试。声明：本文由w3h5原创，转载请注明出处

6K5 0

WebStorm for Mac(JavaScript开发工具)中文版

更新文档CSS属性和HTML标记及属性的文档（F1）现在显示有关MDN的浏览器支持的最新描述和信息，以及指向完整MDN文章的链接。...CSS的浏览器兼容性检查要检查目标浏览器版本是否支持您使用的所有CSS属性，可以在首选项中启用新的浏览器兼容性检查。...突出显示测试中的失败行当您使用Jest，Karma，Mocha或Protractor运行测试并且某些测试失败时，您现在可以在编辑器中看到问题发生的位置。...IDE将使用堆栈跟踪中的信息并突出显示失败的代码。在悬停时，您将看到来自测试运行器的错误消息，您可以立即开始调试测试。...支持Docker Compose如果使用Docker测试Node.js应用程序，现在可以使用Docker Compose文件中描述的配置从IDE 轻松运行和调试应用程序。

4.9K5 0

在 ts + Jest 单元测试中 debugging

弹出一个单独的 devtools 窗口执行命令 node --inspect node_modules/.bin/jest --runInBand --runInBand 选项，表示仅在当前的进程中连续运行所有测试...，而非通过创建的子进程的工作池来运行测试。...Jest运行测试用例的特点是多进程并发运行不同测试案例，达到快速的效果。但是这样对调试来说是没法进行的。这个参数保证了使用一个进程运行所有代码。接下来就可以开心的 debug 了： ?...jest 的 launch.json 的配置项，可以借鉴一下使用jest+enzyme进行react项目测试 - debug篇：虽说是 2017 年的文章，仍旧有可借鉴性 Debugging with...TypeScript, Jest, ts-jest and Visual Studio Code：对新手友好的单元测试 debugger 入门文章，一步步教你；

4K3 0

React 设计模式 0x8：测试

# 渲染测试渲染测试是一种测试，用于验证您的组件是否正确渲染。 # 使用 Jest 进行功能测试 Jest 是测试 React 应用程序时非常流行的测试库。...Jest 通常用于运行功能测试，但我们也可以用它进行渲染测试。...如果快照不匹配，则测试将失败。 # 使用 Cypress 进行端到端（e2e）测试当涉及端到端测试时，Cypress 在其他框架/库中处于领先地位。...这将打开一个新窗口，显示您可以使用的一些预配置测试。要了解有关 Cypress 的更多信息，可以访问 React Quickstart (opens new window)。...，确保各个组件之间的交互和数据传递是正确的使用 CI/CD 将测试集成到 CI/CD 管道中，以便在每个提交时自动运行测试并及时发现问题运行覆盖率测试运行覆盖率测试以检查测试代码是否覆盖了应用程序的所有部分

1.8K1 0

Sentry 开发者贡献指南 - 测试技巧

sentry devservices up 使用 --project 选项时，您可以确认哪些容器正在运行 docker ps。...-s 在运行测试时不要捕获标准输出。有关更多使用选项，请参阅 pytest 文档。...验收测试可以在 tests/acceptance 中找到，并使用 pytest 在本地运行。运行验收测试当您运行验收测试时，webpack 将自动运行以构建静态资资源。...定位元素因为我们使用 emotion，所以我们的类名通常对浏览器自动化没有用。相反，我们自由地使用 data-test-id 属性来定义浏览器自动化和 Jest 测试的 hook 点。...虽然我们对视觉回归有相当广泛的覆盖，但仍有一些重要的盲点：悬停(Hover)卡片与悬停状态模态窗口图表和数据可视化所有这些组件和交互通常不包含在可视化快照中，您在处理其中任何一个时都应该小心。

1.7K5 0

web前端好帮手 - Jest单元测试工具

/test.txt"); expect(data.toString()).toBe("333"); }); 注意，Jest检测到异步测试时（比如使用了done或者函数返回promise），Jest会等待测试完成...钩子和作用域测试时难免有些重复的逻辑，比如我们测试读写文件时需要准备个临时文件，或者比如下面我们使用afterEach钩子，在每个测试完成后重置全局变量： global.platform = {};function...明确的功能点测试不要用快照，比如下面我们明确要测试setName方法是否能成功设置name属性时，这种情况不应该用快照： test("setName方法改变name属性“, () => { let...expect(person.name).toBe("shanelv") }); 这里我们不需要使用快照记录person实例的其他属性，只需要测试name属性，所以明确的测试点用明确的代码去覆盖，这种场景不要用快照...首先，由于Jest启动多个进程，并发地跑测试，我们使用node-inspect的方式去跑断点调试时，chrome://inspect页面上断点不会被中断，导致我们无法断点调试。

5K4 0

微信小程序自动化实现:Automator

参考:官方文档单个测试文件测试流程安装小程序自动化SDK配合jest实现小程序自动化测试：miniprogram-automator 、jest 示例 index.spec.js const automator...():断开与小程序运行时的连接并关闭项目窗口。...number - 指定时间之后，结束等待 string - 参数被当成选择器，当该选择弃元素个数不为0时，结束等待 Function - 断言函数，返回true时，结束等待。...element.callMethod():调用组件实例指定方法，仅自定义组件可以使用。...element.data():获取组件实例渲染数据，仅自定义组件可以使用。

1K5 0

SpringBoot与检索(ElasticSearch)

异常：如果启动后，docker 容器自动关闭，且无法访问 docker logs -f id[容器id] // 查看启动日志 20201002130249.png // 修改 elasticsearch.yml...bootstrap.system_call_filter: false cluster.initial_master_nodes: ["node-1"] 20201002130818.png 解决详细方法，请参考博客运行下面这条指令...>jest 6.3.1 2. application.yml 配置 spring.elasticsearch.jest.uris...(2.2 和 2.3) 更多操作：https://github.com/searchbox-io/Jest/tree/master/jest // 测试搜索 @Test public void search...void testRepositories(){ //查询 //Elasticsearch Repositories提供and,by等一大堆关键字来连接JAVABEAN属性

6962 0

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

在我们使用大部分前端框架时其实已经内置了jest的环境，如vue-cli/umi等，所以并不需要大家从0开始搭建，大部分只需要修改配置即可快速使用。...下面会根据各种场景进行分析二、异步函数在我们实际开发中我们会遇到很多异步函数，但是因为Jest在进行测试时，默认情况下一旦到达运行上下文底部当前测试立即结束，这样意味着测试将不能按照我们的预期进行，...runOnlyPendingTimers 运行当前队列中等待的定时器 advanceTimersByTime 调用此API时，所有计时器都会提前到传入的毫秒这里我们使用useFakeTimers和...，是因为jest.runAllTimers会运行所有定时器，而我们需要测试的代码是不会停止的。...在类中我们可以使用private对方法进行私有化，此时我们在单测时没办法直接访问或者模拟。需要通过对私有成员使用数组访问或者通过prototype属性进行模拟。

10.3K2 0

Jest + React Testing Library 单测总结

}); }); 通过运行 npm run jest （运行所有的 test suite 和 test case，以及断言），或者 npm run jest -t somefile.test.tsx（...运行指定文件中的测试用例），就可以得到测试结果，如：当然，如果想要看到覆盖率的报告，可以使用 jest --coverage，或者 jest-report。...2.2 Jest 匹配器 Jest 匹配器是在 expect 断言时，用来检查值是否满足一定的条件。...get 和 query 的区别主要是在未找到元素时，queryBy 会返回 null，这对于我们测试一个元素是否存在时非常有帮助。...ByTitle：title 属性或元素 ByRole：ARIA role，可以定位到辅助树中的元素 Id getByTestId：函数需要在源代码中添加 data-testid 属性才能使用一般而言

4.6K2 0

用 Jest 进行 JavaScript 测试

Jest 是一个 JavaScript 测试运行器，即用于创建、运行和结构化测试的 JavaScript 库。Jest 作为 NPM 包发布，你可以将其安装在任何 JavaScript 项目中。...Jest 是目前最受欢迎的测试运行器之一，也是 Create React App 的默认选择。首先要做的事情：我怎么知道要测试些什么？当谈到测试时，即使是简单的代码块也会使初学者瘫痪。...Jest 具有内置代码覆盖率，你可以通过两种方式激活：通过命令行传递标志“-coverage” 通过在 package.json 中配置 Jest 在使用 coverage 运行测试之前，请确保在 tests...": true, "coverageReporters": ["html"] }, 现在，每次运行 npm test 时，你都可以在项目文件夹中访问名为 coverage 的新文件夹：getting-started-with-jest...Jest的HTML代码覆盖率报告如果单击函数名称，你还会看到确切的未经测试的代码行： ? 单个文件的Jest代码覆盖率报告很整洁不是吗？使用代码覆盖，你可以在有疑问时发现要测试的内容。

2.7K3 0

前端自动化测试实践01—持续集成之jest自动化测试环境搭建

前端的自动化测试无非也是编写测试用例，在持续集成时执行跑通全部测试用例。...2. jest 环境搭建 2.1 jest 安装 jest 需要自动运行测试脚本，node 环境是必不可少的，如果从头搭建，首先得初始化项目 package.json 并安装 jest： $ npm init...(multi(3, 3)).toBe(9); }) 执行测试，并在控制台观察结果 $ npm run test $ npm run coverage 3. vue-cli 中使用 jest 现实项目中，...jest.config.js，重点关注 testMatch 和 testPathIgnorePatterns 两个属性，testMatch 指定了匹配的测试用例文件的路径，而 testPathIgnorePatterns...则可以忽略指定文件，因此使用两个属性可以精确匹配到项目中所有的测试用例。

2.5K5 4

也来扯扯 Vue 单元测试

当然，这也并不是说代码应该“迁就”于单元测试，如果这样就有点儿本末倒置了。总之，单元测试能提高程序的可靠性，让开发者在发布时更有底气，让使用者更有安全感。...Jest 相对于 karma + mocha + Chrome 组合的优缺点前面提到，我最终转向了使用 Jest，这并非一时脑热，而是经过多次权衡和尝试之后才作的决定。...我大致做了下对比，粗略总结如下：优点一站式的解决方案在使用 Jest 之前，我需要一个测试框架（mocha），需要一个测试运行器（karma），需要一个断言库（chai），需要一个用来做 spies...这些问题，在使用 karma-mocha Chrome 的时候是没有的，因为测试运行于真实的浏览器环境中。 ChromeHeadless vs. PhantomJS?...较新版本的 Chrome 支持以 headless 模式运行，这对于测试这种不需要显示界面的任务来说是很合适了（其实也可以使用常规模式，只不过执行测试的时候 Chrome 会弹出窗口）。

1.8K3 0

【干货分享】微信小程序单元测试攻略

总体来说，单元测试有以下一些好处： 1，及早发现代码错误，提高代码质量和可维护性。 2，代码变更时可以快速进行检查。然而要做好测试也有一定的困难： 1，花费时间长。...jsdom'，因为框架使用的是这个环境，如果配错会运行不起来。...2.3.3 完整的断言方法 2.3.4 模拟数据mock 当被测方法包含环境因素不能直接测试时，例如使用了localStorage，又或者被测方法调用了接口，不希望测试时调用接口影响业务或降低测试速度...其实是在mock的时候，就将这个方法放在cache中，当其他地方要import方法时，会先查看cache中有没有该方法，如果我们有mock了，他就使用mock的方法了。...3.3 覆盖率监测原理使用“jest --coverage”进行覆盖率测试时，会在项目里生成覆盖率报告：给人看的：报告示例： 04 踩坑日志 4.1 load的id为null、render组件

2.7K4 0

使用storybook管理React组件

测试UI组件 4.1 写测试用例的原因找到bug 新修改没有改变已有的接口和功能将测试用例作为文档 4.2 测试结构使用storyshots插件来实现，其核心是使用Jest，原理是每次生成一份DOM...PS：下次运行Jest时，只有DOM结构与上次完全一致测试才会通过，通常会有两种方法来解决这种情况：找到问题，修复不同；用新的DOM结构替换旧的。...4.3 测试交互 storybook交互性测试可以使用 Enzyme来模拟用户输入，然后使用Mocha or Jest来进行结果测试，storybook又一个专门的插件帮助我们集成他们：specifications...UI组件的属性，更多使用方法可以参考specifications插件的使用。...PS：测试不通过时，运行npm run jest:integration将强制更新原有快照。

3.4K2 0

JavaScript 测试系列实战（二）：深层渲染和快照测试

在测试与 DOM 的交互或者在处理高阶组件时，mount 函数也可以派上用场。_Mount 使用 DOM 实现的模拟，Jest 默认使用的是 jsdom。...我们可以通过调整 testEnvironment 属性更改。快照测试快照测试是 Jest 的一大招牌功能。所谓快照，可以简单地理解成是我们应用的一个**“代码截图”**。...当我们运行快照测试时，Jest 将会渲染组件并创建其快照文件。这个快照文件包含渲染后组件的整个结构，并且应该与测试文件本身一起提交到代码库。...当我们再次运行快照测试时，Jest 会将新的快照与旧的快照进行比较，如果两者不一致，测试就会失败，从而帮助我们确保用户界面不会发生意外改变。...如果我们要更新所有失败的快照，可以使用 -u 标志(别名为 --updateSnapshot) 来运行 Jest。

2.1K2 0

手写一个js工具库并且发布到npm上，并且添加eslint和jest单元测试详细教程和解决方案

，报错了图片从报错信息我们可以看到是 import出错了解决方案：给package.js添加一个属性"type":"module",此时再运行一下可以看到，能够正常运行了图片以后我们在src目录下肯定会增加很多工具函数...，没有使用全等的地方爆红了，修改后恢复到正常图片添加单元测试jest单元测试的执行通常需要测试规范、断言、mock、覆盖率工具等支持，而est 是用来创建、执行和构建测试用例的 JavaScript...测试库，自身包含了驱动、断言库、mock 、代码覆盖率等多种功能安装npm i --save-dev jest把 jest 安装到项目后，在 package.json 添加配置"scripts": {..."test": "jest"}这样就可以使用命令 npm test 执行测试代码了创建一个「test/getDataType.test.js」文件来测试getDataType方法import...": true 图片在jest原生测试框架中，无法使用es6的import export语法，只能使用commonJS语法，可以使用下面的方式解决step1: 在项目根目录下添加.babelrc文件{

1.5K1 0

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

首先，我将介绍单元测试的基础知识，即测试应用程序的每个部分并检查它们是否适合使用。为此我们将使用 Facebook 开发的测试框架 Jest。它已经准备就绪，并具有进行测试所需的功能。...稍后我们将学习如何在 React 中使用 Jest 首先，让我们创建一些可以测试的简单函数。...你可以在项目的 package.json 文件中用 testRegex 属性指定。...使用 Jest，你可以使用 describe 函数对它们进行分组。它创建了一个可以合并多个测试的块。...为了运行测试，我们使用了test、 it 和 describe 函数。

2.8K2 0

如何发布一个 TypeScript 编写的 npm 包

前言在这篇文章中，我们将使用TypeScript和Jest从头开始构建和发布一个NPM包。我们将初始化一个项目，设置TypeScript，用Jest编写测试，并将其发布到NPM。...添加测试作为一名负责任的开发，我们将从测试开始。我们将使用jest，因为它简单且好用。...使用npm t运行测试，当然，不出意外会失败。...运行以下命令：npm publish --dry-run并确保只包括所需的文件。当一切准备就绪时，就可以运行：npm publish测试一下让我们创建一个全新的项目并安装我们的模块。...然后运行node index.js，你会看到屏幕上打印1。总结我们从头开始创建并发布了一个简单的npm包。我们的库提供了一个ESM模块，TypeScript的类型，使用jest覆盖测试用例。

1.4K2 0

你不知道的 Vue 单元测试（6000字实战单元测试）

主流的单元测试运行器有很多，比如 Jest、Mocha 和 Karma 等，这几个在 Vue-Test-Utils 文档里都有对应的教程，这里我们只介绍 Vue-Test-Utils + Jest 结合的示例...❝Jest 是一个由 Facebook 开发的测试框架。Vue 对其进行描述：是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。...❞ 环境配置通过脚手架 vue-cli 来新建项目的时候，如果选择了 Unit Testing 单元测试且选择的是 Jest 作为测试运行器，那么在项目创建好后，就会自动配置好单元测试需要的环境，直接能用...运行测试覆盖率命名后会在项目根目录生成 coverage 目录，浏览器打开里面的 index.html ： ?...● JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件● 你不知道的 Npm（Node.js 进阶必备好文）● 用动画和实战打开 React Hooks（

11.4K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云