CODEWITHSUNDEEP
reactjstypescriptjestjsreact-testing-library
Henrique Tavares
Henrique Tavares

Reputation: 123

How to use Root Import with React Testing Library in React?

When I import my components or pages to test in my ".spec.tsx" file it does not recognize Babel Root Import.

enter image description here

Is there any way to configure my ".spec.tsx" to recognize "~" as my Root Import?

The Project Base: https://github.com/tavareshenrique/go-barber-web-ts

My Code:

import React from 'react';
import { render } from '@testing-library/react';

import SignIn from '~/pages/SignIn';

describe('SignIn Page', () => {
  it('should be able to sign in', () => {
    const { debug } = render(<SignIn />);

    debug();
  });
});

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "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"
  ]
}

My tsconfig.paths.json:

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

My .eslintrc.json:

{
  "env": {
    "browser": true,
    "es6": true,
    "jest":true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "no-unused-expressions": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
    "import/prefer-default-export": "off",
    "import/no-duplicates": "off",
    "@typescript-eslint/interface-name-prefix": ["error", { "prefixWithI": "always" }],
    "@typescript-eslint/camelcase": "off",
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {},
      "babel-plugin-root-import": {
        "rootPathPrefix": "~",
        "rootPathSuffix": "src"
      }
    }
  }
}

Upvotes: 0

Views: 958

Answers (1)

Henrique Tavares
Henrique Tavares

Reputation: 123

I solved the problem, I just needed to add Jest settings to my package.json

"jest": {
   "moduleNameMapper": {
      "~(.*)$": "<rootDir>/src/$1"
   }
}

It stays here for those who go through the same problem.

Upvotes: 4

Related Questions