Skip to content

Commit

Permalink
chore: use experimentalExposeScriptSetupContext for vue-tsc
Browse files Browse the repository at this point in the history
This new option allows a better typechecking of components that expose variables.
See vuejs/language-tools#805

Refs vuejs#972 as this partially fixes it
  • Loading branch information
cexbrayat committed Dec 24, 2021
1 parent 36c3d4f commit eeff860
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 16 deletions.
30 changes: 18 additions & 12 deletions tests/emit.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
DefineComponent,
defineComponent,
FunctionalComponent,
getCurrentInstance,
Expand Down Expand Up @@ -346,16 +345,23 @@ describe('emitted', () => {
expect(wrapper.emitted('click')).toHaveLength(1)
})

it.each([EmitsEventSFC, EmitsEventScriptSetup] as DefineComponent[])(
'captures emitted events',
async (component) => {
const wrapper = mount(component)
await wrapper.trigger('click')
it('captures emitted events in SFC', async () => {
const wrapper = mount(EmitsEventSFC)
await wrapper.trigger('click')

expect(wrapper.emitted().click).toHaveLength(1)
expect(wrapper.emitted().bar).toHaveLength(2)
expect(wrapper.emitted().bar[0]).toEqual(['mounted'])
expect(wrapper.emitted().bar[1]).toEqual(['click'])
}
)
expect(wrapper.emitted().click).toHaveLength(1)
expect(wrapper.emitted().bar).toHaveLength(2)
expect(wrapper.emitted().bar[0]).toEqual(['mounted'])
expect(wrapper.emitted().bar[1]).toEqual(['click'])
})

it('captures emitted events in script setup', async () => {
const wrapper = mount(EmitsEventScriptSetup)
await wrapper.trigger('click')

expect(wrapper.emitted().click).toHaveLength(1)
expect(wrapper.emitted().bar).toHaveLength(2)
expect(wrapper.emitted().bar[0]).toEqual(['mounted'])
expect(wrapper.emitted().bar[1]).toEqual(['click'])
})
})
3 changes: 2 additions & 1 deletion tests/expose.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@ describe('expose', () => {
const wrapper = mount(DefineExposeWithRenderFunction)

// other is exposed vie `expose`
// @ts-ignore upstream issue, see https://github.com/vuejs/vue-next/issues/4397#issuecomment-957613874
expect(wrapper.vm.other).toBe('other')
// can't access `msg` as it is not exposed
// and we are in a component with a setup returning a render function
expect(wrapper.vm.msg).toBeUndefined()
expect((wrapper.vm as unknown as { msg: undefined }).msg).toBeUndefined()
})

it('access vm with <script setup> and defineExpose()', async () => {
Expand Down
5 changes: 4 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,8 @@
"tests",
"src",
"types"
]
],
"vueCompilerOptions": {
"experimentalExposeScriptSetupContext": true
}
}
3 changes: 1 addition & 2 deletions tsconfig.volar.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@
"compilerOptions": {
"lib": ["DOM", "ES2020"],
"skipLibCheck": true
},
"exclude": ["tests/expose.spec.ts"]
}
}

0 comments on commit eeff860

Please sign in to comment.