unit-testing - 如何使用 Jest 对 quasar 应用程序进行单元测试?
问题描述
我有一个使用quasar-cli
.
如何将单元测试集成到像这样Jest
的应用程序的测试运行器中?
我在我的Jest
配置中添加了这个
"moduleNameMapper": {
"quasar": "<rootDir>/node_modules/quasar-framework"
}
不幸的是,Jest
报告回来
Cannot find module 'quasar' from 'index.vue'
这是Vue文件的片段
<template>
<div style="padding-top: 20px" v-if="refund.type != null ">
<q-btn :label="'Issue ' + ( currency(refund.amount)) + ' Refund'" :disable="refund.amount <= 0" @click="issueRefund()" color="green" class="full-width" :loading="noteLoading" />
</div>
</template>
<script>
import { Notify } from "quasar"; // here is where I am using Quasar
issueRefund() {
this.noteLoading = true;
this.$axios
.post(`${BASE_URL}/issue_refund/?secret=${this.secret}`, {
refund: this.refund,
agent_email: this.userEmail,
order_id: this.selectedOrder.id,
agent_name: this.$route.query.user_name,
order_number: this.selectedOrder.order_number,
ticket_id: this.ticketId
})
.then(res => {
this.noteLoading = false;
if ((res.data.res === "success")) {
Notify.create({
position: "bottom",
type: "positive",
message: "Refund Issued."
});
this.selectedOrder = res.data.order;
this.resetRefundObj();
this.$refs.refundDiag.hide();
} else {
Notify.create({
position: "bottom",
type: "negative",
message: res.data.error
});
}
});
},
</script>
解决方案
将 Jest 与 Quasar 集成非常简单。你需要两个包,babel-jest
和jest
.
yarn add jest babel-jest -D
添加这两个依赖项后,jest.config.js
在项目的根目录下创建一个文件——这里是所有 jest 配置所在的位置。
这是 jest.config.js 文件的样子;
module.exports = {
globals: {
__DEV__: true,
},
verbose: false, // false since we want to see console.logs inside tests
bail: false,
testURL: 'http://localhost/',
testEnvironment: 'jsdom',
testRegex: './__unit__/.*.js$',
rootDir: '.',
testPathIgnorePatterns: [
'<rootDir>/components/coverage/',
'<rootDir>/test/cypress/',
'<rootDir>/test/coverage/',
'<rootDir>/dist/',
'<rootDir>/node_modules/',
],
moduleFileExtensions: ['js', 'json', 'vue'],
moduleNameMapper: {
'^vue$': 'vue/dist/vue.common.js',
'quasar': 'quasar-framework/dist/umd/quasar.mat.umd.js',
},
resolver: null,
transformIgnorePatterns: [
'node_modules/core-js',
'node_modules/babel-runtime',
'node_modules/vue',
],
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
}
}
然后在项目的根目录中创建一个文件夹,名为__unit__
MyUnitTest.test.js
在文件夹内放置一个名为的__unit__
文件。现在 Jest 从这个文件夹中提取文件。
最后一步是运行测试,只需将其添加到package.json
"unit": "yarn run jest --config jest.config.js"
繁荣!-- 现在你可以运行yarn run unit
oryarn run unit --watch
并且它应该可以工作。
这是 Quasar 组件和 Jest 测试的示例。
import { createLocalVue, shallowMount } from '@vue/test-utils'
import Vuex from 'vuex'
import Quasar, * as All from 'quasar'
import CookieConsent from '@components/common/CookieConsent.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Quasar, { components: All, directives: All, plugins: All })
describe('CookieConsent.vue', () => {
const wrapper = shallowMount(CookieConsent, {
localVue,
mocks: {
$t: () => {},
},
})
test('CookieConsent.vue mock should exist', () => {
expect(wrapper.exists()).toBe(true)
})
})
希望你觉得这很有用
推荐阅读
- angular - 与 PrimeNg p-grid & bootstrap 填充使用冲突
- javascript - 网络中的lottiefiles动画性能问题
- github - 致命:无法运行 C:/Windows/System32/OpenSSH/ssh.exe:没有这样的文件或目录
- lightweight-charts - 曲线图
- javascript - TypeError:a.map 不是函数
- c - 只允许八进制数
- nearprotocol - 我可以将合约部署到测试环境中的可读地址吗?
- python - 多处理 apply_async 奇数参数传递
- javascript - 是否有任何解决方案可以防止反应应用程序中弹出警报中的额外行?
- android - 无法在 Google Play 商店中为 API 访问链接“Google Cloud 项目”