Vue-test-attribute NPM

vue-test-attribute

Vue 2 directive that adds data-test attribute to elements

Install

npm install vue-test-attribute

Usage

1. Bring it in to your app

import Vue from 'vue';
import VueTestAttribute from 'vue-test-attribute';

Vue.use(VueTestAttribute);

2a. Use with string literal

<div v-test="'address'"></div>

renders

<div data-test="address"></div>

2b. Use with string value

<div v-test="testId"></div>

data() {
  return {
    testId: 'address'
  };
}

renders

<div data-test="address"></div>

2c. Use with array value

<div v-test="testIds"></div>

data() {
  return {
    testIds: ['address', 'address-1']
  };
}

renders

<div data-test="address address-1"></div>

2d. Use with `false` value

<div v-test="testId"></div>

data() {
  return {
    testId: false
  };
}

renders

<div></div>

(data-test is not added to element)

3. Find element in a test

Using an attribute selector.

const el = document.querySelector('[data-test~="address"]');

assert(...);

Settings

You can pass an object of settings to Vue.use() to control this directive's behavior.

const settings = {...};

Vue.use(VueTestAttribute, settings);

settings.production

Value	Behavior
`false`	`data-test` attributes will be added
`true`	`data-test` attributes will not be added
(not set)	Behavior is based on value of `process.env.NODE_ENV === "production"`

Server-side rendering

import VueTestAttribute from 'vue-test-attribute';
import {createRenderer} from 'vue-server-renderer';

const renderer = createRenderer({
  directives: {
    // configure renderer with VueTestAttribute
    test: VueTestAttribute.ssr()
  }
});

VueTestAttribute.ssr() accepts an optional settings object. See above for details on settings.