Vitest Snippets

The quick and easy way to create and use Vitest with VS Code.

We also recommend installing his complement extension Testing Library Snippets

Menu

• Installation
  • Quick Launch
  • Extension Manager
  • Marketplace
• Supported Languages
• Snippets
  • Import
  • Setup
  • Describe
  • Mock
  • It
  • Test
  • Expect
  • Any
  • Assertion
  • Skeleton
• Keyboard
• Settings
• About

---

Installation

Quick Launch

Open the quick launch with ctrl+shift+P (Win/Linux) or cmd+shift+P (macOS).

Paste the following command and press Enter:

ext install deinsoftware.vitest-snippets

Extension Manager

Open the extension manager with ctrl+shift+X (Win/Linux) or cmd+shift+X (macOS), search for Vitest Snippets and click on [Install] button.

Marketplace

Vitest Snippets

⇧ Back to menu

---

Supported Languages

Language	Extension
JavaScript	.js
TypeScript	.ts
JavaScript React	.jsx
TypeScript React	.tsx
Vue	.vue

⇧ Back to menu

---

Snippets

Below is a list of all available snippets and the triggers of each one. The ░ means the TAB jump position and █ the final cursor position.

Import

Trigger	Result
iv→	import { it, expect, describe } from 'vitest'█
ive→	import { beforeEach, afterEach, it, expect, describe, vi } from 'vitest'█

Setup

Trigger	Result
ba→	beforeAll(() => {   █ })
baa→	beforeAll(async () => {   █ })
be→	beforeEach(() => {   █ })
bea→	beforeEach(async () => {   █ })
ae→	afterEach(() => {   █ })
aa→	afterAll(() => {   █ })

Describe

Trigger	Result
d→	describe('░group', () => {   █ })
desc→	describe('░group', () => {   █ })
do→	describe.only('░group', () => {   █ })
ds→	describe.skip('░group', () => {   █ })

Mock

Trigger	Result
aevcr→	afterEach(() => {   vi.clearAllMocks()   vi.resetAllMocks() })█
vm→	vi.mock('░path')█
vmrv→	vi.mock('░path').mockResolvedValue(█)
vf→	vi.fn()█
vfrv→	vi.fn().mockResolvedValue(█)
cf→	const ░nameMock = vi.fn()█
cfrv→	const ░nameMock = vi.fn().mockResolvedValue(█)
mrv→	░mock.mockReturnValue(█)
mrvo→	░mock.mockReturnValueOnce(█)
vs→	vi.spyOn(░global, '░method')█
vsi→	vi.spyOn(░global, '░method').mockImplementation(() => █)
cs→	const ░methodSpy = vi.spyOn(░global, '░method')█
csi→	const ░methodSpy = vi.spyOn(░global, '░method').mockImplementation(() => █)

It

Trigger	Result
i→	it('░should', () => {   █ })
it→	it('░should', () => {   █ })
io→	it.only('░should', () => {   █ })
is→	it.skip('░should', () => {   █ })
itd→	it.todo('░should')█
ia→	it('░should', async () => {   █ })

Test

Trigger	Result
t→	test('░should', () => {   █ })
to→	test.only('░should', () => {   █ })
ts→	test.skip('░should', () => {   █ })
ttd→	test.todo('░should')█
ta→	test('░should', async () => {   █ })

Expect

Trigger	Result
e→	expect(█)
ea→	expect.assertions(█)
eha→	expect.hasAssertions()█
erj→	expect(░).rejects█
ers→	expect(░).resolves█

Any

Trigger	Result
eav→	expect.any(░)█
eas→	expect.any(String)█
ean→	expect.any(Number)█
eab→	expect.any(Boolean)█
ead→	expect.any(Date)█
eaf→	expect.any(Function)█
eaa→	expect.any(Array)█
eat→	expect.anything()█

Assertion

Trigger	Result
tb→	expect(░).toBe(░)█
tbct→	expect(░).toBeCloseTo(░number, ░delta)█
tbd→	expect(░).toBeDefined()█
tbf→	expect(░).toBeFalsy()█
tbgt→	expect(░).toBeGreaterThan(░)█
tbgte→	expect(░).toBeGreaterThanOrEqual(░)█
tbid→	expect(░).toBeInTheDocument()█
tbi→	expect(░).toBeInstanceOf(░)█
tblt→	expect(░).toBeLessThan(░)█
tblte→	expect(░).toBeLessThanOrEqual(░)█
tbn→	expect(░).toBeNull()█
tbt→	expect(░).toBeTruthy()█
tbu→	expect(░).toBeUndefined()█
tc→	expect(░list).toContain(░)█
tce→	expect(░list).toContainEqual(░)█
te→	expect(░).toEqual(░)█
thbc→	expect(░).toHaveBeenCalled()█
thbct→	expect(░).toHaveBeenCalledTimes(░)█
thbcw→	expect(░).toHaveBeenCalledWith(░)█
thblcw→	expect(░).toHaveBeenLastCalledWith(░)█
thl→	expect(░).toHaveLength(░)█
thp→	expect(░).toHaveProperty(░keyPath, ░value)█
thpd→	expect(░).toHaveProperty('disabled')█
thps→	expect(░).toHaveProperty('selected')█
tm→	expect(░).toMatch(░)█
tmis→	expect(░).toMatchInlineSnapshot(░)█
tmo→	expect(░).toMatchObject(░)█
tse→	expect(░).toStrictEqual(░)█
tt→	expect(() => {   █ }).toThrow(░)
tte→	expect(() => {   █ }).toThrowError(░)
ttemis→	expect(() => {   █ }).toThrowErrorMatchingInlineSnapshot()
ttems→	expect(() => {   █ }).toThrowErrorMatchingSnapshot()

Skeleton

Trigger	Result
vsb→	import { it, expect, describe } from 'vitest' describe('░group', () => {   it('░should', () => {     const expected = '░expected'     const actual = ░group(░argument)     expect(actual).toBe(expected)█   }) })

⇧ Back to menu

---

Keyboard

Remember to complement the snippets with these keyboard shortcuts that can be used without needing to move the cursor to the start or to the end.

Action	Win/Linux	macOS
Insert line above	ctrl+shift+enter	cmd+shift+enter
Insert line below	ctrl+enter	cmd+enter

⇧ Back to menu

---

Settings

The editor.snippetSuggestions setting in vscode settings.json will show snippets on top of the suggestion list.

"editor.snippetSuggestions": "top"

⇧ Back to menu

---

About

Fork

• vscode-jest-snippets - Jest snippets extension for VS Code

Built With

• VS Code - Code editing redefined.
• Figma - The collaborative interface design tool.
• SWPM - One Package Manager to command them all.

Contributing

Please read CONTRIBUTING for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the Const & Props Snippets on GitHub.

Authors

• Camilo Martinez [Equiman]

See also the list of contributors who participated in this project.

Sponsors

If this project helps you, consider buying me a cup of coffee.

License

This project is licensed under the MIT License - see the LICENSE file for details.

⇧ Back to menu