Address comments

* fix wording
* fix tests
* improve types

docs/guide/advanced/stubs-shallow-mount.md

@@ -255,7 +255,7 @@ const App = {
 }
 ```
 
-We do not want `Tooltip` directive code to be executed in this test, we just want to assert the message is rendered. In this case, we could use the `stubs`, which appears in the `global` mounting option passing `vTooltip`.
+We do not want the `Tooltip` directive code to be executed in this test, we just want to assert the message is rendered. In this case, we could use the `stubs`, which appears in the `global` mounting option passing `vTooltip`.
 
 ```js
 test('stubs component with custom template', () => {
@@ -268,7 +268,7 @@ test('stubs component with custom template', () => {
   })
 
   console.log(wrapper.html())
-  // <h1>Welcome to Vue.js 3</h1><span></span>
+  // <h1>Welcome to Vue.js 3</h1>
 
   expect(wrapper.html()).toContain('Welcome to Vue.js 3')
 })
@@ -298,7 +298,7 @@ test('stubs component with custom template', () => {
   // 'directive called' logged to console
 
   console.log(wrapper.html())
-  // <h1>Welcome to Vue.js 3</h1><span></span>
+  // <h1 class="with-tooltip">Welcome to Vue.js 3</h1>
 
   expect(wrapper.classes('with-tooltip')).toBe(true)
 })
@@ -307,7 +307,7 @@ test('stubs component with custom template', () => {
 We've just swapped our directive implementation with own one!
 
 ::: warning
-Stubbing directives won't work on functional components due to lack of directive name inside of [withDirectives](https://vuejs.org/api/render-function.html#withdirectives) function. Consider mocking directive module via your testing framework if you need to mock directive used in functional component
+Stubbing directives won't work on functional components or `<script setup>` due to lack of directive name inside of [withDirectives](https://vuejs.org/api/render-function.html#withdirectives) function. Consider mocking directive module via your testing framework if you need to mock directive used in functional component
 :::
 
 ## Default Slots and `shallow`

src/mount.ts

@@ -341,7 +341,7 @@ export function mount(
   }
 
   addToDoNotStubComponents(component)
-  // We've just replaced our component with it's copy
+  // We've just replaced our component with its copy
   // Let's register it as a stub so user can find it
   registerStub({ source: originalComponent, stub: component })
 

src/utils.ts

@@ -170,12 +170,12 @@ export function getComponentsFromStubs(
 
 export function getDirectivesFromStubs(
   stubs: Stubs
-): Record<string, Directive> {
+): Record<string, Directive | true> {
   const normalizedStubs = convertStubsToRecord(stubs)
 
   return Object.fromEntries(
     Object.entries(normalizedStubs)
-      .filter(([key]) => isDirectiveKey(key))
+      .filter(([key, value]) => isDirectiveKey(key) && value !== false)
       .map(([key, value]) => [key.substring(1), value])
   ) as Record<string, Directive>
 }

src/utils/find.ts

@@ -43,8 +43,6 @@ export function matches(
   const nodeTypeCandidates: VNodeTypes[] = [
     nodeType,
     getOriginalComponentFromStub(nodeType)
-    // getOriginalVNodeTypeFromStub(nodeType),
-    // getOriginalStubFromSpecializedStub(nodeType)
   ].filter(Boolean) as VNodeTypes[]
 
   // our selector might be a stub itself

src/vnodeTransformers/stubDirectivesTransformer.ts

@@ -3,7 +3,7 @@ import { isObjectComponent } from '../utils'
 import type { VTUVNodeTypeTransformer } from './util'
 
 interface CreateDirectivesTransformerConfig {
-  directives: Record<string, Directive | boolean>
+  directives: Record<string, Directive | true>
 }
 
 const noop = () => {}
@@ -16,6 +16,8 @@ export function createStubDirectivesTransformer({
 
   return function directivesTransformer(type) {
     if (isObjectComponent(type) && type.directives) {
+      // We want to change component types as rare as possible
+      // So first we check if there are any directives we should stub
       const directivesToPatch = Object.keys(type.directives).filter(
         (key) => key in directives
       )
@@ -36,6 +38,7 @@ export function createStubDirectivesTransformer({
         ...type,
         directives: {
           ...type.directives,
+          // let's add replacement directives on top of existing component directives
           ...replacementDirectives
         }
       }

tests/mountingOptions/global.stubs.spec.ts

@@ -883,7 +883,7 @@ describe('mounting options: stubs', () => {
       expect(wrapper.classes()).toContain('DirectiveStubAdded')
     })
 
-    it('stubs directive as noop', () => {
+    it('stubs directive as noop when true passed as value', () => {
       const SomeDirective = () => {
         throw new Error('I will blow up!')
       }
@@ -904,6 +904,23 @@ describe('mounting options: stubs', () => {
       expect(wrapper.html()).toBe('<div>text</div>')
     })
 
+    it('does not stub directive as noop when false passed as value', () => {
+      const Component = {
+        template: '<div v-my-directive>text</div>',
+        directives: { MyDirective }
+      }
+
+      const wrapper = mount(Component, {
+        global: {
+          stubs: {
+            vMyDirective: false
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe('<div class="DirectiveAdded">text</div>')
+    })
+
     it('stubs directive on child component', () => {
       const Component = {
         template: '<div v-my-directive>text</div>',