Testing

Testing Overview

View Exports SVG uses automated tests to ensure code quality and prevent regressions. The project includes tests for both the extension and the webview client.

Test Framework

The extension uses different testing frameworks for different parts:

Extension: VS Code Extension Test Runner with Mocha
Client: Vitest with React Testing Library

Running Tests

Extension Tests

To run the extension test suite:

npm test

This command:

Runs the pretest script automatically
Compiles the extension and builds the client
Downloads VS Code (if needed)
Launches tests in a VS Code instance
Displays test results in the terminal

Tests run in an isolated VS Code instance to prevent interference with your development environment.

Pre-test Build

The pretest script runs automatically before tests:

npm run pretest

This script:

npm run compile:clean - Cleans the output directory
npm run client:build - Builds the webview UI
npm run compile - Compiles the extension

Defined in: package.json:274

Ensure the pre-test build completes successfully. Test failures may occur if the extension isn’t properly compiled.

Client Tests

The webview client has its own test suite:

cd client
npm test

Test Structure

Extension Test Files

Extension tests are located in src/test/:

src/test/
├── suite/                      # Test suites
│   ├── index.ts               # Test suite loader
│   ├── extension.test.ts      # Extension activation tests
│   ├── main.test.ts           # Main functionality tests
│   └── utilities/             # Utility tests
│       ├── files/
│       │   ├── scanning.test.ts
│       │   ├── misc.test.ts
│       │   └── allowedFilesInFolder.test.ts
│       ├── properties/
│       │   ├── unaryExpression.test.ts
│       │   ├── logicalExpression.test.ts
│       │   └── binaryExpression.test.ts
│       └── vscode/
│           └── uri.test.ts
├── assets/                    # Test fixtures
│   ├── dist/
│   └── subfolder/
│       └── test-1.ts
└── runTest.ts                # Test runner configuration

Test Runner Configuration

The test runner is configured in src/test/runTest.ts:

await runTests({
  extensionDevelopmentPath,
  extensionTestsPath,
  launchArgs: [path.resolve(extensionDevelopmentPath, 'workspaceTest.code-workspace')],
})

Location: src/test/runTest.ts:23

Test Suite Loader

The test suite is loaded by src/test/suite/index.ts, which:

Configures Mocha test runner
Discovers test files
Handles test reporting
Manages test lifecycle

Writing Tests

Extension Test Example

Extension tests use Mocha and VS Code’s testing API:

import * as assert from 'assert'
import * as vscode from 'vscode'

suite('Extension Test Suite', () => {
  vscode.window.showInformationMessage('Start all tests.')

  test('Sample test', () => {
    assert.strictEqual(-1, [1, 2, 3].indexOf(5))
    assert.strictEqual(-1, [1, 2, 3].indexOf(0))
  })
})

Test Utilities

Tests for utility functions focus on:

Input validation
Edge cases
Expected outputs
Error handling

Example from property expression tests:

unaryExpression.test.ts - Tests unary expression parsing
binaryExpression.test.ts - Tests binary expression parsing
logicalExpression.test.ts - Tests logical expression parsing

Test Fixtures

Test assets are stored in src/test/assets/:

Sample TypeScript/JavaScript files
SVG components
Mock workspace structures

Test Coverage

The test suite covers:

Core Functionality

Extension activation
Command registration
File scanning and processing
SVG component extraction
Property parsing

Utilities

File utilities: Scanning, filtering, grouping
Property utilities: Expression parsing, property extraction
VS Code utilities: URI handling, theme management

Edge Cases

Empty files
Invalid SVG components
Missing exports
Malformed expressions

Continuous Integration

Tests run automatically in CI/CD:

Pre-commit - Husky runs linting checks
Pre-publish - Full test suite runs before packaging

# Pre-publish script includes testing
npm run vscode:prepublish
# Runs: biome:check → test → compile:clean → compile:esbuild

Location: package.json:275

Debugging Tests

Debug Extension Tests

Open the test file in VS Code
Set breakpoints
Open the Debug panel (Ctrl+Shift+D)
Select “Extension Tests” configuration
Press F5 to start debugging

