How to set up jest and vue test utils with framework 7 vue project?

1

I have built a Framework 7 app with vue and I really want to write some test using jest. Although I have setup vue test utils and jest importing components will not work. I get an error similar to:

import _regeneratorRuntime from "@babel/runtime/regenerator";
       ^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  1 |
  2 |
> 3 | import App from '../components/app';

If I remove this import and use for example:
import {createLocalVue, createWrapper, mount} from ‘@vue/test-utils’

It will be ok, but I need to test components. Does anyone know why I cannot import components? Or Have some useful resources on setting this up with framework 7 / jest etc?

Thanks.

2

You need to configure Jest to transpile/transform framework7 related node_modules, by default it doesn’t do it. You need to add something like this to your jest (jest project) config:

const esModules = ['framework7', 'framework7-vue', 'template7', 'dom7', 'ssr-window'].join('|')

module.exports = {
  // ...
  transformIgnorePatterns: [`<rootDir>/node_modules/(?!(${esModules})/)`],
};
3

Thank you for your reply, that will surely come in useful. I have added but still not working. I have even stripped all framework 7 components out of a test vue component and even that fails. it seems like jest cannot work with the vue component at all. If i put the most basic vue component such as below it stills fails when I try to import in a test with:

 export default {
    ^^^^^^

    SyntaxError: Unexpected token export

My test component:

<template>
    <div>Test Component</div>
</template>

<script>
    export default {
        name: "jtest"
    }
</script>

Jest config in package.json file:

    "jest": {
        "moduleFileExtensions": [
            "js",
            "json",
            "vue"
        ],
        "transform": {
            "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
            ".*\\.(vue)$": "vue-jest"
        }
    },
4

Seems like you forgot also to configure babel for tests, it needs to convert ES modules to node modules when running under Jest. My babel.config.js looks like:

const isTest = String(process.env.NODE_ENV) === 'test';
const presetEnv = isTest
  ? ['@babel/preset-env', { modules: 'commonjs', targets: { node: 'current' } }]
  : ['@babel/preset-env', { modules: false }];

module.exports = {
  presets: [presetEnv, '@babel/preset-typescript'],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
  ],
};
5

@nolimits4web thank you so much. This has helped me adjust things to make it work. Really appreciate the help and this great framework :slight_smile:

1 Like