关键词：
【中文标题】Vue 和 Jest 单元测试组件【英文标题】：Vue and Jest unit testing components 【发布时间】：2019-01-02 09:17:46 【问题描述】：我是 Vue js 的新手，我开始使用 Jest 进行单元测试。我不知道从哪里以及如何开始。我有这段 Vue 代码，我想用 Jest 进行测试。任何提示或想法我都会非常感激。 我读到我应该使用 Vue test-utils 中的 shallowMount 来避免组件测试期间的麻烦
<template >
<div class="wrapper">
<div class="user">
<span> user.substr(0, 4) </span>
</div>
</div>
</template>
<script>
export default
props:
user:
type: String,
required: true
</script>
目前我有这样的事情，但我不知道如何继续
import shallowMount from '@vue/test-utils'
import User from '../User.vue'
describe('User', () =>
it('Should substract four letters', () =>
const wrapper = shallowMount(User,
props:
''
)
)
)
【问题讨论】：
【参考方案1】：您可以阅读vue-test-utils 官方文档，它非常清晰且很有帮助。要了解如何模拟函数、存根和其他测试内容，请参阅 Jest 文档。
在您的示例中 - 使用 propsData 而不是 props（查看上面的文档），您应该以一些断言结束您的每个测试用例（检查期望）：
describe('User', () =>
it('Should substract four letters', () =>
const wrapper = shallowMount(User,
propsData:
user: 'User00000000'
)
// check that span element has correct substring
expect(wrapper.find(".user span").text()).toBe('User');
)
)
【讨论】：
在 Nuxt、Vue、jest 和 Vuetify 中为项目编写单元测试
】在Nuxt、Vue、jest和Vuetify中为项目编写单元测试【英文标题】：WritingUnittestforprojectinNuxt,Vue,jest&Vuetify【发布时间】：2020-06-2512:55:16【问题描述】：TL;DR从Vuetifylink复制的组件的单元测试通过了，但我在pug中编写的组件的实际单... 查看详情
使用 Jest、Vue、Vuetify 和 Pug 运行单元测试
】使用Jest、Vue、Vuetify和Pug运行单元测试【英文标题】：RununittestwithJest,Vue,Vuetify,andPug【发布时间】：2020-07-3114:44:38【问题描述】：我目前正在开发一个项目，该项目使用Vue、基于类的组件、typescript、pug、vuetify和Jest进行单元测... 查看详情
如何使用 jest 在单元测试中测试引导 vue 组件的存在？
】如何使用jest在单元测试中测试引导vue组件的存在？【英文标题】：Howtotestfortheexistanceofabootstrapvuecomponentinunittestswithjest?【发布时间】：2019-11-2117:30:00【问题描述】：所以我有一些包含b-form-input组件的代码，我正在测试该组件是... 查看详情
带有 vue-test-utils 和 Jest 的 Vue.js 单元测试用例失败
】带有vue-test-utils和Jest的Vue.js单元测试用例失败【英文标题】：Vue.jsunittestcaseswithvue-test-utilsandJestfailing【发布时间】：2019-01-2719:48:57【问题描述】：使用vue-cli3，我开始学习用Jest进行单元测试我为我的初始标题组件编写了我的第... 查看详情
使用 Jest 和 vue-utils 测试 Vue 组件
】使用Jest和vue-utils测试Vue组件【英文标题】：TestVuecomponentsusingJestandvue-utils【发布时间】：2019-04-1920:52:09【问题描述】：我正在尝试使用jest和vue-utils测试在vue中调用的组件，但它给出了以下错误expect(jest.fn()).toHaveBeenCalled()Expected... 查看详情
ReactWrapper::state() 只能在类组件单元测试 Jest 和 Enzyme 上调用
】ReactWrapper::state()只能在类组件单元测试Jest和Enzyme上调用【英文标题】：ReactWrapper::state()canonlybecalledonclasscomponentsUnitTestingJestandEnzyme【发布时间】：2020-02-1405:00:24【问题描述】：使用jest和酶编写反应单元测试。在检查组件状态... 查看详情
使用 Jest 和 Typescript 对 VueJ 进行单元测试 - 未安装组件
】使用Jest和Typescript对VueJ进行单元测试-未安装组件【英文标题】：UnittestingVueJswithJestandTypescript-componentsnotmounted【发布时间】：2020-09-0517:44:38【问题描述】：我们正在使用VueJs构建一个应用程序。我们之前有使用Jasmine和karma进行An... 查看详情
模拟安装挂钩 Jest 测试单元
】模拟安装挂钩Jest测试单元【英文标题】：MockmountedhookJesttestingunit【发布时间】：2019-09-0820:12:27【问题描述】：我正在对组件进行一些单元测试。但是，在某些组件中，我在mounted钩子上运行了一些东西，这导致我的测试失败。... 查看详情
单元测试 Vue 组件 - 玩笑设置 - 意外的标识符错误
】单元测试Vue组件-玩笑设置-意外的标识符错误【英文标题】：UnitTestingVueComponent-JestSetup-UnexpectedIdentifiererror【发布时间】：2019-03-1908:10:56【问题描述】：我是Jest的新手，我正在尝试运行一个简单的单元测试，以确保一切都正确... 查看详情
Vue Test Utils / Jest - 如何测试是不是在组件方法中调用了类方法
...类方法【发布时间】：2019-01-2500:42:50【问题描述】：我的单元测试有一个有趣的问题。我的单元测试是为了单击组件内的按钮而编写的 查看详情
使用 lodash 和 Jest 测试 Vue 组件时出现“orderBy”未定义错误
】使用lodash和Jest测试Vue组件时出现“orderBy”未定义错误【英文标题】：Getting\'orderBy\'undefinederrorwhentestingVuecomponentusinglodashwithJest【发布时间】：2018-11-0416:24:51【问题描述】：有一个Vue应用程序已将lodash导入main.js，例如：importloda... 查看详情
如何在单元测试期间使用 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... 查看详情
vue-cli项目集成jest单元测试(代码片段)
前言前端单元测试对于保证代码质量和稳定性是非常重要的。为什么需要单元测试：检测bug;提升回归效率；保证代码质量。 一、框架对比①、Mocha比较灵活成熟，但没有内部集成，需要自主选择断言库和监听库... 查看详情
Jest 甚至无法为导入异步功能的组件运行测试套件
...一个项目从angularjs移至Vue。移动它后，我试图用玩笑添加单元测试。我已经对一些较小的组件和服务进行了测试，它们按预期工作，没有任何问题。我现在正在尝试将测试添加到一 查看详情
Vue/Typescript/Jest - Jest 单元测试语法错误：意外的令牌导入
】Vue/Typescript/Jest-Jest单元测试语法错误：意外的令牌导入【英文标题】：Vue/Typescript/Jest-JestUnitTestSyntaxError:Unexpectedtokenimport【发布时间】：2019-03-2718:14:59【问题描述】：我正在运行一个Vue/Typescript/Vuetify项目（使用vuecli3创建）。... 查看详情
Jest/Enzyme 单元测试：如何将存储传递给使用 redux 4 和 react-redux 6 连接功能的浅层组件
】Jest/Enzyme单元测试：如何将存储传递给使用redux4和react-redux6连接功能的浅层组件【英文标题】：Jest/EnzymeUnitTesting:Howtopassstoretoshallowcomponentthatusesredux4andreact-redux6connectfunction【发布时间】：2019-06-0119:53:42【问题描述】：我像往常... 查看详情
用 jest 和酵素测试 React 组件
...2020-08-1217:18:59【问题描述】：我有下面介绍的组件。我是单元测试的新手。任何人都可以给任何人建议我应该如何以及在这个组件中测试什么？我试图浅渲染它，检查h2中的文本是否存在，但我仍然收到错误。importReact,useEffectfrom... 查看详情
Vue Typescript 组件 Jest 测试不会在 html 中呈现值
】VueTypescript组件Jest测试不会在html中呈现值【英文标题】：VueTypescriptComponentJestTestingdoesn\'trendervaluesinhtml【发布时间】：2021-02-0217:48:15【问题描述】：我正在尝试使用Typescript专注于TDD，因此我使用vue-cli构建了一个新的Vue项目（... 查看详情