[Bug]: Vitest + React + FluentUI test of Button component fails while rendering

[rosergeev]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (4) x64 Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz
    Memory: 2.12 GB / 16.00 GB
  Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/p/devbox/testfluenticon-pwl72c?file=%2Fsrc%2Fcomponents%2FSomeButton.tsx%3A12%2C31

Bug Description

Actual Behavior

Our team uses Vite framework for build and vitest for testing.
I have created simple component SomeButton that wraps button from fluentui and created a test that renders it. Test fails to render SomeButton component even I delete all properties of the button(related or not to icon)

Expected Behavior

No errors in test

Logs

➜  workspace git:(master) ✗ npm run test

> [email protected] test
> vitest run --environment jsdom


 RUN  v1.3.1 /workspaces/workspace

 ❯ src/components/SomeButton.test.tsx (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/components/SomeButton.test.tsx [ src/components/SomeButton.test.tsx ]
SyntaxError: Invalid or unexpected token
 ❯ Object.<anonymous> node_modules/.pnpm/@[email protected][email protected]/node_modules/@fluentui/react-icons/lib-cjs/utils/fonts/createFluentFontIcon.js:11:64

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  12:48:50
   Duration  1.33s (transform 44ms, setup 0ms, collect 0ms, tests 0ms, environment 423ms, prepare 86ms)

Requested priority

Blocking

Products/sites affected

ImageMaster OfficeClient Add-In

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

@rosergeev

[rosergeev]

@layershifter
Sorry, for broken link
Here it is a new one
https://codesandbox.io/p/devbox/testfluenticon-pwl72c?file=%2Fsrc%2Fcomponents%2FSomeButton.tsx%3A12%2C31

[spellicer]

I'm running into the same thing. Here's a repro that was created using npm create vite@latest for a new react project. Added vitest and fluentui react components and then a simple test.
https://github.com/spellicer/vite-project
In case this helps with reproducing the problem.

[layershifter]

@layershifter Sorry, for broken link Here it is a new one https://codesandbox.io/p/devbox/testfluenticon-pwl72c?file=%2Fsrc%2Fcomponents%2FSomeButton.tsx%3A12%2C31

@rosergeev still broken 😭

[layershifter]

@spellicer thanks, now it's clear.

---

@fluentui/[email protected] is broken by microsoft/fluentui-system-icons#693, I created a PR to revert it.

[rosergeev]

@layershifter Sorry, for broken link Here it is a new one https://codesandbox.io/p/devbox/testfluenticon-pwl72c?file=%2Fsrc%2Fcomponents%2FSomeButton.tsx%3A12%2C31

@rosergeev still broken 😭

It was created as private devbox, I haven't noticed that, sorry for inconvenience. I have changed permissions

[rosergeev]

Can confirm that with version 2.0.229 error has gone

[layershifter]

@fluentui/[email protected] contains the bug fix, closing.