正文

如何使用 jest 在单元测试中测试引导 vue 组件的存在？

 2023-02-22  107

关键词：

【中文标题】如何使用 jest 在单元测试中测试引导 vue 组件的存在？【英文标题】：How to test for the existance of a bootstrap vue component in unit tests with jest? 【发布时间】：2019-11-21 17:30:00 【问题描述】：

所以我有一些包含b-form-input 组件的代码，我正在测试该组件是否呈现。我正在使用wrapper.find(name: "b-form-input").exists() 来确定该引导 vue 组件是否存在。但是，当我知道组件正在呈现时，此函数会不断返回 false。我可以就如何正确执行此操作提供一些帮助吗？

【问题讨论】：

wrapper.html() 给你什么？您可以import BInputGroup from 'bootstrap-vue' 并使用wrapper.find(BInputGroup)。看源码，组件的名字是“BInputGroup”，所以可能需要使用wrapper.find(name: "BInputGroup") 是的，第二个有效，我还打了一个错字，我修正了我在寻找 b-form-input 时正在寻找 b-input-group。第一种方法报错：[vue-test-utils]: wrapper.find() must be passed a valid CSS selector, Vue constructor, or valid find option object。你会写一个答案让我接受吗？ 【参考方案1】：

查看bootstrap-vue源代码，看起来元素的名称是BFormInput而不是b-form-input（它是使用kebab-case注册的）：

