Jest nie działa w projekcie TypeScript z "baseUrl"

0

Mam apkę react /ts, w której dla skrócenia ścieżek w importach napisałam w tsconfig.json

"baseUrl": "src",
        "paths": {
            "types/*": ["types/*"],
            "hooks/*": ["hooks/*"],
            "models/*": ["models/*"],
            "components/*": ["components/*"],
            "js/*": ["js/*"],
            "pages/*": ["pages/*"],
            "HOCs/*": ["HOCs/*"],
            "functions/*": ["functions/*"],
            "routing/*": ["routing/*"]
        }

dla skrócenia ścieżek w importach. I to działa w apce.

Niestety nie działa w testach (JEST).
Krótko mówiąc, nie rozpoznaje ścieżki. Błąd jest taki:

Cannot find module 'components' from 'src/Pages/YouTubePage/YouTubePage.tsx

a linia, która działa poprawnie w runtime taka

import { TopBar, Slider, Player, NotLogged, LoadingIndicator, Message } from "components";

Niestety tylko w runtime, bo nie w testach.
Ktoś ma pomysł co zrekonfigurować, żeby złapało?

3

jest wymaga osobnej definicji w jego pliku konfiguracyjnym


module.exports = {
    'moduleNameMapper': {
         '@components/(.*)': '<rootDir>/src/components/$1'
         // i analogicznie wszystkie inne
    }
};

nie ustawiałem lokalnie projektu, żeby sprawdzić czy działa, ale powinno

1

Jest paczka ts-jest, która pomaga między innymi przemapować ścieżki z tsconfig na jest

https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping/

0

Za radą dzek69 dodałam, i mialam wrażenie że podziałało. Wtedy postawiłam wątek o następnym błędzie. Ale teraz okazuje się że powrócił ten błąd


import type { Config } from "@jest/types";

const config: Config.InitialOptions = {
    roots: ["<rootDir>/src"],
    transform: {
        "^.+\\.tsx?$": "ts-jest",
        "^.+\\.css$": "<rootDir>/jest-config/style-mock.js",
        "^.+\\.jsx?$": "babel-jest",
    },
    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(tsx|jsx)?$",
    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
    testEnvironment: "jsdom",
    collectCoverage: false,
    collectCoverageFrom: ["src/**/*.{ts,tsx}"],
    moduleNameMapper: {
        "^.+\\.(css|sass|scss)$": "identity-obj-proxy",
    },
};

module.exports = {
    moduleNameMapper: {
        "@components/(.*)": "<rootDir>/src/components/$1",
    },
};

export default config;

Czy składniowo to ma tak wyglądać? Niezbyt mi to pasuje, ale w postaci, w jakiej jest, nie bardzo daje się wkleić do środka config.

0

Na pewno cała konfiguracja powinna być wyeksportowana jako jeden obiekt

import type { Config } from "@jest/types";

const config: Config.InitialOptions = {
    roots: ["<rootDir>/src"],
    transform: {
        "^.+\\.tsx?$": "ts-jest",
        "^.+\\.css$": "<rootDir>/jest-config/style-mock.js",
        "^.+\\.jsx?$": "babel-jest",
    },
    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(tsx|jsx)?$",
    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
    testEnvironment: "jsdom",
    collectCoverage: false,
    collectCoverageFrom: ["src/**/*.{ts,tsx}"],
    moduleNameMapper: {
        "^.+\\.(css|sass|scss)$": "identity-obj-proxy",
        "@components/(.*)": "<rootDir>/src/components/$1",
        // + pozostałe ścieżki z tsconfig
    },
};

export default config;
// module.exports = config;

standardowo <rootDir> wskazuje główny folder z lokalizacją pliku package.json, więc musisz dopasować ścieżki według struktury projektu

1 użytkowników online, w tym zalogowanych: 0, gości: 1