Unable to stub child components

[gsccheng]

Version

1.0.0-beta.20

Reproduction link

https://stackoverflow.com/questions/52304864/unable-to-mount-element-ui-child-component-in-test

Steps to reproduce

I have written out the steps to reproduce here. Thanks:

https://stackoverflow.com/questions/52304864/unable-to-mount-element-ui-child-component-in-test

What is expected?

Able to mount the Vue component being tested

What is actually happening?

Unable to mount the Vue component seemingly because of a missing child component that is not being stubbed out.

---

Thanks!

[eddyerburgh]

Have you tried using the latest beta.25?

[gsccheng]

@eddyerburgh Yes I have but figured I reference the beta.20 for my example since that is the version being used by Vue-cli now.

[gsccheng]

Looks like it is an Element-UI bug:

ElemeFE/element#12634

[hengkx]

I use version 1.0.0-beta.25.

remove code

<el-pagination @size-change="sizeChange" :current-page="searchParams.current" @current-change="getCompanyList" background layout="sizes, prev, pager, next" :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="searchParams.pageSize">
    </el-pagination>

[eddyerburgh]

The original issue is because you are not stubbing the el-select component correctly. You need to use the name that the component will attempt to be resolved as. The easiest option is to use the same name as the tag name used to render the component:

mount(TestComponent, {
  stubs: ['el-select']
})

The $el issue is caused by the synchronous Transition stub component that Vue Test Utils adds by default. You can turn it off with the stubs options:

mount(TestComponent, {
  stubs: {
    transition: false
  }
})

This will be fixed after Vue 2.5.18 is released.

Closing in favor of #958