Jest react css issue

Asked by At

I am trying to integrate jest for a react SPA.

React app is create using

npx create-react-app my-app

I am trying to integrate Jest into it. "jest" and "babel-jest" dependencies are default integrated inside package.json. It is using version 23.* and I am not able to update it.

I am getting error while running a simple test. It calls for css file which is not resolved.

I tried,

1)

 "moduleNameMapper": {
    "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
  } 

2)

 "moduleNameMapper": {
    "\\.(css)$": "<rootDir>/src/__mocks__/styleMock"
 }

3)

 "moduleNameMapper": {
    "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js"
 }

4)

 "moduleNameMapper": {
    "\\.(css)$":"identity-obj-proxy"
 }

I run using "npm test" command.

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

I also tried adding below,

"transform": { ".*": "<rootDir>/node_modules/babel-jest" }

and,

  "moduleFileExtensions": [
    "js",
    "jsx",
    "json",
    "node",
    "scss",
    "ts",
    "tsx"
  ]

but nothing works.

  1 | import React, { Component } from "react";
> 2 | import "./login.css";
    | ^
  3 | import Image from "react-bootstrap/Image";
  4 | 
  5 | import default_picture from "./../assets/default_picture.jpg";

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
  at Object.<anonymous> (src/components/AppLogin.jsx:2:1)

0 Answers