Setting timezone doesn't work when using Browser Mode with Playwright + WebKit + macOS

ezzatron commented 1 day ago

Describe the bug

When using Vitest Browser Mode to test some code that depends on a timezone, I noticed that setting the TZ environment variable only affects the time zone for Chromium and Firefox browsers, when running the tests on macOS.

It seems as though this issue does not happen on Linux.

For contrast, I tried using Playwright Test and setting the timezone via the timezoneId option, and this works fine under macOS. So I don't think it's an inherent limitation of the Playwright provider. Setting the same option via Vitest Browser Mode Provider Configuration seems to have no effect at all.

Reproduction

I've created a minimal reproduction as a GitHub repo, because this issue can only be reproduced under macOS: https://github.com/ezzatron/vitest-browser-mode-timezone-repro

You can see the test suite results in this GitHub Actions workflow run show that under macOS, Chromium and Firefox are working, but WebKit is not (from the macos job):

RUN  v2.1.3 /Users/runner/work/vitest-browser-mode-timezone-repro/vitest-browser-mode-timezone-repro
      [chromium] Browser runner started by playwright at http://localhost:5173/
      [firefox] Browser runner started by playwright at http://localhost:5175/
      [webkit] Browser runner started by playwright at http://localhost:5174/

 ✓ |chromium| timezone.test.js  (2 tests) 47ms
 ✓ |firefox| timezone.test.js  (2 tests) 23ms
 ❯ |webkit| timezone.test.js  (2 tests | 2 failed) 213ms
   × timezone should be Asia/Jakarta
     → expected 'UTC' to be 'Asia/Jakarta' // Object.is equality
   × timezone offset should be -420
     → expected +0 to be -420 // Object.is equality

Linux is working fine (from the linux job):

RUN  v2.1.3 /home/runner/work/vitest-browser-mode-timezone-repro/vitest-browser-mode-timezone-repro
      [chromium] Browser runner started by playwright at http://localhost:5173/
      [firefox] Browser runner started by playwright at http://localhost:5175/
      [webkit] Browser runner started by playwright at http://localhost:5174/

 ✓ |chromium| timezone.test.js  (2 tests) 17ms
 ✓ |firefox| timezone.test.js  (2 tests) 11ms
 ✓ |webkit| timezone.test.js  (2 tests) 133ms

I also tested Windows, which didn't seem to work for any browser.

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 491.09 MB / 32.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 22.9.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.3 - /opt/homebrew/bin/npm
    pnpm: 8.10.3 - /opt/homebrew/bin/pnpm
    bun: 1.1.30 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 129.0.6668.101
    Edge: 129.0.2792.89
    Safari: 18.0.1
  npmPackages:
    @vitest/browser: ^2.1.3 => 2.1.3
    vitest: ^2.1.3 => 2.1.3

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sheremet-va commented 1 day ago

timezoneId doesn't exist on providerOptions. You can add @vitest/browser/providers/playwright to your types to get better Type Hint support. Does this help?

export default defineConfig({
  test: {
    browser: {
      providerOptions: {
        context: {
          timezoneId: 'Asia/Jakarta'
        }
      }
    }
  }
})

ezzatron commented 1 day ago

Yes, that does work. Thank you!

P.S. I did try adding @vitest/browser/providers/playwright to my tsconfig.json but for some reason the type hints aren't working for me in the real project where I had this issue (I didn't use TypeScript in the repro). It's probably a TypeScript config issue of some kind. The other types (@vitest/browser/matchers) are working for expect.element etc.

ezzatron commented 1 day ago

FWIW I updated the repro repo at https://github.com/ezzatron/vitest-browser-mode-timezone-repro to use TypeScript. Those @vitest/browser/providers/playwright types still don't seem to work for me. I put some extra properties in the providerOptions and there's no TypeScript errors when you run npx tsc --noEmit.

https://github.com/ezzatron/vitest-browser-mode-timezone-repro/blob/ff668e27c98836c7b388c78222189d8b96bdabe8/vitest.workspace.ts#L21-L27

vitest-dev / vitest