首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用create-react-app忽略Jest测试中生成的中继查询文件?

create-react-app是一个用于快速构建React应用的脚手架工具。在使用create-react-app创建项目时,默认会集成Jest作为测试框架,并生成一些默认的测试文件。

要忽略Jest测试中生成的中继查询文件,可以按照以下步骤进行操作:

  1. 打开项目根目录下的package.json文件。
  2. scripts属性中找到名为test的脚本命令。
  3. test命令后面添加一个参数--env=jsdom。修改后的脚本命令类似于:"test": "react-scripts test --env=jsdom"。
    • --env=jsdom参数告诉Jest在测试过程中使用jsdom环境,这样就可以忽略中继查询文件的生成。

完成以上步骤后,运行测试命令时,Jest将会忽略生成中继查询文件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用.gitignore忽略Git文件和目录

通常,在项目上使用Git工作时,你会希望排除将特定文件或目录推送到远程仓库库情况。.gitignore文件可以指定Git应该忽略未跟踪文件。...在本教程,我们将说明如何使用.gitignore忽略Git文件和目录。包括常见匹配模式*星号,斜杠/,#井号注释,?...例如,你可以使用文件忽略个人项目工具中生成文件。 全局.gitignore Git还允许你创建全局.gitignore文件,你可以为本地系统上每个Git仓库定义忽略规则。...要递归删除目录,请使用-r选项: git rm --cached filename 如果要从索引和本地文件系统删除文件,请忽略--cached选项。...该文件包含用于描述应忽略特定文件和目录模式。gitignore.io是一种在线服务,可让你为操作系统,编程语言或IDE生成.gitignore文件。如果你有任何问题或反馈,请随时发表评论。

8.9K10

如何做前端单元测试

