Bonjour

Je souhaite pouvoir ajouter des tests unitaires à mes composants vue.

Mon projet est sous symfony (5.4), et j'utilise webpack pour la partie chargement de vue.

J'ai essayé de suivre les tutos pour la mise en place des tests unitaire en installant les modules jest et compagnie... mais quand je lance un test simple j'obtiens systématiquement une erreur:

gepadbal git:(tristan) ✗ npm run test

> test
> jest

FAIL assets/vue/tests/pied.spec.js
● Test suite failed to run

/var/www/gepadbal/assets/vue/tests/pied.spec.js:2
import pied from '../components/pied';
^^^^

SyntaxError: Unexpected identifier

at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.802 s
Ran all test suites.
voici mon webpac.config:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
const Encore = require('@symfony/webpack-encore');
 
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
 
Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')
 
    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/app.js')
 
    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')
 
    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()
 
    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()
 
    .enableVueLoader()
 
    .autoProvidejQuery()
    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
 
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
 
    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
 
    // enables Sass/SCSS support
    //.enableSassLoader()
 
    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()
 
    // uncomment if you use React
    //.enableReactPreset()
 
    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())
 
    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;
 
module.exports = Encore.getWebpackConfig();
voici mon package.json:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
    "devDependencies": {
        "@babel/core": "^7.13.15",
        "@babel/preset-env": "^7.13.15",
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/webpack-encore": "^1.0.0",
        "@vue/test-utils": "^1.1.4",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^26.6.3",
        "core-js": "^3.0.0",
        "jest": "^26.6.3",
        "regenerator-runtime": "^0.13.2",
        "stimulus": "^2.0.0",
        "vue-jest": "^3.0.7",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress",
        "test": "jest"
    },
    "dependencies": {
        "@trevoreyre/autocomplete-vue": "^2.2.0",
        "axios": "^0.21.1",
        "easy-circular-progress": "^1.0.4",
        "es6-promise": "^4.2.8",
        "is-url": "^1.2.4",
        "jquery": "^3.6.0",
        "jquery-ui": "^1.12.1",
        "popper.js": "^1.16.1",
        "vue": "^2.6.12",
        "vue-js-toggle-button": "^1.3.3",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12",
        "vue-toasted": "^1.1.28",
        "vuex": "^3.6.2"
    },
    "jest": {
        "moduleFileExtensions": [
            "js",
            "json",
            "vue"
        ],
        "transform": {
            ".*\\.(vue)$": "vue-jest",
            ".*\\.(js)$": "<rootDir>/node_modules/babel-jest"
        },
        "transformIgnorePatterns": ["node_modules/(?!(@babel)/)"]
    }
}
voici mon test très simple:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//import { shallowMount } from '@vue/test-utils'
import pied from '../components/pied'
 
 
describe('pied.vue Test', () => {
    /*it('renders message when component is created', () => {
        // render the component
        const wrapper = shallowMount(pied, {
            propsData: {
                title: 'Vue Project'
            }
        })
 
        // check the name of the component
        expect(wrapper.name()).toMatch('pied')
 
        // check that the title is rendered
        expect(wrapper.text()).toMatch('Vue Project')
    })*/
})
j'ai essayé de changer le transform:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
"transform": {
    ".*\\.(vue)$": "vue-jest",
    ".*\\.(js)$": "babel-jest"
},
j'ai toujours des erreurs lié à l'import ou autre je tourne en rond...

Merci d'avance pour toute aide