Personal case on getting css module work in Jest-preview & more postcss package to install

[Norlandz]

environment

Im using React, Vite, Typescript, Jest, React testing library, Jest with esm (node --experimental-vm-modules), jest-preview, css module

• install more postcss package is the key for my fix

• following worked in my case, but still it can very dep on your environment

• hopefully I didnt miss something

procedure to use css module in jest_preview

set up css transform

• see https://www.jest-preview.com/docs/getting-started/installation

  add:

  transform: {
    "^.+\\.(css|scss|sass|less)$": "jest-preview/transforms/css",
  

  remove:

  moduleNameMapper: {
  -  '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
  },
  

• my jest config file H:\Using\TLightChat\tlightchat-main\jest.config.js

  (ignore the comments)

  // import type { Config } from 'jest';
  
  // export default async (): Promise<Config> => {
  // const config: Config = {
  //  Error: Jest: Failed to parse the TypeScript config file
  // Vscode ext doesnt support ts?... // https://marketplace.visualstudio.com/items?itemName=kavod-io.vscode-jest-test-adapter
  
  /** @type {import('jest').Config} */
  const config = {
    // verbose: true,
    // roots: ['<rootDir>/src'], // , '<rootDir>/test'],
    // testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
    // // https://stackoverflow.com/questions/70725063/ts-jest-wont-accept-top-level-awaits-with-nodejs-16-typescript
    // globals: {
    //   'ts-jest': {
    //     useESM: true,
    //   },
    // },
    // preset: 'ts-jest/presets/default-esm',
    testEnvironment: 'jsdom',
    // testEnvironment: 'jest-environment-node',
    transform: {
      '^.+\\.(ts|tsx|js|jsx)$': [
        'ts-jest',
        {
          useESM: true, // said this 'ts-jest', {useESM: true}, & extensionsToTreatAsEsm: ['.ts', '.tsx'], are needed for emphasize ansi import (but not yet for prettier import)
        },
      ],
      '^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css', // order doesnt matter seems (sometimes?..)
      // ;not_needed[jest-preview css]; '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': [ 'jest-preview/transforms/file', { useESM: true, }, ],
      // ;not_needed[jest-preview css]; ;not_working; // maybe order matter?
      // ;not_needed[jest-preview css]; '^.+\\.(css)$': 'jest-preview/transforms/css',
      // ;not_needed[jest-preview css]; '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'jest-preview/transforms/file', // sometimes the css is printed as trace log , when sth is modied, tried, random ..
      // ;not_needed[jest-preview css]; '^.+\\.(css|scss|sass)$': './config/jest/cssTransform.cjs', // cjs must... else default export / esm thing
      // ;not_needed[jest-preview css]; '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': './config/jest/fileTransform.cjs',
      // '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
      // '^.+\\.(ts|tsx|js|jsx)$': 'jest-esm-transformer',
    },
    setupFiles: ['<rootDir>/config/jest/jest.setupFiles.ts'], // less used
    setupFilesAfterEnv: [
      // '@testing-library/jest-dom',
      // "@testing-library/jest-dom/extend-expect",
      '<rootDir>/config/jest/jest.setupFilesAfterEnv.ts',
    ],
    // moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'mjs'],
    moduleNameMapper: {
      // '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
      // '^(\\.{1,2}/.*)\\.js$': '$1',
      // ;[jest-preview need remove this]; '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
      // https://www.jest-preview.com/docs/getting-started/installation/#3-if-you-use-css-modules-make-sure-it-doesnt-get-ignored
      // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
      // uuid: require.resolve('uuid'),
      '^uuid$': 'uuid', // https://stackoverflow.com/questions/73203367/jest-syntaxerror-unexpected-token-export-with-uuid-library
      // need close and restart the watch...
      // ;not_working; '@reduxjs/toolkit': '@reduxjs/toolkit',
    },
    // REVIEW
    extensionsToTreatAsEsm: ['.ts', '.tsx'], // no .js .jsx
    // transformIgnorePatterns: ['node_modules'],
    // transformIgnorePatterns: [], // wait for 4min? not_helping anyways
    // testPathIgnorePatterns: ['<rootDir>/test/Config.test.tsx'], // flag doesnt overwrite this ...
  };
  
  export default config;

import styles from .module.css in your test file

• my test file H:\Using\TLightChat\tlightchat-main\test\_introTryTest\JestPreview_introTryTest.test.tsx

  /**
   * @jest-environment jsdom
   */
  
  import { setImmediate } from 'timers'; // https://github.com/prisma/prisma/issues/8558
  global.setImmediate = setImmediate;
  
  import { jest } from '@jest/globals';
  
  import '@testing-library/jest-dom';
  import { RenderResult, act, prettyDOM, render, screen, waitFor } from '@testing-library/react';
  import util from 'util';
  
  import { PrintUtil } from '../../src/util/print/PrintUtil';
  const { printHtmlHltAnsi } = PrintUtil;
  
  import preview from 'jest-preview';
  import React from 'react';
  
  import styles from '../../src/index.module.css';
  
  function getRandomInt(max: number) {
    return Math.floor(Math.random() * max);
  }
  
  describe('Test JestPreview', () => {
    // ......
  
    test.only('simpleTest__CssImport', () => {
      const renderResult = render(
        <div>
          <div className="foo">
            bbb<code className={styles.css_VideoConnectionLinkageDraftCurrSelected}>123</code>
            <pre>debug this</pre>
          </div>
          {/* <TestCssComp /> */}
        </div>
      );
      // import styles from './index.module.css';
      //
      // export const TestCssComp: React.FC = () => {
      //   return (
      //     <div className="foo">
      //       <div>BB</div>
      //       <code className={styles.css_VideoConnectionLinkageDraftCurrSelected}>666</code>
      //       <div>DD</div>
      //     </div>
      //   );
      // };
      console.log(printHtmlHltAnsi(renderResult.container));
      console.log(styles.css_VideoConnectionLinkageDraftCurrSelected);
      preview.debug();
      if (styles.css_VideoConnectionLinkageDraftCurrSelected == null) throw new TypeError();
    });
  });

add some npm package

•     "jest-preview": "^0.3.1",
      "postcss": "^8.4.32",
      "postcss-import": "^15.1.0",
      "postcss-load-config": "^5.0.2",
      "postcss-loader": "^7.3.3",
      "postcss-modules": "^6.0.0",
      "string-hash": "^1.1.3",

some comments

set up css transform

• following is not needed in my case:

  transform: {
    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file",
  

• following is not needed in my case:
  see https://www.jest-preview.com/docs/advanced-guides/code-transform

  transform: {
    '^.+\\.(css|scss|sass)$': './config/jest/cssTransform.cjs', 
  

• if you prefer cssTransform.cjs, you can use this instead, it will work.
  but only cjs works in my case, ts, js, mjs doesnt.

• the order of ts-jest vs jest-preview/transforms/css seems doesnt matter

• jest config setupFiles setupFilesAfterEnv were not used (they are there, but they are just empty)

import styles from .module.css in your test file & add some npm package

• the problem I had was:
  even after I setup the css transform in jest config file,
  no css module was imported,
  -- the style.css_WhateverName is always undefined.
  event though the jest-preview command works
  & the jest test does run normally.

• (other github issue & online posts didnt help
  tried so many ways to change & test & guess the transform, not working. )

• one thing did help when I run the jest test is:

  the error log told me to install postcss
  & told me to install other postcss package
  at some point, no more error logs

  however, occasionally some error log is printed,, when I run jest test,, after the transform config is changed.
  & it talks about other more postcss package & string-hash to install.

• can be related to Cannot process CSS modules in CRA #254