0

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.

1
  • I think @testing-library/vue is not compatible with Vue 3 yet. Is it not better to use directly vue-test-utils instead ? Commented Aug 7, 2021 at 9:02

1 Answer 1

1

ah, I managed to find an answer in https://github.com/testing-library/vue-testing-library/issues/176

install this version of library @testing-library/vue@next such as

yarn add -D @testing-library/vue@next or npm i --save-dev @testing-library/vue@next

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.