I create project through vue cli with options: vue3, TS, JEST and add @testing-library/vue . my package.json looks like this
{
"name": "todo-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@testing-library/vue": "^5.8.2",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0"
}
}
my jest.config.js is the one I am getting from vue CLI
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript',
transform: {
'^.+\\.vue$': 'vue-jest'
}
}
my test is
import { fireEvent, render, waitFor } from '@testing-library/vue';
import ContentBlock from '@/components/ContentBlock.vue';
describe('ContentBlock.spec.vue', () => {
const mockedProps = {
title: 'testTitle',
content: 'testTitle',
btn: 'testBtnText'
}
const getMountedInstance = () => {
return render(ContentBlock, {
props: mockedProps
});
};
it('renders block title, content and button', async (): Promise<void> => {
const { getByTestId } = getMountedInstance();
const [title, content, btn] = await waitFor(() => {
return [
getByTestId('blockTitle'),
getByTestId('blockContent'),
getByTestId('blockBtn'),
];
});
expect(title).toBeDefined();
expect(title).toContain(mockedProps.title);
expect(content).toBeDefined();
expect(content).toContain(mockedProps.content);
expect(btn).toBeDefined();
expect(content).toContain(mockedProps.btn);
});
})
tried node versions: 14, 12 I am getting error:
Test suite failed to run
Cannot find module 'vue-template-compiler' from 'vue-test-utils.js'
However, Jest was able to find:
'./render.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'jsx', 'json', 'vue', 'ts', 'tsx'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
I checked similar questions such as Test suite failed to run Cannot find module 'vue-template-compiler when using jest in vue3 but it did not help me.
