Vue Test Utils for Vue 3

Related tags

Test test-utils
Overview

Vue Test Utils

Component testing utils for Vue 3.

Languages

πŸ‡«πŸ‡· French version of this README.md

Installation and Usage

  • yarn: yarn add @vue/test-utils --dev
  • npm: npm install @vue/test-utils --save-dev

Get started with the documentation.

Coming from Vue 2 + Test Utils v1?

Check the migration guide. It's still a work in progress. If you find a problem or something that doesn't work that previously did in Vue Test Utils v1, please open an issue.

Documentation

See the docs.

Development

Get started by running pnpm install. You can run the tests with pnpm test. That's it!

Comparison with Vue Test Utils v1 (targeting Vue 2)

This is table for those coming from VTU 1, comparing the two APIs. Some things are still a work in progress.

  • βœ… - implemented
  • ❌ - not yet implemented
  • ⚰️ - will not be implemented (if you have a compelling use case, please open an issue)

Mounting Options

option status notes
data βœ…
slots βœ…
mocks βœ… nested in global
propsData βœ… now called props
provide βœ… nested in global
mixins βœ… (new!) nested in global
plugins βœ… (new!) nested in global
component βœ… (new!) nested in global
directives βœ… (new!) nested in global
stubs βœ…
attachToDocument βœ… renamed attachTo. See here
attrs βœ…
scopedSlots ⚰️ scopedSlots are merged with slots in Vue 3
context ⚰️ different from Vue 2, does not make sense anymore.
localVue ⚰️ no longer required - Vue 3 there is no global Vue instance to mutate.
listeners ⚰️ no longer exists in Vue 3
parentComponent ⚰️

Wrapper API (mount)

