0

我通过带有选项的 vue cli 创建项目：vue3、TS、JEST 并添加 @testing-library/vue 。我的 package.json 看起来像这样

{
  "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"
  }
}

我的 jest.config.js 是我从 vue CLI 得到的

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript',
  transform: {
    '^.+\\.vue$': 'vue-jest'
  }
}

我的测试是

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);
    });

})

尝试过的节点版本：14、​​12 我收到错误：

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

我检查了类似的问题，例如Test suite failed to run Cannot find module 'vue-template-compiler when using jest in vue3但对我没有帮助。

4

1 回答 1

1

啊，我设法在https://github.com/testing-library/vue-testing-library/issues/176中找到了答案

安装这个版本的库@testing-library/vue@next 比如

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

于 2021-08-07T10:19:18.297 回答