Vue-test-utils: API mount can't render the Element-ui component Pagination

[colinzxz]

Version

1.0.0-beta.20

Reproduction link

https://codesandbox.io/s/nn28lx9r80

Steps to reproduce

1. yarn test:unit test/unit/Pagination.spec.js
2. it throw the error
   

   What is expected?

mount the component Pagination success

What is actually happening?

it can't render success

[eddyerburgh]

This issue is caused by the transition stub added by Vue Test Utils. You can solve it by unstubbing the transition component:

const wrapper = mount(Pagination, { 
  stubs: { transition: false } 
})

transition is stubbed to allow synchronous updating, but it is removed in the latest version, which removes sync mode (see https://github.com/vuejs/vue-test-utils/issues/1137).

[colinzxz]

when I re-render the component, it throw another error.

[Vue warn]: Error in callback for immediate watcher "pageSize": "TypeError: Cannot read property '$scopedSlots' of undefined"

the test code https://codesandbox.io/s/mw661m198:

describe("Pagination.vue", () => {
  it("render", () => {
    const wrapper = mount(Pagination, {
      stubs: {
        transition: false
      }
    });

    expect(wrapper.isVueInstance()).toBe(true);
  });

  it("rerender", () => {
    const wrapper = mount(Pagination, {
      stubs: {
        transition: false
      }
    });
  });
});

[colinzxz]

I got a solution:

const wrapper = mount(Pagination, {
   sync: false,
   stubs: { transition: false }
 });

[garyo]

@eddyerburgh writes:

This issue is caused by the transition stub added by Vue Test Utils. You can solve it by unstubbing the transition component:

const wrapper = mount(Pagination, { 
  stubs: { transition: false } 
})

transition is stubbed to allow synchronous updating, but it is removed in the latest version, which removes sync mode (see #1137).

However, in typescript, you can't pass stubs: { transition: false } as an option to mount. The type declaration is:

type Stubs = {
  [key: string]: Component | string | true
} | string[]

So you have to pass a component, or a string, or true. That means I can't use this workaround as written. Any other ideas or ways to accomplish this?

[garyo]

I changed @vue/test-utils/types/index.d.ts to accept false as a stub value, and tried the above workaround. But I still get the same error:

LoadProjectDialog.vue › emits input event on cancel

    TypeError: Cannot read property '$scopedSlots' of undefined

      91 |
      92 |   /** the project to load */
    > 93 |   projectToLoad: string = ''
         |                                                           ^
      94 |   /** name of new project to create */
      95 |   newProjectName: string = ''
      96 |

      at updateChildComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4091:27)
      at prepatch (node_modules/vue/dist/vue.runtime.common.dev.js:3119:5)
      at patchVnode (node_modules/vue/dist/vue.runtime.common.dev.js:6282:7)
      at updateChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
      at patchVnode (node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
      at updateChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
      at patchVnode (node_modules/vue/dist/vue.runtime.common.dev.js:6293:29)
      at updateChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6167:9)
      ...

I may not be doing it right though.

describe('LoadProjectDialog.vue', function() {
  let localVue
  let wrapper: Wrapper<LoadProjectDialog>
  beforeEach( () => {
    localVue = createLocalVue()
    let options: ThisTypedMountOptions<LoadProjectDialog> = {
      localVue,
      propsData: { project, value: false, projects: [project] },
      stubs: { transition: false }, // XXX: had to modify test-utils/types/index.d.ts to allow this
    }
    wrapper = mount(LoadProjectDialog, options)
  })

  it('emits input event on cancel', function() {
    wrapper.setProps({value: true})
    wrapper.find('#cancel').trigger('click');
    expect(wrapper.emitted().input.length).toEqual(1)
  })
})

[eddyerburgh]

@garyo we need to update the types file, do you want to make a PR adding the fix to the types file?

[garyo]

Done -- #1231.