method status notes
attributes βœ…
classes βœ…
exists βœ…
find βœ… only querySelector syntax is supported. find(Comp) under discussion here
emitted βœ…
findAll βœ… see above. .vm is different to Vue 2. We are exploring options.
get βœ…
html βœ…
setValue βœ… works for select, checkbox, radio button, input, textarea. Returns nextTick.
text βœ…
trigger βœ… returns nextTick. You can do await wrapper.find('button').trigger('click')
setProps βœ…
props βœ…
setData βœ…
destroy βœ… renamed to unmount to match Vue 3 lifecycle hook name.
props βœ…
isVisible βœ…
contains ⚰️ use find
emittedByOrder ⚰️ use emitted
setSelected ⚰️ now part of setValue
setChecked ⚰️ now part of setValue
is ⚰️
isEmpty ⚰️ use matchers such as this
isVueInstance ⚰️
name ⚰️
setMethods ⚰️
Comments
  • TypeScript error when using data/props mounting option

    TypeScript error when using data/props mounting option

    For those coming from Google/elsewhere: If you have some problems with typing, for example when writing tests with ts-jest and using SFC (.vue) files, the work-around is to as as any. Eg:

    const wrapper = mount(Comp, {
      data() {
        return { foo: 'bar' }
      }
    } as any)
    

    Or try this shim:

    declare module '*.vue' {
      import { DefineComponent } from 'vue';
      const component: DefineComponent;
      export default component;
    }
    

    In the future we aim to have type inference with vue files too. For now, you may need to use as any to avoid compilation errors in your tests.


    Original issue:

    No idea what's going on.

    Some days I wonder if TS is actually making the DX better or worse, lol.

    import { mount } from '@vue/test-utils'
    
    const Layout = {
      template: `
        <div>
          <header>
            <slot name="header" />
          </header>
    
          <main>
            <slot name="main" />
          </main>
          <footer>
            <slot name="footer" />
          </footer>
        </div>
      `
    }
    
    test('layout full page layout', () => {
      const wrapper = mount(Layout, {
        slots: {
          header: '<div>Header</div>',
          main: '<div>Main Content</div>' ,
          footer: {
            template: '<div>Footer</div>'
          }
        }
      })
    
      expect(wrapper.html()).toContain('Main Content')
    })
    

    image

    help wanted typescript has-workaround 
    opened by lmiller1990 35
  • Helpers: Suspense (and others?)

    Helpers: Suspense (and others?)

    #105 had some great discussion around helpers - the example raised there was for components with async setup functions (used in <Suspense>). Testing those alone won't work, since if you have a async setup, Vue expected a <Suspense> wrapper.

    We could provide a helper (this works)

      test('uses a helper to mount a component with async setup', async () => {
        const Comp = defineComponent({
          async setup() {
            return () => h('div', 'Async Setup')
          }
        })
    
        const mountSuspense = async (component: new () => ComponentPublicInstance, options) => {
          const wrapper = mount(defineComponent({
            render() {
              return h(Suspense, null, {
                default: h(component),
                fallback: h('div', 'fallback')
              })
            }
          })
          ...options)
          await flushPromises()
          return wrapper
        }
    
        const wrapper = mountSuspense(Comp)
        console.log(wrapper.html()) //=> <div>Async Setup</div>
      })
    

    Some thoughts:

    • we call flushPromises for the user. Any possible side-effects/unexpected behavior?
    • does this belong in this library? Or should we mention in the docs and let users write their own?
    • this sets a precedent. One we have one helper, it may be expected others are included. This is not a bad thing, just something to keep in mind.
    • do we also then need a shallowMountSuspense? Someone will almost certainly ask for this.
      • if we drop shallowMount as a stand-alone function (which I think we should) and instead have a shallow: true mounting option, this would not be a problem.
    discussion 
    opened by lmiller1990 32
  • Helpers: nextTick/flushPromises

    Helpers: nextTick/flushPromises

    Follwing up on a discussion on Discord, I wanted to open this issue to gather feedback, experiences, and opinions on how to handle async testing and the usage of nextTick and flushPromises.

    Differences between nextTick and flushPromises

    I couldn't explain it any better than here: https://github.com/testing-library/react-testing-library/issues/11

    Current state of the art

    We're currently returning nextTick on several methods.

    I think I was expecting to get away with await wrapper.something() most of the time.

    by @cexbrayat. Turns out you might need an indeterminate number of nextTick calls to get everything up to date, so you end up using flushPromises. Happened the same to me while writing docs for HTTP requests.

    Also, there's this question by @JessicaSachs that is worth checking/considering:

    nextTick might safely be able to be the default? I don't remember if this prohibits testing of async created hooks (I'm thinking in Vue 2)

    What are the alternatives?

    1. "automagically" call flushPromises

    The pros is that users have one less thing to worry about – and a thing which is quite low-level.

    On the other hand, we might lose the ability to test intermediate states (such as "Loading states") before the promise resolved/rejected. If that's the case, this is a no-go.

    2. Leave it as is and rely on docs

    Pros is that current implementation of VTU-next would work.

    Cons is that we all know that explaining something in a documentation does not translate well with "our users will know about this and will take it into account" πŸ˜…

    3. Create a tool (method? helper?) to wrap nextTick and flushPromises

    Not sure about the shape of that tool, but something along the lines of waitFor. Other alternatives mentioned on Discord are wrapper.findAsync.


    disclaimer: this issue is meant to serve as a place to discuss alternatives. After that, if we reach a consensus, I open to write a proper RFC with the suggested proposal πŸ‘

    discussion 
    opened by afontcu 29
  • Request to reinstate ability to use CSS selectors in findComponent

    Request to reinstate ability to use CSS selectors in findComponent

    It said in the release notes that if we felt strongly about this feature we could open an issue, so that's what I'm doing. I don't think it makes sense to remove the ability to use CSS selectors in findComponent just to make VTU2 more in line with VTU1, and I think there are some notable benefits to using CSS selectors to find components.

    The most significant benefit (in my opinion) is the ability to more specifically select components. Say I have a component like so, that imports a Spinner component and then shows it on two buttons depending on which is clicked

    <template>
      <button @click="buttonASpinning = true">A <Spinner id="btnASpinner" v-if="buttonASpinning" /></button>
      <button @click="buttonBSpinning = true">B <Spinner id="btnBSpinner" v-if="buttonBSpinning" /></button>
    </template>
    
    <script>
    import { defineComponent, ref } from 'vue'
    import Spinner from '@/components/Spinner.vue'
    
    export default defineComponent({
      components: { Spinner },
      setup() {
        const buttonASpinning = ref(false)
        const buttonBSpinning = ref(false)
        return { buttonASpinning, buttonBSpinning }
      },
    })
    </script>
    

    Without CSS selectors I have to use findAllComponents(Spinner)[1] to access Spinner B, which will break if the buttons switch positions, if there are any other spinners in any other components before this component on the page, etc. With large components or views this can become a nightmare of remembering state for completely unrelated parts of the page.

    It was also just nice to have another option for selecting components that didn't come with the downsides of the other three. Selecting by constructor requires you to import the constructor into your test, selecting by name requires you to know the name of the component which isn't always readily available or even present for 3rd party components, and selecting by ref requires you to add refs to components that don't already have them just for testing. Personally I like to use data attributes for selectors in tests since they can be easily removed in production.

    discussion 
    opened by dospunk 25
  • Typescript interface error RouterLink.d.ts

    Typescript interface error RouterLink.d.ts

    I have installed a VueJS 3 app and upgraded test-utils to the latest alpha. An attempt to serve the app locally returns this error:

    node_modules/@vue/test-utils/dist/components/RouterLinkStub.d.ts:5:12 - error TS2707: Generic type 'ComponentOptionsBase<Props, RawBindings, D, C, M, Mixin, Extends, E, EE>' requires between 8 and 9 type arguments.
    
    5 } & {}>) & import("vue").ComponentOptionsBase<Readonly<{
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    6     to: any;
      ~~~~~~~~~~~~
    7 } & {}>, unknown, unknown, {}, {}, Record<string, any>, string> & {
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    It seems the interface ComponentOptionsBase is incorrectly specified or RouterLink.d.ts has the wrong number of arguments.

    Is this expected behaviour or is this an issue? Is there a workaround?

    opened by shaneostonstowe 24
  • docs(fr): french documentation and README.md

    docs(fr): french documentation and README.md

    Hello all πŸ‘‹ !

    Here is the french version of the VTU documentation, including all vitepress pages, API and main README.

    Details :

    • Reworked doc/ folder and vitepress config : docs/.vitepress/config.ts was partially rewritten to provide a better support for internationalization. To add another language, you just have to copy and paste the fr/ folder and translate all the files in it. Finally, add the language in the docs/.vitepress/config.ts file under the locales field.
    • The documentation is completely translated in french under the fr/ folder. Please choose FranΓ§ais in the Languages dropdown on the vitepress to see the results.
    • The root README.md file has been translated to french and saved here : docs/fr/README.md.
    • All code written in the docs were cleaned and linted.

    Feel free to give me a feedback.

    Have a nice day.

    opened by antoinezanardi 23
  • feat: expose everything on wrapper.vm to help testing `script setup`

    feat: expose everything on wrapper.vm to help testing `script setup`

    This commit changes wrapper.vm to actually point to vm.$.proxy. This shouldn't change the behaviour of existing tests, but allows components written with script setup to be tested as well, without the need to expose everything just for testing purposes.

    For example a component like:

    <script setup lang="ts">
    import { ref } from 'vue'
    
    const count = ref(0)
    </script>
    

    can now be tested with expect(wrapper.vm.count).toBe(0), whereas you previously had to add defineExpose({ count }) for this to work.

    The downside is that you now can't test that something is not exposed by a component, but I don't think this is a problem.

    This also removes the previous hacks for script setup, as it looks like they are no longer necessary.

    opened by cexbrayat 21
  • Stubs created by shallow mounts do not show props

    Stubs created by shallow mounts do not show props

    When using shallow mount, the stubs do not have the props anymore. In VTU for vue 2 a snapshot would show the props passed to a stubbed component. Now they are not there anymore and the snapshot diff's show them as removed.

    Perhaps this is a configuration problem, or maybe this is not implemented yet? Do you have any info for us?

    enhancement discussion 
    opened by yakobe 19
  • Bug: Mocking not working when setup() is defined

    Bug: Mocking not working when setup() is defined

    Describe the bug I'm trying to mock the vuei18n $t. But this is not working when using the setup composition api. When disabling the setup, it works as expected. I also tried with other function names like $test. Strange thing is, when using a name without the dollar sign, it also works just normal.

    To Reproduce

    index.vue

    <template>
        <div> {{ $t('hello') }}</div>
    </template>
    <script>
      export default {
        setup(){
            return {} // will not work
        },
      }
    </script>
    

    test file

    import { config, mount } from '@vue/test-utils'
    import Index from './index'
    
    config.global = {
        mocks: {
            $t: (msg) => msg
        }
    }
    
    describe ('Index Tests', () => {
         it ('should mount without crashing', () => {
             const wrapper = mount(Index)
             expect(wrapper).toBeTruthy();
         })
    });
    
    

    Expected behavior Should also works when using the composition api.

    Related information:

    • @vue/test-utils version: 2.2.3
    • Vue version: 3.2.45
    • node version: v18.2.0
    • npm (or yarn) version: 8.10.0
    bug 
    opened by Roywcm 17
  • Bug: ReferenceError: XMLSerializer problems

    Bug: ReferenceError: XMLSerializer problems

    Describe the bug Since release 2.0.0-rc.18 I sometimes encounter the following error when running my testsuite with JSDOM:

        TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.
    

    This does not happen with 2.0.0-rc.17. There are more issues with XMLSerializer, but this one is reproducable in a separate testcase. I can add more tests for the other issues when requested.

    To Reproduce See the repo here: https://github.com/maerteijn/xmlserializer-problems-testcase See the CI result here: https://github.com/maerteijn/xmlserializer-problems-testcase/actions/runs/1720099564

    Expected behavior That the test won't fail due to the use of XMLSerializer. I have the feeling that it has a large impact on how vue-test-utils responds compared to previous versions.

    Related information:

    • @vue/test-utils version: 2.0.0-rc.18
    • Vue version: 3.2.x
    • JSDOM version: 16.7 until v19.0
    • node version: v16.13.0
    • npm (or yarn) version: 8.1.0
    bug 
    opened by maerteijn 17
  • lifecycle methods in child components not invoked

    lifecycle methods in child components not invoked

    Lifecycle methods in child components seem to be not invoked.

      const Parent = {
        template: `
          <div>
            <p>I am a parent</p>
            <slot />
          </div>
        `,
      };
      const Child = {
        created() {
          throw new Error("error?");
          console.log("child created");
        },
        mounted() {
          console.log("child mounted");
        },
        render() {
          return "i am a child";
        },
      };
    
      const wrapper = mount(Parent, {
        slots: { default: Child },
      });
    
      console.log(wrapper.html());
    

    ↑ https://github.com/eunjae-lee/vue-test-utils-snapshot-2/blob/master/src/Test.spec.ts#L11-L37

    I expect console log from Child or even Error being thrown at created, but I don't see anything and it successfully(?) prints out the html.

    However, this workaround works:

      const wrapper = mount({
        components: {Parent, Child},
        template: `
          <Parent>
            <Child />
          </Parent>
        `
      })
    
    bug 
    opened by eunjae-lee 17
  • Bug: Support Adding variables outside the target element when triggering onChange Event.

    Bug: Support Adding variables outside the target element when triggering onChange Event.

    Describe the bug

    In Vue test utils Version 1 when working with the Freshworks Crayons Library we used to emit and mock the complete event object. If you notice we pass detail object.

       const event = {
          type: 'drop',
          target: {
            getAttribute: () => 'app',
            name: 'app',
            value: 'test',
          },
          detail: { 
            meta: {
              checked: true,
            },
          },
          preventDefault: jest.fn(),
        };
        wrapper.find('fw-checkbox-stub').vm.$emit('fwChange', event);
        expect(wrapper.vm.appDetails.app).toBe(true); βœ… This works
    

    Now when migrated to vue test utils v2, we no longer have $emit, instead, a trigger was introduced. The problem with the trigger is I can't mock the above event method. partially was able to mock the field inside the target object.

        const input = wrapper.find('fw-checkbox');
        input.element.value = 'test'; βœ… // able to add variables on the element & capture using event.target
        input.element.type = 'drop'; βœ…
        input.element.name = 'app'; βœ…
        input.element.getAttribute = () => 'app'; βœ…
        input.detail = { ❌ // unable to add detail object.
          meta: {
            checked: true,
          },
        };
        input.trigger('fwChange');
        await flushPromises();
    
        expect(wrapper.vm.appName).toBe('test'); βœ… This works
        expect(wrapper.vm.localNewAppInitialDetails.app).toBe(true);  ❌ // Since I was reading event.detail.meta.checkbox // this will fail.
    event.detail is undefined in this case.
    

    To Reproduce

    Expected behavior

    If you suggest any change or workaround by allowing other variables to add outside of the target object it would be helpful

    
        input.detail = { ❌ // unable to add detail object.
          meta: {
            checked: true,
          },
        };
        
        or 
        
         input.element.detail = { ❌ // unable to add detail object.
          meta: {
            checked: true,
          },
        };
        
        I can capture event.detail.meta.checked;
        
        
        **Method I use when fwChange is triggered on the checkbox.**
         setFieldValue(ev) {
         const name = ev.target.getAttribute('name');
         const value = ev.detail.meta.checked; //I want this case to resolved.
         }
    

    Related information:

    Additional context

    bug 
    opened by vangakirankumarreddy 1
  • "vue-tsc" fails with "error TS2769: No overload matches this call" in "strict" mode

    Describe the bug vue-tsc fails with "error TS2769: No overload matches this call" in when "strict" mode is configured in "tsconfig.json".

    If the defineEmits part in the component is removed vue-tsc doesn't complain. Seems that this issue is somehow related with Vue version 3.2.46.

    To Reproduce https://stackblitz.com/edit/vitest-dev-vitest-nwzj9x?file=components%2FSlotComponent.vue,test%2FSlotComponent.test.ts,package.json&initialPath=__vitest

    Expected behavior vue-tsc does not fail for the example given.

    bug 
    opened by tinobino 6
  • Bug: Errors in setup/mount throw and do not return a wrapper

    Bug: Errors in setup/mount throw and do not return a wrapper

    Describe the bug

    #1845 merged and released in v2.2.2 as a workaround for a reactivity issue with errors during mount in Vue. This causes errors during component mount to throw and not return a wrapper by intercepting the expected error handler.

    This prevents the ability to test error handling strategies for larger Vue projects that manage when errors occur in subcomponents and use fallback components.

    To Reproduce

    it('displays error messages from setup errors', async () => {
      const theError = new Error('very bad things happened out of our control');
    
      const ErrorSubComponent = defineComponent({
        setup() {
          throw theError;
        },
        template: '<div>I load external data from flaky provider</div>',
      });
      const ParentWithErrorSubComponent = defineComponent({
        components: { ErrorSubComponent },
        template: `
          <div>
            <h1>parent content</h1>
              <ErrorHandlerSafeguard>
                <ErrorSubComponent />
                <div>inner content</div>
              </ErrorHandlerSafeguard>
            <footer>parent footer</footer>
          </div>
        `,
      });
    
      wrapper = mount(ParentWithErrorSubComponent, {...configWithErrorSafeguardPlugin}); // <--- throws
    
      expect(wrapper.text()).toContain('parent content');
      expect(wrapper.text()).toContain('parent footer');
      expect(wrapper.text()).toContain('SAFEGUARD DEFAULT OOPS MESSAGE WITH DINOSAUR GAME');
      expect(wrapper.text()).toContain('error details: very bad things happened out of our control');
    
      expect(wrapper.text()).not.toContain('inner content');
      expect(wrapper.text()).not.toContain('I load external data');
    });
    

    Expected behaviour

    A wrapper is returned with the mounted component, or a configuration option added to mount to determine whether to intercept error handlers and throw errors, or return the wrapper.

    Related information:

    • @vue/test-utils version: 2.2.2

    Additional context

    I'm happy to put a PR together to add this configuration option.

    bug needs reproduction 
    opened by twoBoots 2
  • initial data & setData for composite & class components

    initial data & setData for composite & class components

    I want to be able to use setData and mount/shallowmount data: () => {} callbacks to modify data in my composite and class components.

    This should handle:

    • #1879
    • #1058 and maby #1851 as well
    opened by AWoelfel 3
  • Bug: _ctx is missing functions that are returned from the setup functions

    Bug: _ctx is missing functions that are returned from the setup functions

    Hi, I started getting the error below after upgrading from 2.2.1 to 2.2.2.

        Received message:   "_ctx.hasIcon is not a function"
    
              209 |           props.countryCode.charAt(0).toUpperCase() +
              210 |           props.countryCode.slice(1),
            > 211 |       };
                  |                   ^
              212 |     });
              213 |
              214 |     const hasIcon = () => Boolean(slots.icon);
    
              at src/components/avatar/Avatar.vue:211:139
              at renderFnWithContext (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:845:19)
              at renderSlot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2996:55)
              at src/components/box/Box.vue:146:59
              at renderFnWithContext (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:845:19)
              at normalizeChildren (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6939:42)
              at createBaseVNode (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6688:9)
              at _createVNode (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6790:12)
              at createVNodeWithArgsTransform (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6645:12)
              at createBlock (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6617:23)
              at Proxy.render (src/components/box/Box.vue:142:54)
              at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:891:44)
              at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5570:57)
              at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:191:25)
              at instance.update (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5684:56)
              at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5698:9)
              at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:9)
              at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5438:17)
              at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5042:21)
              at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5577:21)
              at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:191:25)
              at instance.update (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5684:56)
              at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5698:9)
              at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:9)
              at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5438:17)
              at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5042:21)
              at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5577:21)
              at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:191:25)
              at instance.update (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5684:56)
              at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5698:9)
              at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:9)
              at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5438:17)
              at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5042:21)
              at render (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6198:13)
              at mount (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4432:25)
              at Object.app.mount (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1549:23)
              at _mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:8215:18)
              at createWrapper (src/lib/test-utils.js:19:10)
              at src/components/avatar/Avatar.test.js:170:53
              at Object.<anonymous> (node_modules/expect/build/toThrowMatchers.js:83:11)
              at Object.throwingMatcher [as toThrowError] (node_modules/expect/build/index.js:382:21)
              at testBody (src/components/avatar/Avatar.test.js:174:16)
              at testErrors (src/lib/test-utils.js:87:3)
              at Object.<anonymous> (src/components/avatar/Avatar.test.js:169:35)
    
          172 |                 slots: { icon: '<div />' },
          173 |               }),
        > 174 |             ),
              |                ^
          175 |           ).toThrowError(ERRORS.ONLY_SVG);
          176 |         });
          177 |       });
    
          at testBody (src/components/avatar/Avatar.test.js:174:16)
          at testErrors (src/lib/test-utils.js:87:3)
          at Object.<anonymous> (src/components/avatar/Avatar.test.js:169:35)
    

    Describe the bug I do slot validations in the setup function, sometimes to hide certain HTML elements and sometimes for their content. I created a helper to capture the errors.

    function testErrors(testBody) {
      /**
       * @see https://github.com/vuejs/vue-test-utils/issues/641#issuecomment-443651405
       * @see https://github.com/vuejs/test-utils/issues/1096
       */
      const spyError = jest
        .spyOn(global.console, 'error')
        .mockImplementation(() => {});
    
      testBody();
    
      spyError.mockRestore();
    }
    

    I write the tests like this:

    it('throws an error', () => {
      testErrors(() => {
        expect(() =>
          // mount component
        ).toThrowError(ERROR_MESSAGE);
      });
    });
    

    When I upgraded to 2.2.2 I started getting the error above. It seems the functions that I use in the template are not being populated from the setup function.

    I assume the problem that I'm having is related to this change https://github.com/vuejs/test-utils/commit/74c9af4e35430fb0c3b5cd7366d349b1a8160fd9

    To Reproduce

    <template>
      <div v-if="hasSlot('test')">
        <slot name="test"></slot>
      </div>
      <slot></slot>
    </template>
    
    <script>
    export default {
      setup(_, { slots }) {
        const hasSlot = (slotName) => Boolean(slots[slotName]);
    
        if (!hasSlot('default')) throw new Error('The default slot is required');
        
        return { hasSlot }
      }
    }
    </script>
    

    Expected behavior

    The component should be able to use the functions that are returned from the setup function.

    Related information:

    • @vue/test-utils version: 2.2.2
    • Vue version: 3.2.45
    • node version: 16.17.0
    • npm (or yarn) version: yarn v1.22.17

    Additional context

    bug 
    opened by sevilyilmaz 16
