Vue 2 directive that adds data-test
attribute to elements
npm install vue-test-attribute
import Vue from 'vue';
import VueTestAttribute from 'vue-test-attribute';
Vue.use(VueTestAttribute);
<div v-test="'address'"></div>
renders
<div data-test="address"></div>
<div v-test="testId"></div>
data() {
return {
testId: 'address'
};
}
renders
<div data-test="address"></div>
<div v-test="testIds"></div>
data() {
return {
testIds: ['address', 'address-1']
};
}
renders
<div data-test="address address-1"></div>
<div v-test="testId"></div>
data() {
return {
testId: false
};
}
renders
<div></div>
(data-test
is not added to element)
Using an attribute selector.
const el = document.querySelector('[data-test~="address"]');
assert(...);
You can pass an object of settings to Vue.use()
to control this directive's behavior.
const settings = {...};
Vue.use(VueTestAttribute, settings);
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"
|
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.
A1: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
<div :data-test="testId" />
A2: That will work fine but with this directive
- If you typo the directive name Vue will report an error
- It's easier to ensure uniformity in the
data-
attribute used - Arrays are joined for you
-
data-test
attributes won't be added in production builds
MIT