Vue3 使用 vitest 测试 ElementPlus 控件

Question

我正在使用 vite 运行 Vue3，无法为使用 ElementPlus 库的组件编写任何测试。显然需要注入其他东西，但我不知道该怎么做。

我有以下 dateControl.test.js：

import { describe, expect, test } from 'vitest';
import { ref } from 'vue';
import DateCtrl from '@/components/DateCtrl.vue';
import { mount } from "@vue/test-utils";
import ElementPlus from "element-plus";

describe("DateCtrl.vue", () => {  

  const messages = {
    "en-US" : {
      strings: {
        placeholder: 'a',
        label: 'b'
      }
    }
  };

  const locale = "en-US";

  const data = ref ({
    date: ''
  });
  
  test ("Arrange DateCtrl", async () => {

    const component = mount(DateCtrl, {
      props: {
        vModel: data.value.date,
        modelValue: data.value.date,
        labelLoc: "label",
        className: "w1x5",
        placeholderLoc: "date"
      },
      global: {
        plugins: [ElementPlus],
        mocks: {
          $t: (msg) => {
            const params = msg.split('.');
            return messages[locale][params[0]][params[1]];
          }
        }
      }
    });

    //fails on previous lines.
    expect(typeof component !== "undefined", "component created").toBeTruthy();

    let h3Text = component.findAll('h3')[0].element.innerHTML;
    
    expect(component.findAll('.form').length === 1, "form element rendered").toBeTruthy();
    expect(h3Text === "d", "locale strings correct").toBeTruthy();

  });
  
});

它甚至没有达到“预期”测试，失败并显示消息：

Error: Cannot find module 'C:\source\mySite\node_modules\dayjs\plugin\customParseFormat' 
   imported from 
      C:\source\mySite\node_modules\element-plus\es\components\date-picker\src\date-picker.mjs

Did you mean to import dayjs/plugin/customParseFormat.js?

Answer 1

这一点似乎表明节点希望您使用 .js 扩展名，而 element 没有这样做。

Error: Cannot find module 'C:\source\mySite\node_modules\dayjs\plugin\customParseFormat' 
   imported from 
      C:\source\mySite\node_modules\element-plus\es\components\date-picker\src\date-picker.mjs

Did you mean to import dayjs/plugin/customParseFormat.js?

我猜这是因为您可能正在运行旧的节点版本。 Element 至少需要 节点 v16。

Answer 2

我也有这个问题。
看来这个问题已经在这个拉取请求中解决了 - https://github .com/element-plus/element-plus/pull/6811