1

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?

2 Answers 2

0

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.

Sign up to request clarification or add additional context in comments.

1 Comment

That isn't it, the control works in the app. I just don't know how to get it to run in test framework. My node version is v16.13.0
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.