Nextjs Cypress 只发现单元测试代码覆盖率

2024-01-08

我正在尝试在此之后向 cypress 添加代码覆盖率tutorial https://docs.cypress.io/guides/tooling/code-coverage#Introduction

I added @cypress/code-coverage and babel-plugin-istanbul to my package.json下面的文件

{
  "name": "quiz",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "cypress": "cypress open"
  },
  "dependencies": {
    "next": "12.0.10",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.49.7"
  },
  "devDependencies": {
    "@cypress/code-coverage": "^3.9.12",
    "@types/node": "17.0.15",
    "@types/react": "17.0.39",
    "babel-plugin-istanbul": "^6.1.1",
    "cypress": "^9.4.1",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.10",
    "typescript": "4.5.5"
  }
}

我配置了我的cypress/support/index.js

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
import '@cypress/code-coverage/support'

我配置了我的cypress/plugins/index.js

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
  on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
  return config
}

My .babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "istanbul"
  ]
}

运行测试后,我收到以下消息

Only found unit test code coverage. [@cypress/code-coverage]

当我运行我的quiz.spec.js测试,我跑

npx nyc report --reporter=text-summary  

并获得一个空的覆盖范围摘要

我究竟做错了什么?

My github https://github.com/develijahlee/quiz


我认为这只是一个 node_modules 问题,因为您的存储库在下载和初始化后可以正常工作。我认为如果 babel 的依赖关系出现问题,它可能会默默地失败。

我删除了package.lock(因为我用yarn管理事物)然后yarn初始化依赖项。

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

Nextjs Cypress 只发现单元测试代码覆盖率 的相关文章

  • 需要将mxGraph与react js集成

    是否有任何示例或示例项目解释如何将 mxGraph 与 React js 集成 import React Component from react import PropTypes from prop types import ReactD
  • 使用相同的 props 来反应备忘录重新渲染?

    有一个相当简单的功能组件 如果给出相同的道具 我想阻止它被重新渲染 下面是网上找的 貌似不行 知道我应该做什么吗 就我而言 props 由一组对象组成 其中一些也是嵌套对象 这也许是一个线索 export const DataTable R
  • 如何在React Material UI简单输入中启用文件上传?

    我正在创建一个简单的表单来使用带有 redux 表单和材料 ui 的 electro react boilerplate 来上传文件 问题是我不知道如何创建输入文件字段 因为材料用户界面不支持上传文件输入 关于如何实现这一目标有什么想法吗
  • 发布到 npm 时出现问题

    所以我尝试使用 React 构建一个开源项目并将其推送到 npm 问题是 我的组件虽然在测试环境中运行良好 安装到其他组件 但当我将其发布到 npm 并下载包并尝试访问它时 它给了我一个错误 这是代码的一个小示例 import React
  • 过滤嵌套的 JSON 对象

    我有一个搜索栏 您可以在其中输入员工姓名 它应该根据过滤器返回姓名 我有一个嵌套的 JSON 对象 如下所示 我需要深入了解该对象以访问数组中的员工姓名 您可以看到我尝试实现的多个选项 它们已被注释掉 我的问题是代码没有过滤名称并返回所有名
  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • 将 sass 变量导入 gatsby 组件中引用的第二个 Sass 文件

    我正在使用 Gatsby 构建一个静态站点项目 我已经成功安装了 gatsby sass 插件并让 sass 正常工作 但是 我无法将自定义 sass 变量文件正确导入到其他组件 sass 文件中 下面是我的文件夹结构 src compon
  • useEffect 中的 setTimeout 函数输出缓存的状态值

    这很简单 我正在使用 Redux 来管理我的状态 我有一个setTimeout函数在一个useEffect功能 The setTimeout超时值为50000ms 我想要 SetTimeout 处理程序做什么 After 50000ms t
  • Facebook SDK 登录/注销 ngrok

    我正在尝试将我正在构建的网络应用程序与 Facebook 集成 Facebook 现在要求所有 API 调用都必须从 https 站点进行 我正在构建的这个应用程序只是为了好玩 所以我使用的是 localhost 我在用着ngrok将我的请
  • MUI DatePicker + date-fns 本地化问题

    当我使用MUI时出现这个问题日期选择器 with 本地化提供商 and 适配器日期Fns with 匈牙利 local
  • 自定义 SVG 未加载到我的图像标签中

    目前我正在尝试将自定义 svg 组件加载到图像标签内 但由于某种原因 我无法看到地图组件内的 svg 图像 我的自定义 SVG 文件如下所示 我在 SVG 中加载另一个图像
  • 如何使用 React 获取查询字符串?

    我试图从网址获取 query 123 http localhost 3000 query 123 http localhost 3000 query 123 Tried App js const search this props loca
  • 下一张图片不采用类属性

    我正在使用 Next js 和next image显示图像 但 CSS 在其中不起作用 该图像是 SVG 格式 我已将其放在公共文件夹中 我正在使用 Tailwind CSS 与此一起使用
  • 在这个反应示例中,bind 做了什么?

    什么是bind在这个声明中做this tick bind 这个 在下面的代码中 export class Counter extends React Component constructor props super props this
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • 在 Chrome 中使用 React 添加新的 DOM 项目不会保持预期的滚动位置

    在 React 中向状态数组添加新项目时 我遇到了一个意外的问题 这会导致更多项目被添加到 DOM 中 在 Safari 和 Firefox 中 这会导致新的 DOM 项目添加到折叠下方 我必须向下滚动才能看到新项目 在 Chrome 中
  • Redux 减速器的副作用

    Redux 减速器应该没有副作用 但是 如果某个操作应该触发浏览器中文件的下载 其中内容基于商店的状态 该怎么办 这当然应该算作副作用吗 像下面这样的方法可以吗 还是我应该寻找替代方法 case SAVE GRID const json s
  • 如何使用 next auth 通过自定义 Spring API 库和端点进行身份验证

    我是 Next js 的新手 正在将我的前端从 React 迁移到 Next v4 我已经使用 Spring 开发了一个后端 它连接到 Azure 上托管的 MySQL 数据库 该 API 在 Postman 和 React 前端上经过全面
  • useParams 钩子在 React 功能组件中返回未定义

    该应用程序显示所有照片
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

随机推荐