The quick and easy way to create and use Vitest with VS Code.
We also recommend installing his complement extension Testing Library Snippets
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-snippetsOpen the extension manager with ctrl+shift+X (Win/Linux) or cmd+shift+X (macOS), search for Vitest Snippets and click on [Install] button.
| Language | Extension |
|---|---|
| JavaScript | .js |
| TypeScript | .ts |
| JavaScript React | .jsx |
| TypeScript React | .tsx |
| Vue | .vue |
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.
| Trigger | Result |
|---|---|
iv→ |
import { it, expect, describe } from 'vitest'█ |
ive→ |
import { beforeEach, afterEach, it, expect, describe, vi } from 'vitest'█ |
| Trigger | Result |
|---|---|
ba→ |
beforeAll(() => { |
baa→ |
beforeAll(async () => { |
be→ |
beforeEach(() => { |
bea→ |
beforeEach(async () => { |
ae→ |
afterEach(() => { |
aa→ |
afterAll(() => { |
| Trigger | Result |
|---|---|
d→ |
describe('░group', () => { |
desc→ |
describe('░group', () => { |
do→ |
describe.only('░group', () => { |
ds→ |
describe.skip('░group', () => { |
| Trigger | Result |
|---|---|
aevcr→ |
afterEach(() => { |
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(() => █) |
| Trigger | Result |
|---|---|
i→ |
it('░should', () => { |
it→ |
it('░should', () => { |
io→ |
it.only('░should', () => { |
is→ |
it.skip('░should', () => { |
itd→ |
it.todo('░should')█ |
ia→ |
it('░should', async () => { |
| Trigger | Result |
|---|---|
t→ |
test('░should', () => { |
to→ |
test.only('░should', () => { |
ts→ |
test.skip('░should', () => { |
ttd→ |
test.todo('░should')█ |
ta→ |
test('░should', async () => { |
| Trigger | Result |
|---|---|
e→ |
expect(█) |
ea→ |
expect.assertions(█) |
eha→ |
expect.hasAssertions()█ |
erj→ |
expect(░).rejects█ |
ers→ |
expect(░).resolves█ |
| 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()█ |
| 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(() => { |
tte→ |
expect(() => { |
ttemis→ |
expect(() => { |
ttems→ |
expect(() => { |
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 |
The editor.snippetSuggestions setting in vscode settings.json will show snippets on top of the suggestion list.
"editor.snippetSuggestions": "top"- vscode-jest-snippets - Jest snippets extension for VS Code
- VS Code - Code editing redefined.
- Figma - The collaborative interface design tool.
- SWPM - One Package Manager to command them all.
Please read CONTRIBUTING for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the Const & Props Snippets on GitHub.
- Camilo Martinez [Equiman]
See also the list of contributors who participated in this project.
If this project helps you, consider buying me a cup of coffee.
This project is licensed under the MIT License - see the LICENSE file for details.