vendredi 20 novembre 2020

Modules not found when setting up testing environment for VueJS laravel-mix

I'm trying to set up an environment for testing my vueJs/bootstrap-vue component but for some reasons webpack fails to compile, this is the error I get (I'm using Laravel as the backend and Laravel mix).

The view component loads bootstrap vue components as well.

enter image description here

My Index.spec.js:

import { createLocalVue, mount } from '@vue/test-utils';
import expect from 'expect';
import BootstrapVue from 'bootstrap-vue';
import Index from "../../../resources/js/subviews/permissions/Index.vue";

const localVue = createLocalVue();

localVue.use(BootstrapVue);

describe ('MyComponent', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(Index, {
            localVue
        });
    });

    it ('opens a modal', () => {
        expect(wrapper.contains('#modal-1')).toBe(false);

        wrapper.find('#btnShow').trigger('click');

        expect(wrapper.contains('#modal-1')).toBe(true);
    });
});

My package.json file:

{
    "private": true,
    "scripts": {
        "test": "mochapack — webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch — require tests/Frontend/setup.js tests/Frontend/permissions/Index.spec.js"
    },
    "devDependencies": {
        "@vue/test-utils": "^1.1.1",
        "axios": "^0.19",
        "bootstrap": "^4.3.1",
        "browser-sync": "^2.26.13",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.2.1",
        "css-loader": "^3.6.0",
        "deepmerge": "^4.2.2",
        "expect": "^26.6.2",
        "fibers": "^4.0.2",
        "jquery": "^3.2",
        "jsdom": "^16.4.0",
        "jsdom-global": "^3.0.2",
        "json-loader": "^0.5.7",
        "laravel-mix": "^5.0.9",
        "lodash": "^4.17.13",
        "mocha": "^8.2.1",
        "mochapack": "^2.0.6",
        "popper.js": "^1.16",
        "preload-webpack-plugin": "^3.0.0-beta.4",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.1.3",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "vue": "^2.6",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.44.2",
        "yargs": "^15.3.1"
    },
    "dependencies": {
        "@mdi/js": "^5.3.45",
        "@sentry/browser": "^5.25.0",
        "@sentry/integrations": "^5.25.0",
        "@sentry/tracing": "^5.25.0",
        "bootstrap-vue": "^2.19.0",
        "chart.js": "^2.9.3",
        "child_process": "^1.0.2",
        "dotenv": "^8.2.0",
        "dotenv-webpack": "^1.7.0",
        "fs": "0.0.1-security",
        "google-libphonenumber": "^3.2.14",
        "graceful-fs": "^4.2.4",
        "intl-tel-input": "^16.0.11",
        "jest-message-util": "^26.6.2",
        "jquery-timepicker": "^1.3.3",
        "mailgun": "^0.5.0",
        "mix-env-file": "^0.1.0",
        "moment": "^2.29.1",
        "net": "^1.0.2",
        "paginationjs": "^2.1.5",
        "stack-utils": "^2.0.3",
        "tls": "0.0.1",
        "v-calendar": "^1.0.1",
        "vue-moment": "^4.1.0",
        "vue-mq": "^1.0.1",
        "vue-multiselect": "^2.1.6",
        "vue-router": "^3.3.4",
        "vue-select": "^3.9.1",
        "vue-static-map": "^3.0.2",
        "vue-sweetalert2": "^3.0.3",
        "vue-tel-input": "^4.3.0",
        "vue2-datepicker": "^3.4.1",
        "vue2-daterange-picker": "^0.4.6",
        "vue2-google-maps": "^0.10.7",
        "vuedraggable": "^2.23.2",
        "vuejs-datepicker": "^1.6.2",
        "vuetify": "^2.2.15",
        "vuex": "^3.5.1",
        "webpack-cli": "^3.3.11"
    }
}

Thanks for your help !

Aucun commentaire:

Enregistrer un commentaire