Cannot find data-testid attribute in Vue Component with Jest

Question

I am trying to build a test that will target an element with the data-testid attribute. I have a BaseTile component that looks like this:

<template>
      <div
        data-testid="base-tile-icon"
        v-if="!!this.$slots.icon"
      >
        <slot name="icon"></slot>
      </div>
</template>

<script>
export default {};
</script>

<style></style>

And my test looks like this:

import { mount } from '@vue/test-utils';
import BaseTile from '@/components/BaseTile';

const factory = (slot = 'default') => {
  return mount(BaseTile, {
    slots: {
      [slot]: '<div class="test-msg"></div>'
    }
  });
};

it('has an icon slot if an icon is provided', () => {
  let wrapper = factory({ slot: 'icon' });
  const input = wrapper.find('[data-testid="base-tile-icon"]');
  expect(input.findAll('.test-msg').length).toBe(1);
});

How do I appropriately target the data-testid attribute with this test?

score 2 · Accepted Answer · answered Jul 16 '20 at 06:10

The named parameter of the factory is implemented incorrectly. The correct method is described in this post: Is there a way to provide named parameters in a function call in JavaScript?

The correct way to implement this is as follows:

import { mount } from '@vue/test-utils';
import BaseTile from '@/components/BaseTile';

const factory = ({ slot = 'default' } = {}) => {
  return mount(BaseTile, {
    slots: {
      [slot]: '<div class="test-msg"></div>'
    }
  });
};

it('has an icon slot if an icon is provided', () => {
  let wrapper = factory({ slot: 'icon' });
  const input = wrapper.find('[data-testid="base-tile-icon"]');
  expect(input.findAll('.test-msg').length).toBe(1);
});

Cannot find data-testid attribute in Vue Component with Jest

1 Answers1