Debug Client Tests

cd client
npm run test:ui

This opens Vitest UI in your browser with debugging capabilities.

Verbose Output

The test runner includes --verbose flag:

node ./out/cjs/test/runTest.js --verbose

Location: package.json:273

Test Workspace

Tests run against a test workspace defined in workspaceTest.code-workspace. This provides:

Isolated test environment
Controlled workspace structure
Predictable test conditions

Common Test Scenarios

Testing File Scanning

Tests verify:

Workspace scanning for SVG files
Directory filtering
File type detection
Export detection

See: src/test/suite/utilities/files/scanning.test.ts

Testing Property Parsing

Tests verify:

JSX property extraction
Expression evaluation
Type handling

See: src/test/suite/utilities/properties/

Testing VS Code Integration

Tests verify:

Command registration
Webview creation
Configuration access

See: src/test/suite/extension.test.ts

Best Practices

Write tests first

Consider using Test-Driven Development (TDD) for new features.

Keep tests focused

Each test should verify one specific behavior.

Use descriptive names

Test names should clearly describe what they’re testing.

Clean up after tests

Ensure tests don’t leave side effects that affect other tests.

Test edge cases

Don’t just test the happy path - test error conditions too.

Troubleshooting

Tests Not Running

Issue: Tests fail to start
Solution: Ensure pre-test build succeeds:

npm run pretest

VS Code Not Downloading

Issue: Test runner can’t download VS Code
Solution: Check internet connection and proxy settings

Test Timeout

Issue: Tests timeout
Solution: Increase timeout in test suite:

this.timeout(10000) // 10 seconds

Workspace Issues

Issue: Test workspace state persists
Solution: The test runner automatically cleans the user data directory before each run (see src/test/runTest.ts:18).

Next Steps

Learn about the build process
Understand the project architecture
Set up your development environment

Contributing

Resources

Testing Overview

Test Framework

Running Tests

Extension Tests

Pre-test Build

Client Tests

Test Structure

Extension Test Files

Test Runner Configuration

Test Suite Loader

Writing Tests

Extension Test Example

Test Utilities

Test Fixtures

Test Coverage

Core Functionality

Utilities

Edge Cases

Continuous Integration

Debugging Tests

Debug Extension Tests

Debug Client Tests

Verbose Output

Test Workspace

Common Test Scenarios

Testing File Scanning

Testing Property Parsing

Testing VS Code Integration

Best Practices

Troubleshooting

Tests Not Running

VS Code Not Downloading

Test Timeout

Workspace Issues

Next Steps

Build docs developers (and LLMs) love

Contributing

Resources

​Testing Overview

​Test Framework

​Running Tests

​Extension Tests

​Pre-test Build

​Client Tests

​Test Structure

​Extension Test Files

​Test Runner Configuration

​Test Suite Loader

​Writing Tests

​Extension Test Example

​Test Utilities

​Test Fixtures

​Test Coverage

​Core Functionality

​Utilities

​Edge Cases

​Continuous Integration

​Debugging Tests

​Debug Extension Tests

​Debug Client Tests

​Verbose Output

​Test Workspace

​Common Test Scenarios

​Testing File Scanning

​Testing Property Parsing

​Testing VS Code Integration

​Best Practices

​Troubleshooting

​Tests Not Running

​VS Code Not Downloading

​Test Timeout

​Workspace Issues

​Next Steps

Build docs developers (and LLMs) love

Testing Overview

Test Framework

Running Tests

Extension Tests

Pre-test Build

Client Tests

Test Structure

Extension Test Files

Test Runner Configuration

Test Suite Loader

Writing Tests

Extension Test Example

Test Utilities

Test Fixtures

Test Coverage

Core Functionality

Utilities

Edge Cases

Continuous Integration

Debugging Tests

Debug Extension Tests

Debug Client Tests

Verbose Output

Test Workspace

Common Test Scenarios

Testing File Scanning

Testing Property Parsing

Testing VS Code Integration

Best Practices

Troubleshooting

Tests Not Running

VS Code Not Downloading

Test Timeout

Workspace Issues

Next Steps