Jest tests not working after moving to TypeScript

Question

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 combination 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

Since there are no compiler 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
– Estus Flask, Commented Jan 24, 2020 at 9:26
@Aer, I am facing the same issue. Did you come across any solution for this issue? — Amit
– Amit, Commented Aug 6, 2022 at 10:23

winwiz1 · Accepted Answer · 2020-01-24 08:50:36Z

3

Add

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

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

answered Jan 24, 2020 at 8:50

winwiz1

3,18414 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aer0 Over a year ago

Doesn't do anything. Still the same result.

Drew Delano · Accepted Answer · 2022-04-01 22:03:29Z

2

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 comment on @winwiz1's answer, but StackOverflow mangles the format.

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

answered Apr 1, 2022 at 22:03

Drew Delano

1,50917 silver badges21 bronze badges

Comments

hexangel616 · Accepted Answer · 2020-01-24 08:18:07Z

1

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

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

edited Jan 24, 2020 at 8:18

answered Jan 24, 2020 at 8:15

hexangel616

3564 silver badges20 bronze badges

1 Comment

Aer0 Over a year ago

Yes, they are included. However, I don't get any type errors. The test just fails. I've updated my question accordingly.

Collectives™ on Stack Overflow

Jest tests not working after moving to TypeScript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related