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

Posted 2023-02-22

【中文标题】如何使用 Jest 对 quasar 应用程序进行单元测试？

【英文标题】：How do I unit test a quasar app using Jest?

【发布时间】：2019-03-17 23:09:30

【问题描述】：

我有一个使用quasar-cli 生成的类星体应用程序。

对于这样的应用程序，如何将单元测试集成到像 Jest 这样的测试运行程序中？

我已将 this 添加到我的 Jest 配置中

"moduleNameMapper": 
    "quasar": "<rootDir>/node_modules/quasar-framework"

很遗憾，Jest 回来报告

Cannot find module 'quasar' from 'index.vue'

这是Vue文件的sn-p

<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>

【问题讨论】：

能分享一下 index.vue 的内容吗？

当然，我可以分享一些，因为代码是适当的。我将编辑原始问题@boussadjrabrahim

【参考方案1】：

将 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__的文件夹

在__unit__ 文件夹中放置一个名为MyUnitTest.test.js 的文件。现在 Jest 从这个文件夹中提取文件。

最后一步是运行测试，只需将其添加到 package.json

"unit": "yarn run jest --config jest.config.js"

轰隆隆！ -- 现在你可以运行yarn run unit 或yarn 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)
  )

)

希望你觉得这很有用