Not working with Jest and typescript

[carlosrodrigues94]

I already tried so many solutions but i couldn't fix it

i will put all my configuration files here

// Error on yarn test

 FAIL  src/__tests__/components/FormAddress.spec.tsx
  ● Test suite failed to run

    Cannot find module '~/components/Forms/Address' from 'FormAddress.spec.tsx'

      3 | import { render } from '@testing-library/react';
      4 | 
    > 5 | import FormAddress from '~/components/Forms/Address';
        | ^
      6 | 
      7 | describe('FormAddressComponent', () => {
      8 |   it('should be able to create a address', () => {

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (src/__tests__/components/FormAddress.spec.tsx:5:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.577s
Ran all test suites related to changed files.

// config-overrides.js

const { addBabelPlugin, override } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
);

// jest_config.json /* i already tried with jest.config.json to*/

{
  "jest": {
   "testMatch": [
       "**/__tests__/**/*.spec.tsx"
    ],
   "moduleNameMapper": {
     "^~/(.*)": "<rootDir>/src/$1"
   },
   "setupFilesAfterEnv": [
     "@testing-library/react/cleanup-after-each",
     "@testing-library/jest-dom/extend-expect"
    ]
  }

}

// tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "extends": "./tsconfig.paths.json",
  "include": [
    "src"
  ]
}

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

// package.json

{
  "name": "bumindustryweb",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/react-hooks": "^3.4.1",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^26.0.14",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-datepicker": "^3.1.1",
    "@types/react-dom": "^16.9.0",
    "axios": "^0.20.0",
    "cep-promise": "^4.0.0",
    "date-fns": "^2.16.1",
    "history": "4.10.1",
    "immer": "^7.0.8",
    "polished": "^3.6.6",
    "react": "^16.13.1",
    "react-datepicker": "^3.1.3",
    "react-day-picker": "^7.4.8",
    "react-dom": "^16.13.1",
    "react-icons": "^3.11.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-toastify": "^6.0.8",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "^1.1.3",
    "styled-components": "^5.2.0",
    "typescript": "~3.7.2",
    "uuid": "^8.3.0",
    "yup": "^0.29.3"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@commitlint/cli": "^9.1.2",
    "@commitlint/config-conventional": "^9.1.2",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "@types/styled-components": "^5.1.3",
    "@types/uuid": "^8.3.0",
    "@types/yup": "^0.29.6",
    "@typescript-eslint/eslint-plugin": "^4.1.0",
    "@typescript-eslint/parser": "^2.29.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-root-import": "^6.5.0",
    "commitizen": "^4.2.1",
    "customize-cra": "^1.0.0",
    "cz-conventional-changelog": "3.3.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
    "eslint-import-resolver-typescript": "^2.0.0",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-import-helpers": "^1.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4",
    "husky": "^4.3.0",
    "prettier": "^2.1.1",
    "react-app-rewired": "^2.1.6",
    "ts-jest": "^26.4.0"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

[prescindivel]

what the solution?

[Mpsrolim]

what the solution?

[carlosrodrigues94]

On the package.json you can put a jest config, inside jest config i can add the property "moduleNameMapper" this property is used by jest to resolve the path aliases

  "jest": {
    "collectCoverageFrom": [
      "src/functional/pages/**/*tsx",
      "src/functionalcomponents/**/*tsx",
      "src/functionalhooks/**/*tsx",
      "src/functionalutils/**/*ts"
    ],
    "testMatch": [
      "**/__tests__/**/*.spec.tsx",
      "**/__tests__/**/*.spec.ts"
    ],
    "testPathIgnorePatterns": [
      "/src/__tests__/wrapper.tsx"
    ],
    "moduleNameMapper": {
      "^~/(.*)": "<rootDir>/src/$1"
    },
    "verbose": true
  }