vitest cannot test for presence of specific styling

Question

TLDR - None of the methods (console logs or expect) in this test are working - https://github.com/kartik-madhak/noter/blob/help!/recreate-test-issue-branch/src/tests/theme.test.tsx#L20

I am creating a React-Tauri app using Vite. In my application, there is a chakra header being used as a navbar: -

 <chakra.header
      data-testid="navbar"
      shadow="sm"
      zIndex="99"
      m="0"
      background={navbarColor}
    >
    ...

I am trying to assert that the specific background color is being applied to the header using vitest and RTL: -

it('should have a light theme by default', ({ expect, component }) => {
   const navbar = component.getByTestId('navbar')
   const styles = window.getComputedStyle(navbar)
   console.log(
     styles,
     '<<<1',
     styles.background,
     '<<<2',
     styles.getPropertyValue('background'),
     '<<<3'
   )
   expect(navbar.style.background).toBe(allThemes.Lofi.navbarColor)
 })

But navbar.style.background is empty string. The other console logs (styles.background, styles.getPropertyValue('background')) are also empty strings. What am I doing wrong? FYI I have tried console logging inside the component and made sure the value is correct there... (The value navbarColor in the above component is defined correctly) Also, I tried inspecting the html in the app, I can see there is a generated class being applied in the header component like this: - <header data-testid="navbar" class="css-50pch2"> Where css-50pch2 is a random class name prob generated by vite or react (idk). Its defined like this: -

.css-50pch2 {
    box-shadow: var(--chakra-shadows-sm);
    z-index: 99;
    margin: 0px;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),linear-gradient(179.52deg, rgb(164, 192, 247) 7.08%, rgb(169, 228, 232)34.94%, rgb(176, 226, 184) 65.12%, rgb(207, 223, 162) 96.23%);
}

In case you want more info, here is a link to the repo - https://github.com/kartik-madhak/noter/pull/9/commits/a7dacbcd35645b4aea53b78014e5e62ec78b2e7d

Another FYI - Locally, I have already added css: true to vite.config.ts like this: -

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'

const mobile =
  process.env.TAURI_PLATFORM === 'android' ||
  process.env.TAURI_PLATFORM === 'ios'

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  plugins: [react()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  // prevent vite from obscuring rust errors
  clearScreen: false,
  // tauri expects a fixed port, fail if that port is not available
  server: {
    port: 1420,
    strictPort: true,
  },
  // to make use of `TAURI_DEBUG` and other env variables
  // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
  envPrefix: ['VITE_', 'TAURI_'],
  build: {
    // Tauri supports es2021
    target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
    // don't minify for debug builds
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    // produce sourcemaps for debug builds
    sourcemap: !!process.env.TAURI_DEBUG,
  },
  test: {
    environment: 'jsdom',
    css: true,
  },
}))

score 2 · Answer 1 · answered Jul 01 '23 at 13:11

As suggested here, and here if you're running your tests in JSDOM (i.e. every Jest test) then CSS isn't fully implemented. Specifically, the cascade part of CSS is not implemented (https://github.com/jsdom/jsdom/pull/2690). Inheritance is only partially implemented (display and visibility) (https://github.com/jsdom/jsdom/issues/2160).

If you want to test computed styles, you should consider implementing e2e tests. However, you can test for presence of classes on elements and thereby have preliminary confidence in your code.

here is an example of testing computed styles with TestCafe. However, you could also use selenium or cypress.

vitest cannot test for presence of specific styling

1 Answers1