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();