Even though I set jest, all class names are displayed as undefined.

[brgndyy]

hello. Currently, I have set up jest as per the vanilla-extract official website.

I'm trying to use next.js version 14 and jest.

When you run the test, the className of all tags appears as undefined.

I think I did the settings as instructed, but where did I go wrong?

• next.config.js

const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');

const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, options) => {
    // WAV 파일 처리를 위한 설정
    config.module.rules.push({
      test: /\.(wav)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: `/_next/static/sounds/`,
          outputPath: `${options.isServer ? '../' : ''}static/sounds/`,
        },
      },
    });
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    if (fileLoaderRule) {
      config.module.rules.push({
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      });

      config.module.rules.push({
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
        use: ['@svgr/webpack'],
      });

      fileLoaderRule.exclude = /\.svg$/i;
    }

    // 나머지 설정
    return config;
  },
  images: {
    domains: ['localhost'],
  },
};

module.exports = withVanillaExtract(nextConfig);

• jest.config.js

const nextJest = require('next/jest');

const createJestConfig = nextJest({ dir: './' });

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.svg$': 'jest-transformer-svg',
    '\\.css\\.ts$': '@vanilla-extract/jest-transform',
  },
  moduleNameMapper: {
    '\\.svg$': '<rootDir>/__mocks__/svg.js',
    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
  },
};

module.exports = createJestConfig(customJestConfig);

• __mocks__styleMock.js

// eslint-disable-next-line import/no-anonymous-default-export
module.exports = {};

• package.json

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "test": "jest --watch --coverage",
    "test:ci": "jest --ci"
  },
  "dependencies": {
    "@types/dompurify": "^3.0.5",
    "@types/jsdom": "^21.1.5",
    "@vanilla-extract/css": "^1.14.0",
    "dompurify": "^3.0.6",
    "jotai": "^2.5.1",
    "jsdom": "^22.1.0",
    "next": "14.0.2",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^4.12.0",
    "react-toastify": "^9.1.3"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.0-beta.2",
    "@storybook/addon-interactions": "^7.6.0-beta.2",
    "@storybook/addon-links": "^7.6.0-beta.2",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.6.0-beta.2",
    "@storybook/nextjs": "^7.6.0-beta.2",
    "@storybook/react": "^7.6.0-beta.2",
    "@storybook/test": "^7.6.0-alpha.4",
    "@svgr/webpack": "^8.1.0",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.1.2",
    "@types/jest": "^29.5.10",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.11.0",
    "@typescript-eslint/parser": "^6.11.0",
    "@vanilla-extract/jest-transform": "^1.1.1",
    "@vanilla-extract/next-plugin": "^2.3.2",
    "eslint": "^8.53.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-next": "14.0.2",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.6.15",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-transformer-svg": "^2.0.1",
    "prettier": "^3.1.0",
    "storybook": "^7.6.0-beta.2",
    "typescript": "^5"
  }
}

[askoufis]

This is a known issue when using the vanilla extract jest transform in combination with next/jest. #1131

[brgndyy]

Yes, I changed jest.config.js after reading the article, but the same undefined message appears.

• jest.config.js

const nextJest = require('next/jest');

const createJestConfig = nextJest({ dir: './' });

/** @type {import('jest').Config} */
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '\\.css\\.ts$': '@vanilla-extract/jest-transform', // move to first
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.svg$': 'jest-transformer-svg',
  },
};

const jestConfigWithOverrides = async (...args) => {
  const configFn = createJestConfig(customJestConfig);
  const res = await configFn(...args);

  res.moduleNameMapper = {
    '\\.svg': '<rootDir>/__mocks__/svg.js',
    ...res.moduleNameMapper,
  };

  return res;
};

module.exports = jestConfigWithOverrides;

• Example.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import Example from '@/_components/_composables/example/Example';
import { exampleContainer } from '@/_components/_composables/example/example.css';

describe('Example Component Test', () => {
  test('check className is right', () => {
    render(<Example />);
    const exampleElement = screen.getByText('this is test component.');

    expect(exampleElement).toHaveClass(exampleContainer); // Error: expect(element).toHaveClass(expected)
  //At least one expected class must be provided.
  });
});

[askoufis]

If you could make some kind of minimal reproduction, i.e. a repo I could clone without any extra deps/config that isn't needed to reproduce the issue, that would be very helpful. It's quite hard to analyse the problem just looking at code.

[brgndyy]

I've created a repo here where you can do minimal testing.

Here repo is..

Thank you for help.

I've been trying various things since yesterday, but I can't find a solution 🥲

[brgndyy]

🥲🥲🥲