Browser Mode support Vitest #30677
Description
Which @angular/* package(s) are relevant/related to the feature request?
@angular/cli
Description
When Browser Mode / Browser Page Context is used a error is thrown that it's running in the browser pool.
Our motivation is to be able to use testing-library / playwright style accessible selectors for testing, as well as access the page context and port some playwright tests to it (cross browser testing)
FAIL chromium spec-app-app.spec.js [ spec-app-app.spec.js ]
Error: Failed to import test file. .../dist/test-out/3a9d9226-64d4-4eb3-a25b-11f468049fcc/spec-app-app.spec.js
Caused by: Error: @vitest/browser/context can be imported only inside the Browser Mode. Your test is running in browser pool. Make sure your regular tests are excluded from the "test.include" glob pattern.
**Test example / Reconstruction **
import {expect, test} from 'vitest';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {provideZonelessChangeDetection} from '@angular/core';
import {WelcomeComponent} from './pages/welcome/welcome.component';
import {page} from '@vitest/browser/context';
describe('UserComponent', () => {
let component: WelcomeComponent;
let fixture: ComponentFixture<WelcomeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [WelcomeComponent],
providers: [provideZonelessChangeDetection()],
}).compileComponents();
fixture = TestBed.createComponent(WelcomeComponent);
component = fixture.componentInstance;
});
test('should select by role', async () => {
await page.getByRole('button');
});
});
Proposed solution
Acceptance Criteria
- It should be possible to configure angular vitest to run in browser mode.
Alternatives considered
Not supporting the browser mode - then we can use JEST :)