vue-test-utils-plugin-find-by-props

Plugin for @vue/test-utils to find components by its props.

Usage Case

This small plugin extends the Vue Wrapper with following tho methods:

• findAllComponentsByProps()
• findComponentByProps()

Therefore, it's possible to find components with specific props.

Installation

1. Install this plugin via e.g. npm install vue-test-utils-plugin-find-by-props --save-dev
2. Add the following file to your test setup file - e.g.: jest.setup.ts

   import { config } from '@vue/test-utils';
   import { FindByPropsPlugin } from 'vue-test-utils-plugin-find-by-props';
   
   config.plugins.VueWrapper.install(FindByPropsPlugin);

3. (Only required for TypeScript)
   Create a vue-test-utils.d.ts file with the following content:

   import { FindComponentSelector } from '@vue/test-utils/dist/types';
   
   type Props = { [key: string]: any };
   
   declare module '@vue/test-utils' {
     export class VueWrapper {
       findAllComponentsByProps(selector: FindComponentSelector, props: Props): VueWrapper[];
       findComponentByProps(selector: FindComponentSelector, props: Props): VueWrapper;
     }
   }

Usage

Now you're able to use these methods in tests. Fore Example if you have a custom component MyButton and using a Modal with a Save and Cancle button like this:

<div class="modal">
  Do you want to Save?
  <MyButton title="Save" />
  <MyButton title="Cancel" />
</div>

You are now able to easily access the correct button:

const cancelButton = wrapper.findComponentByProps(MyButton, {title: 'Cancel'})

There is no need for an extra class or attributes like data-testid to access the component.