Vitest - @emotion/react - not working anymore with Vite 6

[kolorfilm]

Hi there,

I'm not sure if this a bug or a configuration is missing after update to Vite 6.

All my tests are failing after the update. It seems it cannot find the ThemeProvider anymore:

describe('When Welcome component is rendered', () => {
  it('Then it matches snapshot', () => {
    const { asFragment } = render(
      <MemoryRouter>
        <ThemeProvider theme={myTheme}>
          <Welcome />
        </ThemeProvider>
      </MemoryRouter>
    );

    expect(asFragment()).toMatchSnapshot();
  });
});

The myTheme is a json file:

color: {
    scheme: 'light',
    ...
    },
  borderRadius: {
    ...
  },
  opacity: {
    ...
  },

Within the Welcome.tsx it renders different components like Typography etc. where the json is used like:

${theme.color.text.primary}

The error I get with Vite 6 is like:

Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'text')]

The normal app works and is finding the json values correctly, only Vitest doesn't find it.

Any ideas?

[hi-ogawa]

I suspect this is related to resolution change https://vite.dev/guide/migration.html#general-changes but it would be great to have a reproduction to properly diagnose the issue.

[kolorfilm]

I suspect this is related to resolution change https://vite.dev/guide/migration.html#general-changes but it would be great to have a reproduction to properly diagnose the issue.

Thank you @hi-ogawa for your answer. 🙏🏻 I managed to create a reproduction here. It directly running an example test with vitest.

Looking forward to your response. 🙂