Directive test example

jest.config.js

@@ -17,5 +17,6 @@ module.exports = merge(config, {
   testPathIgnorePatterns: [
     '<rootDir>/node_modules',
     '<rootDir>/src/__tests__/components',
+    '<rootDir>/src/__tests__/directives',
   ],
 })

src/__tests__/components/Directive.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p v-uppercase="text" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: 'example text',
+    }
+  },
+}
+</script>

src/__tests__/directive.js

@@ -0,0 +1,20 @@
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom/extend-expect'
+import {uppercaseDirective} from './directives/uppercase-directive'
+import Directive from './components/Directive'
+
+// We are about to test an easy vue directive, that we have implemented,
+// named v-uppercawse.
+test('Component with a custom directive', () => {
+  // Do not forget to add the new custom directive to the render function as
+  // the third parameter.
+  const {queryByText} = render(Directive, {}, vue =>
+    vue.directive('uppercase', uppercaseDirective),
+  )
+
+  // Test that the text in lower case does not appear in the DOM
+  expect(queryByText('example text')).not.toBeInTheDocument()
+
+  // Test that the text in upper case does appear in the DOM thanks to the directive
+  expect(queryByText('EXAMPLE TEXT')).toBeInTheDocument()
+})

src/__tests__/directives/uppercase-directive.js

@@ -0,0 +1,6 @@
+// This function converts the received text passed to the
+// v-uppercase directive used in the Directive.vue component
+// to upper case and this is appended to the <p> element
+export function uppercaseDirective(el, binding) {
+  el.innerHTML = binding.value.toUpperCase()
+}