Cannot import TailwindCSS in Jest

Viewed 429

Using React, NextJS, TailwindCSS(non JIT) and PostCSS. I'm trying to test React components in Jest with @testing-library/jest-dom and @testing-library/react.

// jest.config.js
{
  modulePathIgnorePatterns: ['node_modules', 'jest-test-results.json', 'cypress'],
  setupFiles: ['./tests/config.js'],
  setupFilesAfterEnv: ['./tests/config-after-env.js'],
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': 'identity-obj-proxy',
  },
}
// tailwind.config.js
const colors = require("./src/styles/colors.js");

module.exports = {
  purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx"],
  darkMode: false, // or 'media' or 'class'
  theme: {...extend...},
  variants: {},
  plugins: [require("@tailwindcss/line-clamp")],
};

I tried all the transformers I could find jest-css-modules, jest-transform-css, jest-css-modules-transform but no luck. It always fails with un unexpected token in the tailwind import line.

Basically I want to test elements in the component based on CSS, ie.

expect(...).not.toBeVisible();
// click button to show element
expect(...).toBeVisible();
0 Answers
Related