Vue3 тестирование элементов управления ElementPlus с помощью vitest

Question

Я запускаю Vue3 с vite и не могу писать тесты для компонентов, использующих библиотеку 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расширение и элемент этого не делают.

      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.

Answer 2

У меня тоже есть эта проблема. Вроде в этом пулл-реквесте эта проблема уже решена - https://github.com/element-plus/element-plus/pull/6811