Как мне протестировать квазар-приложение с помощью Jest? - PullRequest
Новая
       18

Как мне протестировать квазар-приложение с помощью Jest?

0 голосов
/ 12 октября 2018

У меня есть приложение квазар, сгенерированное с помощью 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>

1 Ответ

0 голосов
/ 25 декабря 2018

Интеграция 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"

Boom!- Теперь вы можете запустить 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)
  })

})

Надеюсь, вы нашли это полезным

...