Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does module resolution in TypeScript work for global values (i.e. describe)?

While using jest on its own the corresponding typescript definitions got detected right after installing @types/jest.

I then started to implement integration tests with cypress. Since cypress is using mocha, I now incorrectly see references of mocha type definitions inside my jest tests. In fact, a number of overlapping type definitions are detected. For instance, describe seems to be defined in a number of files. I even tried to implement my own typing for describe pointing to jest. Unfortunately, every single time mocha "wins".

How can I specify the order of precedence when multiple definitions are detected by the typescript compiler?

multiple typescript definitions for describe

My tsconfig.json looks like this:

{
    "compilerOptions": {
        "target": "es5",
        "lib": [ "dom", "dom.iterable", "esnext" ],
        "types": [ "jest", "mocha" ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "strictNullChecks": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": false,
        "noEmit": true,
        "jsx": "preserve"
    },
    "include": [ "src/**/*" ]
}

However, I also tried the following:

{
    "compilerOptions": {
        "target": "es5",
        "lib": [ "dom", "dom.iterable", "esnext" ],
        "typeRoots": [ "./node_modules/@types", "./src/types" ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "strictNullChecks": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": false,
        "noEmit": true,
        "jsx": "preserve"
    },
    "include": [ "src/**/*" ]
}

In both cases mocha is being chosen. How can I switch the type for "describe & co." to jest?

like image 244
soosap Avatar asked May 15 '19 12:05

soosap


People also ask

What is module resolution TypeScript?

Module resolution is the process the compiler uses to figure out what an import refers to. Consider an import statement like import { a } from "moduleA" ; in order to check any use of a , the compiler needs to know exactly what it represents, and will need to check its definition moduleA .

What is the use of module in TypeScript?

A module is a way to create a group of related variables, functions, classes, and interfaces, etc. It executes in the local scope, not in the global scope. In other words, the variables, functions, classes, and interfaces declared in a module cannot be accessible outside the module directly.

Which of the following module resolution strategies are supported by the TypeScript compiler?

TypeScript includes two resolution strategies: Classic and Node.

Does TypeScript use CommonJS?

TypeScript supports export = to model the traditional CommonJS and AMD workflow. The export = syntax specifies a single object that is exported from the module. This can be a class, interface, namespace, function, or enum.


1 Answers

CompilerOptions.types allow you to restrict the typings you want to be available in the scope(folder)

You can try the following: Create a top level tsconfig.json with CompilerOptions.types = []

Inside test folder create tsconfig.json and choose jest typings CompilerOptions.types = ['jest']

Similarly inside integration folder, create tsconfig.json and choose mocha typings CompilerOptions.types = ['mocha']

like image 139
Abbas Cyclewala Avatar answered Sep 23 '22 11:09

Abbas Cyclewala