Test with Jest in a VueJS2 project with Typescript

user_640053 0
Viewed 1431

I have a VueJS 2 project set up and I am trying to setup up TypeScript in it. I'm struggling to set up my jests tests.

My ts component:

<template>
    <div>some template<div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    
});
</script>

It is working fine to serve/build. But my spec file (dummy one, a component.spec.ts):

import { shallowMount} from '@vue/test-utils';
//@ts-ignore
import Form from "@/MyComponent";

describe("Solicitacao Form component", () => {

    let wrapper: any;
  
    beforeEach(() => {
        wrapper = shallowMount(Form, {
        });
    })
    test('Component created', () => {
        expect(wrapper).toBeDefined();
    })

})

It always throw

Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

My jest.config.js file

module.exports = {
    preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
    //testEnvironment: 'node',
    setupFiles: ["<rootDir>/tests/unit/index.js"],
    moduleFileExtensions: ["js", "ts", "vue", "json"],
    transform: {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.ts?$": "ts-jest",
        "^.+\\.js$": "babel-jest"
    },
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1"
    },
    testMatch: [
        "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)"
    ]

}

Any idea of how to set up the jest?

vuejs2 vue.js jestjs typescript
1 Answers

I use jest/vue/ts like this, I hope it's be helpful ;)

jest.config.js

module.exports = {
  verbose: true,
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{ts,js,vue}'
  ],
  coveragePathIgnorePatterns: [
    '!src/main.ts',
    '!src/router.ts',
    '!src/plugins/*',
    '!src/types/*',
    '!src/model/*',
    '!*.d.ts',
  ],
  coverageReporters: ['html', 'text', 'lcov'],
  rootDir: '../..',
  moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  setupFilesAfterEnv: ['./tests/unit/tools'],
}

test example of simple component :

import { shallowMount } from '..';
import Maintenance from '@/components/Maintenance.vue';

describe('Maintenance.vue', () => {
  describe('getPositionStyle', () => {
    it('should be empty', () => {
      const componant = shallowMount(Maintenance).vm
      expect(componant.getPositionStyle()).toEqual('')
    })
  })
})

shallowMount file (index.ts)

import { shallowMount as shallowMountTestUtil, createLocalVue, ThisTypedShallowMountOptions } from '@vue/test-utils';
import { setupI18n } from './stub-i18n';
import { VueConstructor } from 'vue/types/umd';
import Vue from 'vue';

const localVue = createLocalVue();
const i18n = setupI18n(localVue);

export function shallowMount(component: VueConstructor, options: ThisTypedShallowMountOptions<Vue> = {}, mocks?: any, customLocalVue?: typeof Vue) {
  return shallowMountTestUtil(component, {
    localVue: (customLocalVue || localVue),
    i18n,
    ...options,
    mocks
  })
}
user_72432510
Related