After transitioning my project from vanilla JavaScript to TypeScript, I encountered a strange issue with some test cases breaking. Despite everything running smoothly before the switch, certain tests using Vue.js, vue-test-utils, and jest are now failing.
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',
],
};
One specific example of a failing test that previously worked perfectly fine is as follows:
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');
});
});
However, when running this particular test case, the outcome is unexpected:
expect(received).toBe(expected) // Object.is equality
Expected: "Home"
Received: null
Moreover, updating dependencies (including Jest dependencies) resulted in even more test failures. This leads me to believe that the introduction of TypeScript may have caused compatibility issues with certain dependencies, but pinpointing the exact combination causing problems remains elusive.
Some of the key dependencies that were updated and subsequently caused additional test failures include:
- jest
- ts-jest
- babel-jest