Recently I've moved a project from plain old JavaScript to TypeScript. Previously every test was running fine. Right after the change some test cases just broke and I can not understand why. I'm using Vue.js alongside vue-test-utils and jest.

jest.config.js

module.exports = {
    collectCoverageFrom: [
        '/src/**/*.{js,jsx,vue}',
        '!**/node_modules/**',
        '!**/vendor/**',
    ],
    moduleFileExtensions: [
        'ts',
        'js',
        'json',
        'vue',
    ],
    transform: {
        '.*\\.(vue)$': 'vue-jest',
        '^.+\\.js$': 'babel-jest',
        '^.+\\.ts$': 'ts-jest',
    },
    transformIgnorePatterns: [
        '<rootDir>/node_modules/(?!vuex-class-modules).+\\.js$',
    ],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    setupFilesAfterEnv: [
        '@testing-library/jest-dom/extend-expect',
    ],
};

A snippet of an example test that's failing right now, which has been working fine previously.

some.test.js

function mountStore(loggedInState) {
    const store = new Vuex.Store({
        modules: {
            customer: {
                namespaced: true,
                state: {
                    isLoggedIn: loggedInState,
                },
                actions,
            },
        },
    });

    return shallowMount(Component, {
        localVue,
        store,
        router,
        stubs: { 'router-link': RouterLinkStub },
    });
}

describe('Test with customer logged in at beginning', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mountStore(true);
    });

    it('should redirect to home if user is logged in on init', () => {
        expect(wrapper.vm.$route.name).toBe('Home');
    });
});

Regarding this specific test case, the result is as following.

expect(received).toBe(expected) // Object.is equality

Expected: "Home"
Received: null

I also noticed upgrading all dependencies (including some Jest dependencies) leads to even more failing tests. So I expect that to (probably) be the reason, since I just added TypeScript support later on. However, I don't know what dependency bination would lead to a faulty behavior.

Relevant dependencies I've updated, which eventually would lead to even more failing tests.

• jest
• ts-jest
• babel-jest

Recently I've moved a project from plain old JavaScript to TypeScript. Previously every test was running fine. Right after the change some test cases just broke and I can not understand why. I'm using Vue.js alongside vue-test-utils and jest.

jest.config.js

module.exports = {
    collectCoverageFrom: [
        '/src/**/*.{js,jsx,vue}',
        '!**/node_modules/**',
        '!**/vendor/**',
    ],
    moduleFileExtensions: [
        'ts',
        'js',
        'json',
        'vue',
    ],
    transform: {
        '.*\\.(vue)$': 'vue-jest',
        '^.+\\.js$': 'babel-jest',
        '^.+\\.ts$': 'ts-jest',
    },
    transformIgnorePatterns: [
        '<rootDir>/node_modules/(?!vuex-class-modules).+\\.js$',
    ],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    setupFilesAfterEnv: [
        '@testing-library/jest-dom/extend-expect',
    ],
};

A snippet of an example test that's failing right now, which has been working fine previously.

some.test.js

function mountStore(loggedInState) {
    const store = new Vuex.Store({
        modules: {
            customer: {
                namespaced: true,
                state: {
                    isLoggedIn: loggedInState,
                },
                actions,
            },
        },
    });

    return shallowMount(Component, {
        localVue,
        store,
        router,
        stubs: { 'router-link': RouterLinkStub },
    });
}

describe('Test with customer logged in at beginning', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mountStore(true);
    });

    it('should redirect to home if user is logged in on init', () => {
        expect(wrapper.vm.$route.name).toBe('Home');
    });
});

Regarding this specific test case, the result is as following.

expect(received).toBe(expected) // Object.is equality

Expected: "Home"
Received: null

I also noticed upgrading all dependencies (including some Jest dependencies) leads to even more failing tests. So I expect that to (probably) be the reason, since I just added TypeScript support later on. However, I don't know what dependency bination would lead to a faulty behavior.

Relevant dependencies I've updated, which eventually would lead to even more failing tests.

• jest
• ts-jest
• babel-jest

• javascript
• typescript
• vue.js
• jestjs
• vue-test-utils

• Since there are no piler errors, I don't think that TS itself has to be blamed. Better focus on changes that were made when you "moved a project from plain old JavaScript to TypeScript". "So I expect that to (probably) be the reason, since I just added TypeScript support later on" - then that's it, downgrade them first. – Estus Flask Commented Jan 24, 2020 at 9:26
• @Aer, I am facing the same issue. Did you e across any solution for this issue? – Amit Commented Aug 6, 2022 at 10:23

3 Answers 3

Add

preset: 'ts-jest/presets/js-with-babel',

to jest.config.js since you use ts-jest with babel-jest. Source.

I was having a similar issue. @winwiz1's answer worked for me, but I needed to put it inside the project definition as I'm using the projects syntax. I would just leave this as a ment on @winwiz1's answer, but StackOverflow mangles the format.

projects: [
    {
      "displayName": "test-unit",
      "preset": "ts-jest",
      "testMatch": ["<rootDir>/test-unit/**/*\\.tests\\.[t|j]s"]
    }
  ],

Did you try adding @types/jest? And adding it in your tsconfig.json:

"types": ["@types/node", "@nuxt/types", "@types/jest", "nuxt-i18n"]