Как получить доступ к методам Vuejs для тестирования с помощью Jest?

Question

У меня есть следующий файл: deposit-form.js.

Со следующим кодом:

new Vue({
    el: '#app',
    data: {
        title: 'title',
        depositForm: {
            chosenMethod: 'online',
            payMethods: [
                { text: 'Already paid via Venmo', value: 'venmo' },
                { text: 'Pay online', value: 'online' },
                { text: 'In-person payment', value: 'person' }
            ],         
        },
    },
    methods: {
        submitDeposit: function() {
            $.ajax({
                url: 'http://localhost:8000/api/v1/deposit/',
                type:'post',
                data: $('#deposit-form').serialize(),
                success: function() {
                    $('#content').fadeOut('slow', function() {
                        // Animation complete.
                        $('#msg-success').addClass('d-block');
                    });
                },
                error: function(e) {
                    console.log(e.responseText);
                },
           });
        },
        showFileName: function(event) {
            var fileData =  event.target.files[0];
            var fileName = fileData.name;
            $('#file-name').text('selected file: ' + fileName);
        },
    },
});

У меня проблемы с настройкой Jest, как импортировать функции VueJsвнутри «методов» для выполнения тестов с помощью Jest.

Каким должен быть мой код на deposit-form.test.js?

Answer 1

Первое, что вам нужно сделать, это экспортировать экземпляр приложения Vue.

// deposit-form.js

import Vue from 'vue/dist/vue.common';

export default new Vue({
    el: '#app',
    data: {...},
    ...
});

Теперь вы можете использовать этот код в вашем файле спецификации.Но теперь вам нужно иметь элемент #app перед запуском тестов.Это можно сделать с помощью установочного файла jest.Я объясню, зачем это нужно.Когда вы импортируете ваш основной файл (deposit-form.js) в тест, в вашем главном файле создается экземпляр Vue с new.Vue пытается смонтировать приложение в элемент #app.Но этот элемент не в вашей DOM.Вот почему вам нужно добавить этот элемент непосредственно перед запуском тестов.

В этом файле вы также можете импортировать jQuery глобально, чтобы использовать его в своих тестах без импорта отдельно.

// jest-env.js

import $ from 'jquery';

global.$ = $;
global.jQuery = $;

const mainAppElement = document.createElement('div');
mainAppElement.id = 'app';
document.body.appendChild(mainAppElement);

JestФайл настройки должен быть указан в разделе конфигурации jest в package.json.

// package.json

{
    ...,
    "dependencies": {
        "jquery": "^3.3.1",
        "vue": "^2.6.7"
    },
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-transform-modules-commonjs": "^7.2.0",
        "@babel/preset-env": "^7.3.4",
        "@vue/test-utils": "^1.0.0-beta.29",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^24.1.0",
        "babel-loader": "^8.0.5",
        "babel-preset-vue": "^2.0.2",
        "jest": "^24.1.0",
        "vue-jest": "^3.0.3",
        "vue-template-compiler": "^2.6.7",
        "webpack": "^4.29.5",
        "webpack-cli": "^3.2.3"
    },
    "scripts": {
        "test": "./node_modules/.bin/jest --passWithNoTests",
        "dev": "webpack --mode development --module-bind js=babel-loader",
        "build": "webpack --mode production --module-bind js=babel-loader"
    },
    "jest": {
        "moduleFileExtensions": [
            "js",
            "json",
            "vue"
        ],
        "transform": {
            "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
            ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
        },
        "setupFiles": [
            "<rootDir>/jest-env.js"
        ]
    }
}

Кроме того, вам, вероятно, необходимо настроить Babel для использования функций ES6 в ваших проектах и ​​тестах.В этом нет необходимости, если вы придерживаетесь стиля commonjs в своем коде.Базовый .babelrc файл содержит следующий код:

// .babelrc

{
    "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry",
            "targets": {
              "browsers": [
                "last 2 versions"
              ]
            }
          }
        ],
        "vue",
    ],
    "plugins": [
        "@babel/plugin-transform-modules-commonjs",
    ]
}

Теперь вы можете писать свои тесты.

// deposit-form.test.js

import App from './deposit-form';

describe('Vue test sample.', () => {
    afterEach(() => {
        const mainElement = document.getElementById('app');

        if (mainElement) {
            mainElement.innerHTML = '';
        }
    });

    it('Should mount to DOM.', () => {
        // Next line is bad practice =)
        expect(App._isMounted).toBeTruthy();

        // You have access to your methods
        App.submitDeposit();
    });
});

Моя рекомендация - изучить Vue Test Utils Guides иначать делить ваш код на компоненты.При нынешнем подходе вы теряете всю мощь компонентов и возможность тестировать vue-приложения.

---

Я немного обновил свой ответ.Как я понял из комментария к ответу, библиотеки на странице подключаются отдельными файлами.Здесь моя ошибка.Я не спрашивал, используется ли система сборки.Код в моих примерах написан в стандарте ECMA-2015.Но, к сожалению, браузеры не полностью поддерживают его.Вам нужен транспортер, который преобразует наши файлы в формат, понятный для браузеров.Это звучит сложно.Но это не проблема.Я обновил содержимое файла package.json в ответ.Теперь осталось только создать входной файл для сборки и запустить саму сборку.

Входной файл прост.

// index.js

import './deposit-form';

Сборка начинается с следующих команд из терминала.

# for development mode
$ yarn run dev
# or
$ npm run dev

# for production mode
$ yarn run build
# or
$ npm run build

Выходной файл будет помещен в каталог ./dist/.Теперь вместо отдельных файлов вам нужно подключить только один.Он содержит все необходимое для библиотеки и ваш код.

Я использовал веб-пакет для сборки.Более подробную информацию об этом можно найти в документации .Хороший пример вы можете найти в этой статье .