CODEWITHSUNDEEP
vuejs3element-plusvitest
GeeWhizBang
GeeWhizBang

Reputation: 857

Vue3 testing ElementPlus controls with vitest

I am running Vue3 with vite and can't write any tests for components that use the ElementPlus library. Something else needs to be injected apparently but I don't know how to do that.

I have the following 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();

  });
  
});

It doesn't even get to the "expect" tests, fails with message:

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?

Upvotes: 1

Views: 2451

Answers (2)

inweid
inweid

Reputation: 31

I have this problem too. It seems that this problem is already solved in this pull request - https://github.com/element-plus/element-plus/pull/6811

Upvotes: 0

Daniel
Daniel

Reputation: 35724

This bit seems to indicate that node expects you to use .js extension and element is not doing that.

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?

I'm guessing this is because you may be running an older node version. Element requires at least node v16.

Upvotes: 0

Related Questions