Vitest VSCode Extension

If you are using Vitest 4.1 or higher, the extension provides performance diagnostics during continuous runs. It displays the time taken to load and transform modules directly on the line where the import is defined.

• How to view: Look for the duration number next to your import statements during a watch session.
• Details: Hover over the duration to see detailed diagnostics including transform and evaluation time.
• Disable: Turn off this feature by setting vitest.showImportsDuration to false in your settings.

The template follows this structure:

• src/main.imba: The entry point where Imba styles (global, tag, and element level) are defined, assets/components are imported, and the application is started by mounting the tag.
• src/components/: Contains Imba components (e.g., counter.imba) demonstrating tags, props, state management, and inheritance from web elements.
• src/utils.imba: Contains pure logic examples with in-source testing.
• src/app.css: An optional CSS file that can be imported into main.imba alongside Imba's native scoped styling.
• test/: Contains standalone .test.imba files for testing.

When viewing a test file, you can interact with individual test cases using icons in the editor gutter:

• Run a Single Test: Click the test icon next to the test case.
• Debug/Coverage/Options: Right-click the test icon to access:
  • Run Test
  • Debug Test
  • Run with coverage
  • Reveal in Test Explorer: Highlights the test in the Testing view.
  • Breakpoint Settings: Add standard, conditional, logpoint, or triggered breakpoints.

When using vitest.shellType: terminal, the terminal is hidden by default because output is replicated in the "Test Results" window. To view the actual terminal in the VS Code "Terminals" view, use the command:

Vitest: Show Shell Terminal

By default, the extension does not rerun tests when files change. You can enable 'continuous run' mode to automatically rerun tests whenever a test, file, or directory changes (including changes to imported modules).

• For a specific item: Click the "eye" icon next to a test, file, or directory.
• Globally: Click the "eye" icon in the "Test Explorer" row.

This project is a template for building web applications using Imba and Vite. To get started, you can use the available npm scripts to develop, build, and test your application. It is recommended to use VS Code with the Imba extension for the best development experience.

# Development mode with hot reloading
npm dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests
npm test

# Run tests with Vitest UI
npm run test:ui

The extension integrates with the VSCode Testing view. You can access it via the sidebar to manage your entire test suite.

Toolbar Commands:

• Refresh Tests: Reloads the test suite to reflect changes.
• Run All Tests: Executes all currently visible tests.
• Debug Tests: Starts a debugging session for visible tests.
• Run Tests with Coverage: Runs visible tests while collecting code coverage.
• Continuous Run/Stop Continuous Run: Toggles watch mode to rerun tests on file changes.
• Show Output: Displays detailed execution logs.

Filtering and Status:

• Use the filter bar to narrow tests by name, exclusion patterns, or tags.
• Status Icons:
  • Checkmark: Passed
  • Cross: Failed
  • Arrow: Skipped
  • Yellow icon: Queued
  • Dot: Not executed

You can test Imba code using Vitest in two ways:

1. Separate Test Files: Create files with the .test.imba extension (e.g., test/basic.test.imba).
2. In-source Component/Logic Testing: Use Vitest in-source testing directly within your .imba files (e.g., src/components/counter.imba or src/utils.imba). This is useful for testing components or utility logic without creating separate files.

You can execute all tests that depend on the file you are currently editing. This is useful for ensuring that changes to a source file haven't broken its consumers.

To use this:

1. Open the test file or source file.
2. Use the Run Related Tests command (available via the context menu or the quick picker).

The Vitest extension allows you to run, debug, and watch Vitest tests directly within Visual Studio Code. It also provides coverage support, inline console log display, and import duration tracking.

To use the extension, ensure your environment meets the following requirements:

• Visual Studio Code: version >= 1.77.0 (version >= 1.88.0 required for coverage)
• Vitest: version >= v1.4.0
• Node.js: version >= 18.0.0

You can find the extension on the Visual Studio Marketplace.

You can control the behavior of the testing view using the VS Code built-in setting testing.automaticallyOpenTestResults. This setting affects all testing plugins.

Available options:

• neverOpen: The testing view will never open automatically.
• openOnTestStart (default): Opens the test results view when a test starts running.
• openOnTestFailure: Opens the test results view only if at least one test fails.
• openExplorerOnTestStart: Opens the test tree view when tests start running.

Advanced settings for controlling the Node.js environment and debugger attachment.

Runtime Settings (for child_process shell type):

• vitest.nodeExecutable: Path to the Node.js executable.
• vitest.nodeExecArgs: Arguments for the Node.js executable.

Terminal Settings (for terminal shell type):

• vitest.terminalShellPath: Path to the shell executable.
• vitest.terminalShellArgs: Arguments for the shell executable.

Debugger Settings:

• vitest.debuggerPort: Port for the debugger (default 9229).
• vitest.debuggerAddress: TCP/IP address (default localhost).

Environment Variables:

• vitest.nodeEnv: Object containing environment variables passed to the runner.
• vitest.debugNodeEnv: Object containing environment variables passed during debugging (in addition to vitest.nodeEnv).