JEST + Vue 3 + Vuetify 3 + Vite + Testing-library/vue：语法错误：无效或意外的令牌

nfs0ujit 于 2023-06-20 发布在 Jest

关注(0)|答案(1)|浏览(133)

第一个问题是：
无法渲染来自vuetify的v-btn所在的组件。测试开始时，将显示一条警告：
[Vue warn]：无法解析组件：v-btn如果这是一个本机自定义元素，请确保通过compilerOptions. isCustomElement将其从组件解析中排除。at at
之后我们做了自定义render函数：

import { render } from "@testing-library/vue";

import { vuetify } from "./src/vuetify/vuetify";
const customRender = (component, options) => {
  return render(component, { ...options, global: { plugins: [vuetify] } });
};

export { customRender as render };

还有一个问题

/var/www/html/node_modules/vuetify/lib/styles/main.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){@keyframes v-shake {
                                                                                  ^

SyntaxError: Invalid or unexpected token

> 1 | import "vuetify/styles";
    | ^
  2 | import "@mdi/font/css/materialdesignicons.css";
  3 | import { createVuetify } from "vuetify";
  4 | import { aliases, mdi } from "vuetify/iconsets/mdi";

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
  at Object.require (resources/js/plugins/vuetify.js:1:1)
  at Object.require (resources/js/components/UI/testing-render.js:3:1)
  at Object.require (resources/js/components/UI/AppButton.test.js:1:1)

配置
AppButton.test.js

import { render, screen } from "@testing-library/vue";
import AppButton from "./AppButton.vue";

test("render AppButton", () => {
    render(AppButton);

    screen.debug();
});

jest.config.js

module.exports = {
    testEnvironment: "jsdom",
    moduleFileExtensions: ["js", "json", "vue"],
    transform: {
        "^.+\\.js$": "babel-jest",
        "^.+\\.vue$": "@vue/vue3-jest",
    },
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"],
    },
};

babel.config.js

module.exports = {
    presets: [["@babel/preset-env", { targets: { node: "current" } }]],
};

jestjs

来源：https://stackoverflow.com/questions/76426661/jest-vue-3-vuetify-3-vite-testing-library-vue-syntaxerror-invalid-or-u

1条答案

按热度按时间

0md85ypi1#

我可以为vuetify 3设置jest。你的渲染功能帮了我很多。

//jest.config.js
module.exports = {
  testEnvironment: "jsdom",
  testEnvironmentOptions: {
    customExportConditions: ["node", "node-addons"]
  },
  moduleFileExtensions: [
    "js",
    "json",
    "vue"
  ],
  transform: {
    "^.+\\.(ts|js|mjs)x?$": "babel-jest",
    "^.+\\.vue$": "@vue/vue3-jest"
  },
  // setupFilesAfterEnv: ["<rootDir>/src/jest_setup_vuetify.js"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    ".+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$":"<rootDir>/src/jest_setup_css",
    "^vuetify/components$": "<rootDir>/node_modules/vuetify/lib/components/index.mjs",
    "^vuetify/directives$": "<rootDir>/node_modules/vuetify/lib/directives/index.mjs"
  },
  transformIgnorePatterns: ['/node_modules/(?!(vuetify)/)']
}

//jest_setup_css.js
module.exports = {}

//jest_setup_vuetify.js
import { render } from "@testing-library/vue";

import vuetify from "./plugins/vuetify";
const customRender = (component, options) => {
  return render(component, { ...options, global: { plugins: [vuetify] } });
};

export { customRender as render };

// ./plugins/vuetify.js
// Styles
import "@mdi/font/css/materialdesignicons.css";
// import "vuetify/styles";

// Vuetify
import { createVuetify } from "vuetify";

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

export default vuetify;

//TestJest.test.js
import { render } from "../jest_setup_vuetify";
import TestJest from "./TestJest.vue";

test('renders json form', () => {
  const { debug } = render(TestJest);
  debug();
});

//TestJest.vue
<template>
  <v-btn density="compact">Compact Button</v-btn>
</template>

<script></script>

赞(0）回复(0）举报 2023-06-20

我来回答

JEST + Vue 3 + Vuetify 3 + Vite + Testing-library/vue：语法错误：无效或意外的令牌

1条答案

相关问题

热门标签

最新问答