首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用最高级的Vue3测试ElementPlus控件

用最高级的Vue3测试ElementPlus控件
EN

Stack Overflow用户
提问于 2022-03-25 17:04:02
回答 2查看 1.2K关注 0票数 1

我使用vite运行Vue3,不能为使用ElementPlus库的组件编写任何测试。显然还需要注射其他东西,但我不知道该怎么做。

我有以下dateControl.test.js:

代码语言:javascript
运行
复制
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();

  });
  
});

它甚至没有到"expect“测试,失败了消息:

代码语言:javascript
运行
复制
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?
EN

回答 2

Stack Overflow用户

发布于 2022-03-25 23:37:16

这一点似乎表明节点希望您使用.js扩展,而元素没有这样做。

代码语言:javascript
运行
复制
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?

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

票数 0
EN

Stack Overflow用户

发布于 2022-03-30 11:37:53

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71620643

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档