Releases(v2.3.1)
  • v2.3.1(Mar 9, 2023)

    What's Changed

    • docs(fr): french documentation and README.md by @antoinezanardi in https://github.com/vuejs/test-utils/pull/1975
    • fix: Stub instance of the same component by @freakzlike in https://github.com/vuejs/test-utils/pull/1979
    • fix: return wrapper error from DOMWrapper ctor if element is nullish by @ascott18 in https://github.com/vuejs/test-utils/pull/1996

    New Contributors

    • @antoinezanardi made their first contribution in https://github.com/vuejs/test-utils/pull/1975
    • @ascott18 made their first contribution in https://github.com/vuejs/test-utils/pull/1996

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.3.0...v2.3.1

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Feb 19, 2023)

    What's Changed

    renderToString is merged for SSR testing, thanks to @wobsoriano and @cexbrayat!

    • feat: add renderToString function by @cexbrayat in https://github.com/vuejs/test-utils/pull/1971
    • docs: add emits to v-model documentation by @cexbrayat in https://github.com/vuejs/test-utils/pull/1970
    • docs: change type for unableAutoUnmount by @voskresla in https://github.com/vuejs/test-utils/pull/1966
    • docs: mentions attachTo in trigger documentation by @cexbrayat in https://github.com/vuejs/test-utils/pull/1972

    New Contributors

    • @voskresla made their first contribution in https://github.com/vuejs/test-utils/pull/1966

    Full Changelog: https://github.com/vuejs/test-utils/compare/2.2.10...v2.3.0

    Source code(tar.gz)
    Source code(zip)
  • 2.2.10(Feb 2, 2023)

    What's Changed

    • fix: TS workaround for Vue v3.2.47 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1962

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.9...2.2.10

    Source code(tar.gz)
    Source code(zip)
  • v2.2.9(Feb 1, 2023)

    What's Changed

    • chore(deps): update all non-major dependencies by @cexbrayat in https://github.com/vuejs/test-utils/pull/1951
    • fix: use attachTo in failing tests with jsdom v21.1 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1952
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1949
    • chore(deps): update vitest to v0.28.3 by @renovate in https://github.com/vuejs/test-utils/pull/1955
    • chore(deps): update dependency unplugin-vue-components to v0.23.0 by @renovate in https://github.com/vuejs/test-utils/pull/1956
    • chore(deps): update all non-major dependencies to v5.50.0 by @renovate in https://github.com/vuejs/test-utils/pull/1959
    • chore(deps): update dependency rollup to v3.12.1 by @renovate in https://github.com/vuejs/test-utils/pull/1960
    • chore: mark @vue/compiler-dom as optional by @cexbrayat in https://github.com/vuejs/test-utils/pull/1958

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.8...v2.2.9

    Source code(tar.gz)
    Source code(zip)
  • v2.2.8(Jan 27, 2023)

    What's Changed

    • chore(deps): update dependency vue-tsc to v1.0.22 by @renovate in https://github.com/vuejs/test-utils/pull/1930
    • chore(deps): update dependency @rollup/plugin-typescript to v11 by @renovate in https://github.com/vuejs/test-utils/pull/1933
    • chore(deps): update dependency jsdom to v21 by @renovate in https://github.com/vuejs/test-utils/pull/1934
    • [docs]: remove duplicate sentence by @altescape in https://github.com/vuejs/test-utils/pull/1936
    • chore: format with prettier v2.8.2 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1939
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1937
    • chore(deps): update vitest to v0.27.1 by @renovate in https://github.com/vuejs/test-utils/pull/1940
    • chore(deps): update vitest to v0.27.2 by @renovate in https://github.com/vuejs/test-utils/pull/1943
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1944
    • fix: proper docs link in jsdoc by @cexbrayat in https://github.com/vuejs/test-utils/pull/1946
    • chore(deps): update vitest to v0.27.3 by @renovate in https://github.com/vuejs/test-utils/pull/1947
    • chore(deps): update vitest to v0.28.1 by @renovate in https://github.com/vuejs/test-utils/pull/1948
    • chore: add proper dependencies by @cexbrayat in https://github.com/vuejs/test-utils/pull/1950

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.7...v2.2.8

    Source code(tar.gz)
    Source code(zip)
  • v2.2.7(Jan 4, 2023)

    Fixes

    • fix: Differentiate script setup from option api component with setup by @renatodeleao in https://github.com/vuejs/test-utils/pull/1928

    Docs

    • Documentation Update (Issue 1894) by @evandroguedes in https://github.com/vuejs/test-utils/pull/1895
    • docs: add section about test runners upgrade to migration guide by @renatodeleao in https://github.com/vuejs/test-utils/pull/1923
    • [docs]: improve slot scope auto exposing "params" behaviour by @renatodeleao in https://github.com/vuejs/test-utils/pull/1924
    • [docs]: fix broken slots documentation by @miguel-tzab in https://github.com/vuejs/test-utils/pull/1926

    Chore

    • chore(deps): update vitest to v0.25.4 by @renovate in https://github.com/vuejs/test-utils/pull/1896
    • chore(deps): update vitest to v0.25.5 by @renovate in https://github.com/vuejs/test-utils/pull/1897
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1898
    • chore(deps): update dependency prettier to v2.8.1 by @renovate in https://github.com/vuejs/test-utils/pull/1900
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1901
    • chore(deps): update vitest to v0.25.6 by @renovate in https://github.com/vuejs/test-utils/pull/1902
    • chore: add stackblitz link and envinfo to issue template by @cexbrayat in https://github.com/vuejs/test-utils/pull/1906
    • chore(deps): update vite (major) by @renovate in https://github.com/vuejs/test-utils/pull/1907
    • chore(deps): update vitest to v0.25.7 by @renovate in https://github.com/vuejs/test-utils/pull/1908
    • chore(deps): update dependency unplugin-vue-components to v0.22.12 by @renovate in https://github.com/vuejs/test-utils/pull/1909
    • chore(deps): update vitest to v0.25.8 by @renovate in https://github.com/vuejs/test-utils/pull/1910
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1911
    • chore(deps): update dependency @rollup/plugin-json to v6 by @renovate in https://github.com/vuejs/test-utils/pull/1915
    • chore(deps): update dependency @rollup/plugin-commonjs to v24 by @renovate in https://github.com/vuejs/test-utils/pull/1916
    • chore(deps): update vitest to v0.26.0 by @renovate in https://github.com/vuejs/test-utils/pull/1917
    • chore(deps): update dependency vitest to v0.26.1 by @renovate in https://github.com/vuejs/test-utils/pull/1918
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1919
    • chore(deps): update vitest to v0.26.2 by @renovate in https://github.com/vuejs/test-utils/pull/1920
    • chore(deps): update dependency vite to v4.0.3 by @renovate in https://github.com/vuejs/test-utils/pull/1921
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1925
    • chore(deps): update vitest to v0.26.3 by @renovate in https://github.com/vuejs/test-utils/pull/1927
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1929

    New Contributors

    • @evandroguedes made their first contribution in https://github.com/vuejs/test-utils/pull/1895
    • @renatodeleao made their first contribution in https://github.com/vuejs/test-utils/pull/1923
    • @miguel-tzab made their first contribution in https://github.com/vuejs/test-utils/pull/1926

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.6...v2.2.7

    Source code(tar.gz)
    Source code(zip)
  • v2.2.6(Dec 5, 2022)

    What's Changed

    • fix: allow to use KeepAlive or keep-alive in stubs by @cexbrayat in https://github.com/vuejs/test-utils/pull/1892

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.5...v2.2.6

    Source code(tar.gz)
    Source code(zip)
  • v2.2.5(Dec 2, 2022)

    What's Changed

    • chore(deps): update dependency unplugin-vue-components to v0.22.11 by @renovate in https://github.com/vuejs/test-utils/pull/1881
    • chore(deps): update vitest to v0.25.3 by @renovate in https://github.com/vuejs/test-utils/pull/1882
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1885
    • chore(deps): update dependency @rollup/plugin-typescript to v10 by @renovate in https://github.com/vuejs/test-utils/pull/1887
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1890
    • chore(deps): update dependency @types/node to v18.11.10 by @renovate in https://github.com/vuejs/test-utils/pull/1891
    • feat: adding stubbing for keep-alive by @laddi-netapp in https://github.com/vuejs/test-utils/pull/1889

    New Contributors

    • @laddi-netapp made their first contribution in https://github.com/vuejs/test-utils/pull/1889

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.4...v2.2.5

    Source code(tar.gz)
    Source code(zip)
  • v2.2.4(Nov 20, 2022)

    What's Changed

    • refactor: proper type for hasSetupState util function by @cexbrayat in https://github.com/vuejs/test-utils/pull/1865
    • chore: update to typescript v4.9.2 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1874
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1867
    • fix: allow to mock global function in script setup components by @cexbrayat in https://github.com/vuejs/test-utils/pull/1871

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.3...v2.2.4

    Source code(tar.gz)
    Source code(zip)
  • v2.2.3(Nov 15, 2022)

    What's Changed

    • chore(deps): update vitest to v0.25.2 by @renovate in https://github.com/vuejs/test-utils/pull/1862
    • fix: allow spying on non-exposed script setup functions by @cexbrayat in https://github.com/vuejs/test-utils/pull/1860
    • fix: expose props on vm for script setup components by @cexbrayat in https://github.com/vuejs/test-utils/pull/1864
    • fix: allow mocking on script setup components by @cexbrayat in https://github.com/vuejs/test-utils/pull/1861

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.2...v2.2.3

    Source code(tar.gz)
    Source code(zip)
  • v2.2.2(Nov 13, 2022)

    Fixes

    • fix(mount): correctly work with component throwing on mount by @xanf in https://github.com/vuejs/test-utils/pull/1845
    • fix(emit): force event handling even with fake timers by @cexbrayat in https://github.com/vuejs/test-utils/pull/1856

    Other

    • chore(deps): update vitest to v0.24.4 by @renovate in https://github.com/vuejs/test-utils/pull/1841
    • chore(deps): update vitest to v0.24.5 by @renovate in https://github.com/vuejs/test-utils/pull/1842
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1843
    • chore(mount): simplify mount operation by @xanf in https://github.com/vuejs/test-utils/pull/1844
    • chore(deps): update vitest to v0.25.0 by @renovate in https://github.com/vuejs/test-utils/pull/1847
    • chore(deps): update vitest to v0.25.1 by @renovate in https://github.com/vuejs/test-utils/pull/1848
    • chore: update to vue v3.2.43 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1853
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1849
    • chore: update to vue v3.2.45 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1857
    • refactor: use a proxy for wrapper.vm by @cexbrayat in https://github.com/vuejs/test-utils/pull/1858

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.1...v2.2.2

    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Oct 29, 2022)

    What's Changed

    • chore(deps): update dependency unplugin-vue-components to v0.22.9 by @renovate in https://github.com/vuejs/test-utils/pull/1828
    • chore(deps): update all non-major dependencies by @cexbrayat in https://github.com/vuejs/test-utils/pull/1835
    • chore(deps): update all non-major dependencies by @cexbrayat in https://github.com/vuejs/test-utils/pull/1837
    • docs(v-model): add v-model section by @pikax in https://github.com/vuejs/test-utils/pull/1839
    • fix(stubs): teleport stub children as a function by @cexbrayat in https://github.com/vuejs/test-utils/pull/1833
    • chore: ignore js-beautify updates in renovate by @cexbrayat in https://github.com/vuejs/test-utils/pull/1840
    • chore(deps): update dependency @types/node to v18.11.7 by @renovate in https://github.com/vuejs/test-utils/pull/1838

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.2.0...v2.2.1

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Oct 23, 2022)

    What's Changed

    Features

    • feat(setValue): allow array for multiselect .setValue() method by @freakzlike in https://github.com/vuejs/test-utils/pull/1825
    • feat(wrapper): Add raw option to .html() by @freakzlike in https://github.com/vuejs/test-utils/pull/1827
    • feat(stubs): Allow to stub directives (fixes #1800) by @xanf in https://github.com/vuejs/test-utils/pull/1804

    Fixes

    • fix(compat): do not overwrite globalProperties merge them instead by @xanf in https://github.com/vuejs/test-utils/pull/1788
    • fix(element): return correct element for component which renders other component while passing array of vnodes in default slot by @xanf in https://github.com/vuejs/test-utils/pull/1789
    • fix: cleanup event listeners on unmount by @freakzlike in https://github.com/vuejs/test-utils/pull/1793
    • fix(config): Do not use config.renderStubDefaultSlot by @xanf in https://github.com/vuejs/test-utils/pull/1797
    • fix(stubs): Do not render function body in stub by @xanf in https://github.com/vuejs/test-utils/pull/1819

    Other

    • chore(deps): update dependency rollup-plugin-typescript2 to v0.34.1 by @renovate in https://github.com/vuejs/test-utils/pull/1790
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1794
    • chore(deps): update dependency unplugin-vue-components to v0.22.8 by @renovate in https://github.com/vuejs/test-utils/pull/1795
    • added typescript documentation to plugins.md by @mrcwbr in https://github.com/vuejs/test-utils/pull/1796
    • chore(deps): update dependency vue-tsc to v1 by @renovate in https://github.com/vuejs/test-utils/pull/1802
    • chore(deps): update dependency @rollup/plugin-commonjs to v23 by @renovate in https://github.com/vuejs/test-utils/pull/1803
    • chore(deps): update dependency @rollup/plugin-json to v5 by @renovate in https://github.com/vuejs/test-utils/pull/1805
    • chore(deps): update dependency @rollup/plugin-node-resolve to v15 by @renovate in https://github.com/vuejs/test-utils/pull/1806
    • chore(deps): update dependency @rollup/plugin-replace to v5 by @renovate in https://github.com/vuejs/test-utils/pull/1808
    • chore(deps): update pnpm/action-setup action to v2.2.3 by @renovate in https://github.com/vuejs/test-utils/pull/1809
    • chore(scripts): add prepare script by @xanf in https://github.com/vuejs/test-utils/pull/1812
    • chore: use @rollup/plugin-typescript by @cexbrayat in https://github.com/vuejs/test-utils/pull/1811
    • chore: use a typescript rollup config by @cexbrayat in https://github.com/vuejs/test-utils/pull/1814
    • chore: use --bundleConfigAsCjs to load rollup config by @cexbrayat in https://github.com/vuejs/test-utils/pull/1816
    • chore: support node v18 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1817
    • chore(deps): update pnpm/action-setup action to v2.2.4 by @renovate in https://github.com/vuejs/test-utils/pull/1820
    • chore(deps): update all non-major dependencies by @renovate in https://github.com/vuejs/test-utils/pull/1821
    • chore: update to vitest v0.24.3 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1823
    • chore(deps): update dependency @vitest/coverage-c8 to v0.24.3 by @renovate in https://github.com/vuejs/test-utils/pull/1824

    New Contributors

    • @mrcwbr made their first contribution in https://github.com/vuejs/test-utils/pull/1796

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.1.0...v2.2.0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Sep 29, 2022)

    What's Changed

    Fixes

    • fix: keep Date objects on setData by @freakzlike in https://github.com/vuejs/test-utils/pull/1720
    • fix: Make wrapper.find() enable to find ref in v-for directive by @hiromi2424 in https://github.com/vuejs/test-utils/pull/1723
    • fix: duplicate results on findAllComponents with non-function slots by @freakzlike in https://github.com/vuejs/test-utils/pull/1736
    • fix: coverage now needs @vitest/coverage-c8 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1745
    • fix: return the correct name when stubbing a script setup component by @joeyhuang0235 in https://github.com/vuejs/test-utils/pull/1783
    • fix: Add props to stubs for built-in components by @wolfgangwalther in https://github.com/vuejs/test-utils/pull/1767

    Other

    • refactor: stubs types by @cexbrayat in https://github.com/vuejs/test-utils/pull/1773
    • refactor: remove useless params in emits handling by @cexbrayat in https://github.com/vuejs/test-utils/pull/1777
    • test: migrate to vitest by @okxiaoliang4 in https://github.com/vuejs/test-utils/pull/1637

    Chore

    • chore: remove babel dependencies and config by @cexbrayat in https://github.com/vuejs/test-utils/pull/1642
    • chore: lockfile maintenance by @cexbrayat in https://github.com/vuejs/test-utils/pull/1643
    • chore: switch to pnpm by @cexbrayat in https://github.com/vuejs/test-utils/pull/1644
    • chore: configure renovate to group vite packages by @cexbrayat in https://github.com/vuejs/test-utils/pull/1685
    • docs: update installation docs by @ryandialpad in https://github.com/vuejs/test-utils/pull/1693
    • chore: use es2016 as a TS target by @cexbrayat in https://github.com/vuejs/test-utils/pull/1695
    • chore: Update README since package manager was changed from yarn to npnm by @hiromi2424 in https://github.com/vuejs/test-utils/pull/1724
      • chore: refactor and remove old files by @lmiller1990 in https://github.com/vuejs/test-utils/pull/1776
    • chore: Add version info to bug report template by @freakzlike in https://github.com/vuejs/test-utils/pull/1729
    • chore: Extend expose tests with not used function by @freakzlike in https://github.com/vuejs/test-utils/pull/1735
    • chore: improve type for stub cache by @cexbrayat in https://github.com/vuejs/test-utils/pull/1743
    • chore: improve type for mount with TS v4.8 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1744
    • chore: run tests in random order by @cexbrayat in https://github.com/vuejs/test-utils/pull/1747

    New Contributors

    • @ryandialpad made their first contribution in https://github.com/vuejs/test-utils/pull/1693
    • @hiromi2424 made their first contribution in https://github.com/vuejs/test-utils/pull/1724
    • @wolfgangwalther made their first contribution in https://github.com/vuejs/test-utils/pull/1767
    • @joeyhuang0235 made their first contribution in https://github.com/vuejs/test-utils/pull/1783

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.0.2...v2.1.0

    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Jul 4, 2022)

    What's Changed

    Fixes

    • fix: fix typo by @liuzhuan in https://github.com/vuejs/test-utils/pull/1608
    • fix: check if component unmounted in Wrapper.exists() by @Djaler in https://github.com/vuejs/test-utils/pull/1629
    • fix: algolia appId by @okxiaoliang4 in https://github.com/vuejs/test-utils/pull/1636

    Docs

    • docs: Documentation Update (Issue 1632) by @N8ers in https://github.com/vuejs/test-utils/pull/1635

    Chore/Other

    • chore(types): improve typing of emitted by @xanf in https://github.com/vuejs/test-utils/pull/1640
    • repro: type-checking issue with script setup in v2.0.1 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1601

    New Contributors

    • @liuzhuan made their first contribution in https://github.com/vuejs/test-utils/pull/1608
    • @Djaler made their first contribution in https://github.com/vuejs/test-utils/pull/1629
    • @N8ers made their first contribution in https://github.com/vuejs/test-utils/pull/1635
    • @okxiaoliang4 made their first contribution in https://github.com/vuejs/test-utils/pull/1636

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.0.1...v2.0.2

    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Jun 14, 2022)

    Test Utils is quite stable now, so most of the changes here are minor fixes.

    The next "big ticket" feature will be SSR support. You can track it here: https://github.com/vuejs/test-utils/pull/1572

    Fixes

    • fix(compat): declare RouterLinkStub as compatibility mode 3 by @snoozbuster in https://github.com/vuejs/test-utils/pull/1549
    • fix(types): Export BaseWrapper from index.ts by @snoozbuster in https://github.com/vuejs/test-utils/pull/1548
    • fix: export package.json from module by @snoozbuster in https://github.com/vuejs/test-utils/pull/1542
    • fix(utils): getRootNodes flattens only one depth of children by @cexbrayat in https://github.com/vuejs/test-utils/pull/1546
    • fix(compat): respect v-model in vue 2 with compat build by @snoozbuster in https://github.com/vuejs/test-utils/pull/1565

    Chores/Dependencies

    • chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.27.0 to 5.27.1 by @dependabot in https://github.com/vuejs/test-utils/pull/1583
    • chore: add return type to createStub by @cexbrayat in https://github.com/vuejs/test-utils/pull/1544
    • chore: lockfile maintenance by @cexbrayat in https://github.com/vuejs/test-utils/pull/1543
    • chore(deps-dev): bump @vue/compiler-sfc from 3.2.34 to 3.2.36 by @dependabot in https://github.com/vuejs/test-utils/pull/1527
    • chore: bump vue to v3.2.26 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1545
    • chore(deps-dev): bump vue-tsc from 0.34.15 to 0.34.16 by @dependabot in https://github.com/vuejs/test-utils/pull/1532
    • chore(deps-dev): bump rollup from 2.74.1 to 2.75.5 by @dependabot in https://github.com/vuejs/test-utils/pull/1564
    • chore(deps-dev): bump lint-staged from 12.4.2 to 13.0.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1563
    • chore(deps-dev): bump @types/node from 17.0.35 to 17.0.38 by @dependabot in https://github.com/vuejs/test-utils/pull/1562
    • chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.26.0 to 5.27.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1556
    • chore(deps-dev): bump vue-tsc from 0.34.16 to 0.35.2 by @dependabot in https://github.com/vuejs/test-utils/pull/1555
    • chore(deps-dev): bump @babel/types from 7.18.2 to 7.18.4 by @dependabot in https://github.com/vuejs/test-utils/pull/1551
    • chore(deps-dev): bump @typescript-eslint/parser from 5.26.0 to 5.27.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1553
    • chore(deps-dev): bump rollup-plugin-typescript2 from 0.31.2 to 0.32.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1566
    • chore(find): extend tests with deep nested multiple roots by @freakzlike in https://github.com/vuejs/test-utils/pull/1569
    • chore(deps-dev): bump @types/node from 17.0.38 to 17.0.39 by @dependabot in https://github.com/vuejs/test-utils/pull/1570
    • chore(deps-dev): bump eslint from 8.16.0 to 8.17.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1579
    • chore(deps-dev): bump typescript from 4.6.4 to 4.7.3 by @dependabot in https://github.com/vuejs/test-utils/pull/1578
    • chore(deps-dev): bump @types/node from 17.0.39 to 17.0.40 by @dependabot in https://github.com/vuejs/test-utils/pull/1576
    • chore(deps-dev): bump @typescript-eslint/parser from 5.27.0 to 5.27.1 by @dependabot in https://github.com/vuejs/test-utils/pull/1582
    • chore: update Vue to 3.2.37 by @lmiller1990 in https://github.com/vuejs/test-utils/pull/1585
    • chore(deps-dev): bump rollup from 2.75.5 to 2.75.6 by @dependabot in https://github.com/vuejs/test-utils/pull/1586
    • chore(deps-dev): bump babel-preset-jest from 28.0.2 to 28.1.1 by @dependabot in https://github.com/vuejs/test-utils/pull/1588
    • chore(deps-dev): bump lint-staged from 13.0.0 to 13.0.1 by @dependabot in https://github.com/vuejs/test-utils/pull/1591
    • chore(deps-dev): bump vue-router from 4.0.15 to 4.0.16 by @dependabot in https://github.com/vuejs/test-utils/pull/1593
    • chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.27.1 to 5.28.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1598
    • chore(deps-dev): bump @types/node from 17.0.40 to 17.0.42 by @dependabot in https://github.com/vuejs/test-utils/pull/1594
    • chore(deps-dev): bump @babel/core from 7.18.2 to 7.18.5 by @dependabot in https://github.com/vuejs/test-utils/pull/1596
    • chore(deps-dev): bump @typescript-eslint/parser from 5.27.1 to 5.28.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1595
    • chore(deps-dev): bump rollup-plugin-typescript2 from 0.32.0 to 0.32.1 by @dependabot in https://github.com/vuejs/test-utils/pull/1587
    • chore(deps-dev): bump prettier from 2.6.2 to 2.7.0 by @dependabot in https://github.com/vuejs/test-utils/pull/1600

    New Contributors

    • @dcrall made their first contribution in https://github.com/vuejs/test-utils/pull/1535
    • @snoozbuster made their first contribution in https://github.com/vuejs/test-utils/pull/1549

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.0.0...v2.0.1

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(May 20, 2022)

    This is v2.0.0. The library is quite stable and there are not major bugs.

    What's Changed

    • Fix/emitted events cache by @BrettLargent in https://github.com/vuejs/test-utils/pull/1449
    • fix: string slot null ctx in renderFn by @braddialpad in https://github.com/vuejs/test-utils/pull/1462
    • fix: wrapper.element with nested multiple roots by @freakzlike in https://github.com/vuejs/test-utils/pull/1463
    • fix: fix module resolution for esm file by @sheremet-va in https://github.com/vuejs/test-utils/pull/1484
    • regression: #1476 reactive prop object compare by @freakzlike in https://github.com/vuejs/test-utils/pull/1479
    • fix: Pass props to functional component by @freakzlike in https://github.com/vuejs/test-utils/pull/1513
    • fix(wrapper): fix wrapper.element for component with slot by @xanf in https://github.com/vuejs/test-utils/pull/1497
    • fix(findComponent): allow finding top-level component by @xanf in https://github.com/vuejs/test-utils/pull/1496
    • chore: bump to vue v3.2.34 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1510

    New Contributors

    • @BrettLargent made their first contribution in https://github.com/vuejs/test-utils/pull/1449
    • @braddialpad made their first contribution in https://github.com/vuejs/test-utils/pull/1462
    • @sheremet-va made their first contribution in https://github.com/vuejs/test-utils/pull/1484

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.0.0-rc.21...v2.0.0

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.21(Apr 21, 2022)

  • v2.0.0-rc.20(Apr 12, 2022)

    What's Changed

    • fix: make imports in wrapperLike relative (again) by @catrope in https://github.com/vuejs/test-utils/pull/1401
    • fix: remove compilerOptions from config by @cexbrayat in https://github.com/vuejs/test-utils/pull/1408
    • docs: add RouterLinkStub to api docs by @aethr in https://github.com/vuejs/test-utils/pull/1391
    • chore: bump to vue v3.2.32 by @cexbrayat in https://github.com/vuejs/test-utils/pull/1418 (fixes bug in shallowMount)

    New Contributors

    • @celiavelmar made their first contribution in https://github.com/vuejs/test-utils/pull/1395
    • @catrope made their first contribution in https://github.com/vuejs/test-utils/pull/1401

    Full Changelog: https://github.com/vuejs/test-utils/compare/v2.0.0-rc.19...v2.0.0-rc.20

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.18(Dec 21, 2021)

    We are edging closer to a 2.0.0. This release contains many small fixes, mainly related to niche edge cases.

    Fixes

    fix: stringify symbol props in stubs (#1086) fix: Remove methods key from mount (#1145) Fix: Use defaultName when it exists to correctly stub async components (#1136) fix(find): allow finding stubs by stub definition (#1113) fix(emitted): do not track native events on multi-root components (#1121) fix(html): ensure wrapper.html() works correctly for multi-root (#1120) fix(find): implement proper find for multi-root components (#1116) fix(find): do not find DOM node by ref if it is not inside element b118e9aa956a81997dc1276583c0f48c5a767387 fix(find): finding by ref may return Node, not just Element 125ea2fa6c0c757c0628f21aa1b1f60f996ca323

    Other

    chore(findComponent): refactor find & findComponent (fixes #716, #899) chore(compat): Always treat legacy functional components as function bb44d9e4b92b852db7dc588c0d663f33739d41de

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.17(Nov 22, 2021)

    There is one minor breaking change that may impact people using shallowMount with snaphots, see #1066.

    Breaking

    • fix: [BREAKING] Use default name for components with setup script and nameless component (#1066)
    • [BREAKING] remove circular dep - DOMWrapper now requires the VueWrapper it is contained within as the second arg: #1093. This is to support finding a VueWrapper within a DOMWrapper using findComponent

    Features

    • feat: add ability to stub teleport (#1087)

    Fixes

    • fix(compat): handle listeners, class and style in legacy functional (#1080)
    • fix(mount): pass unknown options to $options on mount (#1079)
    • fix(findComponent): favor displayName over name when searching (#1078)
    • fix(find): Allow finding self from DOMWrapper (#1077)
    • fix: expose with render function (#1067)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.16(Oct 13, 2021)

    We are getting near to a 2.0.0. Follow this thread for details.

    The main feature here is the return of the ability to use findComponent with a DOM selector, for example findComponent('#some-id'). Read more here: https://github.com/vuejs/vue-test-utils-next/issues/689. Thanks @xanf and @cexbrayat for all the work!

    Features

    • feat: add enableAutoUnmount feature (#998)

    Fixes

    • fix: return ability to use findComponent with DOM selector (#994)

    Other

    • chore: bump to vue v3.2.16 and fix devtools (#971)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.15(Sep 24, 2021)

    This release improves support for <script setup>, and updates the Vue version, ensuring everything continues working with the latest version of Vue.

    Features

    • feat: expose everything on wrapper.vm (https://github.com/vuejs/vue-test-utils-next/pull/931). This makes testing using vm the same when using <script setup>

    A little controversial, the discussion is worth a look. Generally, you don't want to test or assert against values on vm, but rather the public API (usually the rendered DOM).

    • feat: export createWrapperError

    Deps

    • chore: bump to Vue 3.2.11
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.14(Sep 6, 2021)

  • v2.0.0-rc.13(Aug 30, 2021)

    This is huge release with many bug fixes. If this release breaks something for you, please file an issue.

    The majority of this release was authored by @xanf - thank you for your ongoing efforts!

    Breaking Changes

    breaking: remove ability to use findComponent with DOM selector (#896)

    Note: this may come back, it is an ongoing discussion. If you think it's important, you could make an issue. If you want to find a component, you generally can use findComponent or getComponent.

    Fixes

    fix(find): allow finding root without name (#836) fix(slots): does not expose extra wrapper of slot content (#844) fix(mount): support passing data when immediate watchers are present #840 fix(findComponent): return root instance if it matches (#834) fix: do not crash findComponent if ref is pointing to html element (#817 … fix(stubs): Do not create stubs across multiple renders (#813) fix(stubs): Do not create stubs across multiple renders (#813) fix(compat): avoid warning about non-existing export fix: Always wrap string passed to slot in a helper component (#815) …

    Other

    chore(types): improve types of vueWrapper (#823) … chore(types): add Array of strings as valid type for stubs chore(types): add proper type for propsDeclaration chore(types): improve global.stubs definition chore(types): remove unused props in StubOptions chore(stubs): simplify global stubs registration (#841) chore(find): simplify vnode traversal (#835) chore(deps): bump vue to 3.2 (#889)

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.12(Jul 28, 2021)

    Fixes

    Fix a bug in rc.11 where the types were not correctly shipped. It's not clear why this happened - our build/release process has not changed in a long time. Apologies if you were on rc.11 and the types were not working as expected.

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.11(Jul 27, 2021)

    This release is quite small; one fix, some refactors and some updates to docs.

    fix(setData): do not concat previous and new array values #767

    refactor: use jest.advanceTimersByTime in async test https://github.com/vuejs/vue-test-utils-next/pull/780 refactor: faster suspense test https://github.com/vuejs/vue-test-utils-next/pull/779

    chore: remove volar workaround #760 chore: rename slot variables in tests #759 chore: migrate example to TS #758 chore: format vue files #757 chore: remove allowJs from TS config #743

    docs: update function name #789 docs: update url #776 docs: document .at deprecation #736 docs: remove useless import (#735)

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.10(Jul 6, 2021)

    This is a big release with @xanf adding a lot of support for the Vue Compat build. We are now running against the latest Vue version (3.1.2).

    Features

    feat: support passing component with template to slots feat(compat): support legacy functional components (#703) feat(compat): correctly stub components, wrapped in Vue.extend feat: add @vue/compat initial support (#698)

    Fixes

    fix(compat): do not stub legacy functional component root fix(compat): correctly render default slot in stub if requested (#717) fix: support passing functional components as stub implementation (#700) fix: Allow finding component by definition when using shallow mount (#696) fix: opt-out of stubbing by passing false as stub (#702) fix: do not stub slots content when using shallow mount (#697) fix: find component by its definition when using stub without name (#704 … fix(shallow): correctly stub anonymous components (#714) fix: findComponent should work using same stub for different components

    Other

    docs: add example of passing object with template property to slot chore: improve typings of isComponent helpers chore: Remove outdated comments about template object support in slots

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.9(Jun 24, 2021)

    Fixes

    This reverts this change which was released in v2.0.0-rc.8, relating to the extension. See the PR for an extended discussion.

    We will figure out the best approach to supporting the correct .mjs extension for Test Utils and the rest of the Vue core ecosystem prior to Vue 3.x becoming the main branch on npm.

    Source code(tar.gz)
    Source code(zip)
Component testing utils for Vue 3

Vue Test Utils Component testing utils for Vue 3. Installation and Usage yarn: yarn add @vue/test-utils --dev npm: npm install @vue/test-utils --save-

vuejs 627 Dec 31, 2022
Testing utils for Vuex

This is a collection of test utilities for vuex. For actions you can check if things are commited or dispatched, and what their payload was.

Incognitus 1 Nov 28, 2020
Vue Unit Test Helpers for server-side testing of client-side code

vuenit Vue Unit Test Helpers Vuenit is a testing utility that offers a number of useful methods to make testing Vue applications easier: Easily mount

Jack 36 Dec 8, 2021
Vue test selectors made easy

Vue Hubble makes it simple to add selectors (only in your testing environment) and target component elements in tests without worrying about collisions, extraneous classes, etc.

Christopher Mitchell 12 Dec 24, 2022
Simple Vue App - made for aveonline test

This template should help get you started developing with Vue 3 in Vite.

Joel Tinx 1 Mar 4, 2022
Arca-International Webdev test

Arca-International Webdev test Frontend Screen View Registration View Add Employee logout Login and add Project Detail Employee Edit Employee Delete E

pujiermanto 3 Jul 25, 2022
Frozeneon test

frozeneon-test Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Yura Larsen 0 Dec 26, 2021
Dev test for HubSpot! πŸŽ‰

HubSpot Web Team Exercise - Instructions Welcome to the HubSpot Web Team's coding exercise ?? Make sure you read these instructions carefully before y

Anna Gallo 1 Apr 13, 2022
Component testing utilities for Vue.js

VueUnit A library for Vue.js that makes it easier to create and unit test components. Easily test props, events, and slots (including named slots) Opt

William Seward 212 Nov 17, 2022
Split Testing for Vue.js

vue-a2b split testing for Vuejs Usage Add the package to your project: yarn add vue-a2b # or npm install vue-a2b …and register it to Vue: import VueAB

Norman 83 Aug 15, 2022
πŸ”¬ Utilities for testing Vue components

Vue Test Utils Vue Test Utils is the official testing library for Vue.js. Packages This repository provides the following two packages: Vue Test Utils

vuejs 3.5k Dec 27, 2022
🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.

Vue Testing Library Simple and complete Vue.js testing utilities that encourage good testing practices. Vue Testing Library is a lightweight adapter b

Testing Library 932 Jan 6, 2023
Jest Serializer for Vue components

jest-serializer-vue-tjw Jest Vue snapshot serializer Logo made by Aurora Wooton (age 14) Quotes: "This looks fantastic! This might sell me on testing.

The Jared Wilcurt's Premium Linting Rules 30 Dec 21, 2022
Additional jest matchers for vue

jest-vue-matcher Additional jest matchers for vue Install yarn add jest-vue-matcher -D Setup import { mount } from '@vue/test-utils' import matchers

null 8 Dec 10, 2021
A tool for testing and debugging your Vue + Vuex applications.

A tool for testing and debugging your Vue + Vuex applications.

null 556 Nov 16, 2022
this is a test project for test vbaobab vue3.0 ui lib

test-vbaobab Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints a

Rentoo 0 Dec 26, 2021
this is vue decorator utils

Vue Corator Update @Render: add functional atturibute in component 2019/08/23 @Style: Style tag changed global to scoped 2019/08/22 @Hoc : high order

joon 32 Nov 17, 2022
My collection of headless utils and Vue.js components I use across projects.

headless-utils My collection of headless utils and Vue.js components I use across projects. Installation Install this GitHub Repo globally in your pro

Fabian Beer 1 Feb 9, 2022
Component testing utils for Vue 3

Vue Test Utils Component testing utils for Vue 3. Installation and Usage yarn: yarn add @vue/test-utils --dev npm: npm install @vue/test-utils --save-

vuejs 627 Dec 31, 2022
VueRouter Composition-API utils library

vue-router-compositions A util package for Vue-Router and Vue Composition API. Installation $ npm install vue-router-compositions Basic Usage Examples

Greenpress 19 Dec 22, 2022