Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cypress tests not recognizing node_modules package types

I'm having trouble with my Cypress tests for my (Typescript) application recognizing types for package I've installed. Here is my top-level directory structure:

cypress
node_modules
src

My cypress/tsconfig.json file looks like this:

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "paths": {
      "~/*": ["../src/*"]
    },
    "jsx": "react",
    "target": "es6",
    "lib": ["es6", "dom", "es2017.string"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

In one of my spec files, I have the following imports:

import * as faker from 'faker';
import { DeepPartial } from 'utility-types';

The types for faker are defined in DefinitelyTypes (@types/faker) whereas the types for utility-types are included as *.d.ts files in that package. The faker import has no problem, but the utility-types import is giving a Cannot find module 'utility-types' or its corresponding type declarations. error.

I've tried explicitly including the *.d.ts files from the node_modules directory to the tsconfig.json file under compilerOptions.types, compilerOptions.typeRoots, and include properties, but to no avail.

I also created "fake" (?) types like the following so it will compile:

declare module 'utility-types' {
  export type DeepPartial<T> = {};
}

This allows for the app to compile AND, at run-time, the packages are resolved so it appears the issue is with finding the types, not the modules themselves.

Why is Cypress not finding the types for these packages?

like image 493
im1dermike Avatar asked Sep 04 '20 14:09

im1dermike


Video Answer


1 Answers

You can try to set moduleResolution to node

https://www.typescriptlang.org/docs/handbook/module-resolution.html#module-resolution-strategies

I have tried to import utility-types with this configuration: the import works, and test run correctly

{
    "compilerOptions": {
      "strict": true,
      "baseUrl": "../node_modules",
      "paths": {
        "~/*": ["../src/*"]
      },
      "jsx": "react",
      "target": "es6",
      "lib": ["es6", "dom", "es2017.string"],
      "types": ["cypress"],
      "moduleResolution": "node"
    },
    "include": ["**/*.ts"]
  }
like image 200
dna Avatar answered Oct 05 '22 22:10

dna