Vue Global Registered Component give error as Unknown custom element

Hi I just started to implement testing in my frontend, it looks that everything works almost fine. The default test that the template had works fine. However I just did my first testing on a view component that I already done and works but in my testing I have this response

  console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: Unknown custom element: <el-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> <CreateTrip>
           <Root>

My component has some components that are globally registered main.js

import Element from 'element-ui'

and in my view I use those components but I dont explicitly declare it

<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogvisible"
            width="60%"
            custom-class="newtrip"
            :before-close="handleClose">

        <el-form ref="form" :model="form" label-width="155px">
          <el-form-item label="Payment Requirement">
              <el-input v-model="form.rp" placeholder="RP"/>
          </el-form-item>
          <el-form-item label="Invoice">
              <el-input v-model="form.invoice" placeholder="Invoice"/>
          </el-form-item>
            <el-form-item label="Origin *">
              <div class="inline-inputs dis-flex">
                <el-select
                v-model="form.origin_id"
                filterable
                remote
                :remote-method="getSearchOrigin"
                :loading="loadingOrigin"
                placeholder="Select Origin">
                  <el-option
                          v-for="place in origins"
                          :key="place.id"
                          :label="place.name"
                          :value="place.id">
                  </el-option>
                </el-select>

              </div>
            </el-form-item>
            <el-divider></el-divider>

            <el-form-item label="Mon Type *">
                <el-input v-model="form.mon_type" placeholder="Mon Type"/>
            </el-form-item>
          <el-form-item label="Trailersbox">
            <el-select v-model="form.trailers_ids" multiple placeholder="Select Trailersbox">
              <el-option
                v-for="trailerbox in trailersbox"
                :key="trailerbox.id"
                :label="trailerbox.plate"
                :value="trailerbox.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer text-center">
            <el-button @click="handleClose">Cancel</el-button>
            <el-button type="primary" :loading="loading" @click="onSubmit">{{ this.editMode ? 'Update Trip' : 'Create Trip Planification'}}</el-button>
        </div>

    </el-dialog>

</template>

In my <script></script> section I don't have anything that registers those <el-select> nor <el-form> elements but they work when working with hot reload dev mode.

And this is my test file

import { shallowMount } from '@vue/test-utils'
import NewTrip from '@/views/catalogs/trips/newtrip.vue'

describe('Newtrip.vue', () => {

  let wrapper

  beforeEach(() => {

    wrapper = shallowMount(NewTrip)
    wrapper.setProps({
      form: {
        rp: 'a'
      }
    })
  })

  it('can press a create trip planification button', () => {

  })
})

As long as I understand shallowMount mounts child components too, but I don't know how to specify all those third party elements components globally registered.

Any help is welcome

Punksolid

6 years ago

Level 25

I "solved", first of all, the most common solutions I found on the internet didn't refer to global components that weren't third parties not that were several components at once. Once solution that I read was something called stubs that were child components that will be replaced by the original components, but I just wanted to check the child components too as if it were part of my component.

So instead I added the specific components that are needed for my view

    import { Dialog, Button } from 'element-ui'

    export default {
        name: 'MyComponent',
        components: {
          'el-dialog': Dialog,
          'el-button': Button
        },

The confusing part was the name of the components because the documentation of the library made me think that the names of the components were ElDialog and ElButton and those didn-t work.

Anyways, the test are doing assertions now.

Please or to participate in this conversation.