前言 对于现在前端工程,一个标准完整项目,通常情况单元测试是非常必要。但很多时候我们只是完成了项目而忽略了项目测试。...常见单元测试工具 目前用最多前端单元测试框架主要有 Mocha (https://mochajs.cn/)、Jest (https://www.jestjs.cn/),但我推荐你使用 Jest,因为...Github stars & issues npm 下载量 Jest 下载量较大,一部分原因是因为 create-react-app 脚手架默认内置了 Jest, 而大部分 react 项目都是用它生成...都有很大优势,因此推荐你使用开箱即用 Jest 如何开始?...有很多自动化测试框架工具可以提供这一统计数据,其中最基础计算方式为: 单元测试覆盖率 = 被测代码行数 / 参测代码总行数 * 100% 如何生成

3.3K20
  • 2021年React学习路线图

    React Hook 是 React 16.8 引入新特性。它用在函数组件,允许开发者不使用情况下,使用状态和其他特性。 之前,函数组件是无状态,状态和生命周期用在类组件。...有了 Hooks,开发者可以在函数组件中使用状态。 你应该知道如何使用最常见 Hooks,比如 setState 和 useEffect。...学习 React 它是可选,但仍然是一个好用库。 3.2 测试 Jest - 简单 JavaScript 测试框架。 Jest 是一个简单 JavaScript 测试框架,它注重简单性。...编写测试很重要,根据我经验,通常比编写实际代码更难。 您应该学习最流行测试库,如 Jest 和 Enzyme,以及如何使用库(如 Sinon )模拟 API 调用。...您也可以尝试自己搭建 React 应用程序,而不使用 create-react-app 库。查看 Gulp、webpack 或 Babel,看看如何使用这些库来编译 React 代码。

    7.6K21

    React 设计模式 0x8:测试

    学习如何轻松构建可伸缩 React 应用程序:测试 # 如何测试组件 测试在每个 Web 应用程序中都非常重要,即使在 React 也是如此,特别是在其组件方面。...初始化测试项目: npx create-react-app testing-with-jest cd testing-with-jest npm install --save-dev jest 测试文件一般以...# 如何进行回归测试 回归测试是确保在进行更改之前测试所有内容仍然完好无损测试方法。当应用程序中发生更改时,应用程序某些内容很可能会出现故障。...回归测试目的在于确保一切仍然像以前一样正常工作。 可以使用 Jest 快照测试来实现这种回归测试。...React 组件工具和函数 编写测试用例 编写完整测试用例,覆盖组件所有代码路径,包括正常情况和异常情况 使用快照测试 使用 Jest 快照测试功能来验证组件是否按预期呈现 使用模拟数据

    1.8K10

    如何测试驱动开发 React 组件?

    什么是 TDD TDD(Test-driven development),就是测试驱动开发,是敏捷开发一项核心实践和技术,也是一种软件设计方法论。...本文将以创建一个 Confirmation 组件来说明,如何在 React 如何实现测试驱动开发。...测试组件 首先使用 create-react-app 初始化一个 react 项目。目前 cra 已经内置了 @testing-library/react 作为测试框架。...npx create-react-app my-react-app 我们先从测试文件开始。先创建了组件目录“Confirmation” 并在其中添加一个“index.test.js”文件。...例如: 如何测试 react hooks ? 如何测试 react 路由? 如何测试接口? 希望这篇文章对大家有所帮助,也可以参考我往期文章或者在评论区交流你想法和心得,欢迎一起探索前端。

    2.2K10

    如何测试驱动开发 React 组件?

    什么是TDD TDD(Test-driven development),就是测试驱动开发,是敏捷开发一项核心实践和技术,也是一种软件设计方法论。...本文将以创建一个 Confirmation 组件来说明,如何在 React 如何实现测试驱动开发。...测试组件 首先使用 create-react-app 初始化一个 react 项目。目前 cra 已经内置了 @testing-library/react 作为测试框架。...npx create-react-app my-react-app 我们先从测试文件开始。先创建了组件目录“Confirmation” 并在其中添加一个“index.test.js”文件。...如何测试react 路由? 如何测试接口? 希望这篇文章对大家有所帮助,也可以参考我往期文章或者在评论区交流你想法和心得,欢迎一起探索前端。

    2.1K10

    如何解决React官方脚手架不支持Less问题

    说在前面 create-react-app 是由 React 官方提供并推荐使用构建新 React 单页面应用程序最佳方式,不过目前版本(1.5.x)其构建项目中默认是不支持动态样式语言 Less...如果我们项目必须要使用 Less 呢,这就需要我们手动集成一下。本篇主要针对集成过程做一个简要记录。...如果您之前未曾使用create-react-app,请先通过如下命令全局安装(假定您本机已经安装了 Node.js): npm install -g create-react-app 然后,通过如下命令构建一个新项目...大概意思是,执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录。该操作是不可逆转,执行完成后会删除这个命令,也就是说只能执行一次。...} 然后在App.js文件通过如下API导入上述 less 文件: import '.

    1.9K30

    前端测试体系建设与最佳实践总结

    单元测试:是指对软件最小可测试单元进行检查和验证,通常指的是独立测试单个函数。 UI 测试:是对图形交互界面的测试。 集成测试:就是测试应用不同模块如何集成,如何一起工作,这和它名字一致。...Karma 能在真实浏览器测试,强大适配器,可配置其他单测框架,一般会配合 Mocha 或 Jasmine 等一起使用。 每个框架都有自己优缺点,没有最好框架,只有最适合框架。...、afterEach),减少测试代码数量,避免无用功能 测试、功能开发相结合,有利于设计和代码重构 编写说明 未来项目都是基于 Talos 生成,其实也就是使用Create-React-App...生成 React 项目,使用了 Vue-CLI@3 生成了 Vue 项目。...e2e,并与 src 同放在根目录下 VScode 和 WebStorm 都有对应 Jest 插件,安装后书写代码时有代码补全,debug 和自动运行等功能 如何编写测试 其实,Jest 语法蛮简单

    5.4K30

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

    本文介绍如何使用Jest覆盖Web前端单元测试如何统计测试覆盖率,Jest对比Mocha等内容。 Jest是什么? ? Jest是一个令人愉快 JavaScript 测试框架,专注于简洁明快。...基于以上划分,测试逻辑和范围就很清晰了: url.parse方法支持: 解析一般url 解析带hashurl 解析url片段 url.getParameter方法支持: 从指定url获取查询参数 从浏览器地址获取查询参数...和普通快照生成文件不同,行内快照会将快照内容直接打印到测试代码: // 运行前:expect({ name: "shanelv" }).toMatchInlineSnapshot();// 运行Jest...collectCoverage: true, }; 开启测试覆盖后,我们执行Jest测试完成就会在项目根目录生成一个coverage目录,用浏览器打开其中index.html文件查看测试覆盖报告。...如何“行内“跳过测试覆盖 特殊情况下,我们需要跳过文件某几句代码测试覆盖率统计: /* istanbul ignore else: 跳过else分支覆盖统计 */if (isNaN(value)

    5K40

    Jest + React Testing Library 单测总结

    2、Jest 使用 Jest 安装这里就不赘述了,如果使用 create-react-app 来创建项目,Jest 和 React Testing Library(RTL) 都已经默认安装了。...如果想要看如何安装 Jest,可以参考:Jest 上手。 Jest 常用配置项在根目录 jest.config.js ,常用配置可以参考:Jest 配置文件。...运行指定文件测试用例),就可以得到测试结果,如: 当然,如果想要看到覆盖率报告,可以使用 jest --coverage,或者 jest-report。...所以,Jest Mock 意义就在于可以帮助我们完成下面这些事情: 有些模块可能在测试环境不能很好地工作,或者对测试本身不是很重要,使用虚拟数据来 mock 这些模块,可以使你为代码编写测试变得更容易...3.1 render & debug 在测试用例渲染内容,可以使用 RTL 库 render,render 函数可以为我们在测试用例渲染 React 组件。

    4.6K20

    2020 年你应该知道 React 库

    CSS Modules 受到 create-react-app 支持,并为您提供了将 CSS 封装到模块方法。这样,它就不会意外地泄漏到其他人样式。...React 测试 如果您想深入了解 React 测试,请阅读以下内容: How to test components in React。要点如下: 测试 React 应用程序主干是 Jest。...至少,您可以使用 React-test-renderer 在 Jest 测试渲染 React 组件。这已经足以用 jest 来执行所谓快照测试了。...最终,您会发现自己在使用 Enzyme 或 React Testing Library (这两个都在 Jest 测试环境中使用)来进行更详细测试功能集。...然后,Jest 用于 DOM 节点上断言。 如果您正在为 React-to-end (E2E)测试寻找测试工具,Cypress 是最受欢迎选择。

    14.4K40

    create-react-app初探

    jest # or yarn add typescript@types/node @types/react @types/react-dom @types/jest 然后,将.js文件后缀改成.ts重启...build使用webpack进行编译打包,生成生产模式下所有脚本,静态资源 react-scripts test执行所有测试用例,完成对我们每个模块质量保证 这里,我们针对start这条线进行追踪...入口为create-react-app/packages/react-scripts/bin/react-scripts.js,这个脚本会在react-scripts设置到package.jsonbin...因为create-react-app my-app之后通过模版生成项目中入口脚本被放置在src/index.js,而入口html被放置在public/index.html,所以需要对这两个文件进行检查...HWR会实时刷新浏览器页面,可以很方便进行实时调试开发。

    1.3K10

    那些年错过React组件单元测试(上)

    Jest 关于Jest,我们参考一下其Jest 官网[1],它是Facebook开源一个前端测试框架,主要用于React和React Native单元测试,已被集成在create-react-app...collectCoverageFrom: 生成测试覆盖报告时检测覆盖文件 coverageDirectory: Jest 输出覆盖信息文件目录 coveragePathIgnorePatterns...: 排除出 coverage 文件列表 coverageReporters: 列出包含 reporter 名字列表,而 Jest 会用他们来生成覆盖报告 coverageThreshold: 测试可以允许通过阈值...我们发现有以下几种模式: f: 只会测试之前没有通过测试用例 o: 只会测试关联并且改变文件(需要使用 git)(jest --watch 可以直接进入该模式) p: 测试文件名包含输入名称测试用例...总结 到这里,关于前端单元测试一些基础背景和Jest基础api就介绍完了,在下一篇文章,我会结合项目中一个React组件来讲解如何做组件单元测试。 ?

    5K20

    Webify 新增自动适配框架和一键部署能力

    例如,Angular CLI 默认构建输出目录为 dist,而由 create-react-app 创建 React 脚手架项目则是把构建输出目录放到 build ,这些差异导致开发者在创建 Webify...Webify 如何实现「自动适配框架」? 项目根目录下 package.json 记录了项目的第三方依赖关系,这些依赖关系通常能折射出项目许多信息。...,那就表示项目大概率是使用 create-react-app 脚手架创建 React 项目。...用户点击按钮后,就可以直接进入到创建 Webify 应用流程(以 React 模板项目为例): ? 如何生成自己项目的按钮?...Webify 提供一键部署按钮生成器,开发者可以根据自己项目的实际情况,配置 仓库地址、子目录、默认应用名 等参数,为自己项目生成专属一键部署按钮! ?

    57020

    前端工程化之概念介绍

    配置文件 jest.config.js 6) 单元测试工具 jest 配置文件 .gitignore 7) Git 忽略配置文件 README.md...你可以认为: ❝「Souce Map 就是存储于JSON文件Map(哈希表)」 ❞ Source Map 基本原理 在编译器(Babel/SWC)编译处理过程,在生成产物代码同时,也生成产物代码中被转换部分与源代码相应部分...❝一般我们会在「转换后代码」通过「添加一行注释」方式来去「引入 Source Map 文件」 ❞ 对于同一个源文件,根据不同目标,可以生成不同效果 Source Map。...在开发环境,要求构建速度快/质量高/便于提升开发效率,而不关注生成文件大小和访问方式 在生产环境,需要考虑是否需要提供线上Source Map/生成文件大小/访问方式是否会对页面性能造成影响,最后才考虑质量和构建速度...(AKA:SMDP)生成.map文件 ❞ Webpack Source Map 预设 在 Webpack ,通过设置 devtool 来选择 Source Map 预设类型。

    75910
    领券