https://github.com/bootstrap-vue/bootstrap-vue/blob/2fb5ce823a577fcc2414d78bd43ed9e5351cb1c0/src/components/form-input/form-input.js#L33
...
export const BFormInput = /*#__PURE__*/ Vue.extend(
  name: 'BFormInput',
  ...

您有两种选择来定位组件；使用名称或组件构造函数。例如：

import BootstrapVue,  BFormInput  from 'bootstrap-vue';
import  shallowMount, createLocalVue  from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

const localVue = createLocalVue();
localVue.use(BootstrapVue);

describe('HelloWorld.vue', () => 
  it('BFormInput exists', () => 
    const wrapper = shallowMount(HelloWorld,  localVue )
    expect(wrapper.find( name: 'BFormInput' ).exists()).toBe(true);
    expect(wrapper.find(BFormInput).exists()).toBe(true);
  );
);

【讨论】：

如何在单元测试期间使用 vue-test-utils 和 jest 模拟 mixin？

】如何在单元测试期间使用vue-test-utils和jest模拟mixin？【英文标题】：Howtomockmixinduringunittestusingvue-test-utilsandjest?【发布时间】：2019-08-0719:55:35【问题描述】：我想在Test.vue中测试testMethod，但是testMethod使用了从App.js导入的mixin。Tes... 查看详情

text如何在项目创建后使用jest实施vue单元测试？(代码片段)

查看详情

如何在 Jest 单元测试中模拟在 `created` Vue 生命周期挂钩中调用的方法，而不使用`shallowMount` 中已弃用的`methods` 参数？ [复制]

】如何在Jest单元测试中模拟在`created`Vue生命周期挂钩中调用的方法，而不使用`shallowMount`中已弃用的`methods`参数？[复制]【英文标题】：Howtomockmethodcalledin`created`VuelifecyclehookinJestunittestwithoutusingdeprecated`methods`paramin`shallowMount`?[dupli... 查看详情

如何测试我的数据是不是更改？（Vue JS、Jest、单元测试）

】如何测试我的数据是不是更改？（VueJS、Jest、单元测试）【英文标题】：HowdoItestifmydatachanges?(VueJS,Jest,UnitTesting)如何测试我的数据是否更改？（VueJS、Jest、单元测试）【发布时间】：2020-04-2508:54:26【问题描述】：我正在我的前... 查看详情

Vue 和 Jest 单元测试组件

...手，我开始使用Jest进行单元测试。我不知道从哪里以及如何开始。我有这段Vue代码，我想用Jest进行测试。任何提示或想法我都会非常感激。我读到我应该使用Vuetest-utils中的shallowMount来避免组件测试期间的麻烦<templa 查看详情

用 jest 测试 Vue 过滤器

...行测试吗？我搜索了很多，但找不到任何东西可以告诉我如何在Vue中为过滤器编写单独的测试importVuefrom\'vue\'exp 查看详情

如何使用 NextJS API 在 Jest 单元测试中考虑 Google reCaptcha

】如何使用NextJSAPI在Jest单元测试中考虑GooglereCaptcha【英文标题】：HowtoAccountforGooglereCaptchainJestUnitTestwithNextJSAPI【发布时间】：2021-10-3104:15:34【问题描述】：我已经使用NextJS设置了一个简单的API端点，并希望能够为它实现一些单... 查看详情

使用 Jest、Vue、Vuetify 和 Pug 运行单元测试

】使用Jest、Vue、Vuetify和Pug运行单元测试【英文标题】：RununittestwithJest,Vue,Vuetify,andPug【发布时间】：2020-07-3114:44:38【问题描述】：我目前正在开发一个项目，该项目使用Vue、基于类的组件、typescript、pug、vuetify和Jest进行单元测... 查看详情

在 Nuxt、Vue、jest 和 Vuetify 中为项目编写单元测试

...的组件的实际单元测试没有通过。详情：我正在开发一个使用Vue、NUXT、Vuetify和pug作为模板语言构建的查看详情

Vue Test Utils / Jest - 如何测试是不是在组件方法中调用了类方法

】VueTestUtils/Jest-如何测试是不是在组件方法中调用了类方法【英文标题】：VueTestUtils/Jest-HowtotestifclassmethodwascalledwithinacomponentmethodVueTestUtils/Jest-如何测试是否在组件方法中调用了类方法【发布时间】：2019-01-2500:42:50【问题描述】... 查看详情

如何使用 jest 在 nuxt.js 中测试 head()

】如何使用jest在nuxt.js中测试head()【英文标题】：Howtotesthead()innuxt.jsusingjest【发布时间】：2020-05-1418:26:53【问题描述】：我正在使用带有Jest的Nuxt.js进行单元测试。我在布局中添加了一个head函数来更改标题，我想对其进行单元测... 查看详情

如何在 JEST 单元测试中修复“SVG 未定义”

】如何在JEST单元测试中修复“SVG未定义”【英文标题】：Howtofix"SVGNotdefined"inJESTunittesting【发布时间】：2019-05-3022:33:52【问题描述】：我正在尝试为typescript类中定义的函数设置单元测试用例。这个类依赖于svg.js。现在，... 查看详情

如何在带有 Jest 的 react-native 中使用模拟的 fetch() 对 API 调用进行单元测试

】如何在带有Jest的react-native中使用模拟的fetch()对API调用进行单元测试【英文标题】：HowtounittestAPIcallswithmockedfetch()inreact-nativewithJest【发布时间】：2016-07-0408:13:56【问题描述】：在ReactNative中，我使用fetch来执行网络请求，但是fet... 查看详情

在 NestJS 中使用 Jest 和 MongoDB 进行单元测试

】在NestJS中使用Jest和MongoDB进行单元测试【英文标题】：UnittestinNestJSwithJestwithMongoDB【发布时间】：2018-09-3006:55:17【问题描述】：我正在使用Jest在框架NestJS中实现单元测试。当我启动测试时，会发生此错误：我的测试文件是这样... 查看详情

如何在 SharePoint SPFx + react 项目中配置 jest 单元测试框架

】如何在SharePointSPFx+react项目中配置jest单元测试框架【英文标题】：howtoconfigurejestunittestframeworkinSharePointSPFx+reactproject【发布时间】：2021-12-2416:50:15【问题描述】：我尝试配置jest单元测试框架以响应SharePointSPFx项目下面我提到所... 查看详情

如何测试是不是使用 Jest 调用了 Vue 方法？

】如何测试是不是使用Jest调用了Vue方法？【英文标题】：HowdoItestifaVuemethodwascalledusingJest?如何测试是否使用Jest调用了Vue方法？【发布时间】：2021-09-0614:58:04【问题描述】：我正在尝试进行测试，看看是否在按下按钮时调用了我... 查看详情

如何使用 Jest 对 quasar 应用程序进行单元测试？

】如何使用Jest对quasar应用程序进行单元测试？【英文标题】：HowdoIunittestaquasarappusingJest?【发布时间】：2019-03-1723:09:30【问题描述】：我有一个使用quasar-cli生成的类星体应用程序。对于这样的应用程序，如何将单元测试集成到像... 查看详情

在 Vue 3 的 Jest 测试中模拟 vue-router 的 useRoute()

...间】：2021-03-2022:01:32【问题描述】：我在我的应用程序中使用Vue3和Vue-Router，但在使用Jest在使用useRoute()的组件上创建单元测试时遇到了问题，例如：<template><div:class 查看详情

正文