RobertOs's avatar

Laravel and test with JEST

Hi. I have a little problem with jest and laravel. Maybe you will be able guide me somehow.

I want use jest test in laravel. I found guide how to do it: https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-jest.html but on start this throw me a error:

Jest encountered an unexpected token: ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import Vue from 'vue'; and this pointing on "import", SyntaxError: Unexpected token import

I think that jest don`t include webpack.config.js from node_modules. Is there way to force jest to load this settings ? Sctipt are compiling correct and all work fine in browser, only test crash. Could you give me some tip how make this work?

0 likes
2 replies
mberneis's avatar

I got jest working but it took a couple of days of effort -

@jeff, maybe a refresh of Vue Testing course using jest instead of mocca?

Here all the files to make it work in my project:

.babelrc

{
    "env": {
        "test": {
            "presets": [
                ["env", {
                    "targets": {
                        "node": "current"
                    }
                }]
            ]
        }
    }
}

.jest.config.js

module.exports = {
    testRegex: 'tests/JavaScript/.*.spec.js$',
    moduleFileExtensions: [
        'js',
        'json',
        'vue'
    ],
    'transform': {
        '^.+\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\.(vue)$': '<rootDir>/node_modules/vue-jest'
    }
}

My devDependencies in package.json:

    "devDependencies": {
        "@vue/test-utils": "^1.0.0-beta.29",
        "axios": "^0.19",
        "babel-core": "^6.26.3",
        "babel-jest": "^24.8.0",
        "babel-preset-env": "^1.7.0",
        "bootstrap": "^4.3",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "2.2.2",
        "cross-env": "^5.2",
        "eslint": "^5.9",
        "eslint-plugin-vue": "^5.2",
        "jest": "^24.8.0",
        "jest-serializer-vue": "^2.0.2",
        "jquery": "^3.4",
        "js-yaml": "^3.13.1",
        "laravel-mix": "^4.1.2",
        "lodash": "^4.17.13",
        "popper.js": "^1.15",
        "resolve-url-loader": "^3.1",
        "vue": "^2.6.10",
        "vue-jest": "^3.0.4",
        "vue-template-compiler": "^2.6.10",
        "webpack-cli": "^3.3"
    },

I had to struggle a lot with babel to get my templates translated correctly... - I am sure there is a cleaner way to get it to run but this finally works for me.

6 likes

Please or to participate in this conversation.