Stencil/Vanilla testing duality patterns for ContestOrganizer. Use when writing or modifying tests to choose the correct testing approach and avoid conflicts between Jest (Stencil) and Vitest (Vanilla).
ContestOrganizer uses a dual testing architecture during migration from Stencil to Vanilla Web Components:
.tsx components.ts vanilla components and utilitiestestPathIgnorePatterns prevents conflicts| Scenario | Use | Location | Runner |
|---|---|---|---|
Stencil component (.tsx) | Stencil/Jest | src/components/<name>/ | pnpm test:stencil |
Vanilla component (.ts) | Vitest |
src/components/<name>/ |
pnpm test:vitest |
| Core framework | Vitest | src/core/ | pnpm test:vitest |
| Module utilities | Vitest | src/modules/<name>/ | pnpm test:vitest |
.tsx)src/components/<name>/<name>.tsxsrc/components/<name>/<name>.spec.tspnpm test:stencil.ts)src/components/<name>/<name>.tssrc/components/<name>/<name>.spec.tspnpm test:vitestsrc/core/*.spec.ts → Vitestsrc/modules/nba/*.spec.ts → Vitestexport const config: Config = {
// ... other config
testing: {
testPathIgnorePatterns: [
"<rootDir>/src/core/",
"<rootDir>/src/modules/nba/",
"<rootDir>/src/components/error-message/error-message.spec.ts",
"<rootDir>/src/components/page-404/page-404.spec.ts",
],
},
};
{
"test": "pnpm test:stencil && pnpm test:vitest",
"test:stencil": "stencil test --spec",
"test:vitest": "vitest run",
"test:watch": "vitest watch"
}
import { newSpecPage } from '@stencil/core/testing';
import { MyComponent } from './my-component';
describe('MyComponent', () => {
it('renders', async () => {
const page = await newSpecPage({
components: [MyComponent],
html: '<my-component></my-component>',
});
expect(page.root).toBeTruthy();
});
});
import { describe, it, expect } from 'vitest';
import { Signal } from './signal.js';
describe('Signal', () => {
it('should hold a value', () => {
const signal = new Signal(42);
expect(signal.value).toBe(42);
});
});
Cause: Importing vitest in a Stencil test file.
Solution: Use @stencil/core/testing imports only.
Cause: New Vanilla test directory not in testPathIgnorePatterns.
Solution: Add pattern to stencil.config.ts testing config.
Cause: Using jest.fn() in Vitest or vi.fn() in Stencil.
Solution: Use appropriate mock for each runner.
.tsx vs Vanilla .ts)testPathIgnorePatterns if new Vanilla directoryRuns both suites:
pnpm test:stencil # Jest tests
pnpm test:vitest # Vitest tests
Both must pass before commit is allowed.