Skip to content

Browser Mode support Vitest #30677

Closed
Closed
@pfteter

Description

@pfteter

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 :)

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions