Cypress项目从JS迁移TS后导入JSON文件提示找不到模块

问题背景 #

将Cypress项目从JavaScript迁移至TypeScript后，Login.ts文件出现模块找不到的报错：

Cannot find module '../../fixtures/users/user' or its corresponding type declarations.
Cannot find module '../../fixtures/users/admin' or its corresponding type declarations.

Login.ts原代码：

import user from "../../fixtures/users/user"
import admin from "../../fixtures/users/admin"

class Login {
        // 业务代码
}

项目中fixtures/users/目录下存在admin.json和user.json，文件内容示例：

{
    "val": {
        "firstname": "Alex",
        "lastname": "Shepherd"
    }
}

已尝试的方案：

• 在tsconfig.json中添加配置：

"resolveJsonModule": true,
"esModuleInterop": true

• 修改导入语句添加.json后缀：

import user from "../../fixtures/users/user.json"
import admin from "../../fixtures/users/admin.json"

当前方案可解决报错，但不确定是否为最优解，想确认是否有遗漏。

最优方案推荐 #

你的当前做法是有效的，但更贴合Cypress最佳实践的方式是使用Cypress内置的cy.fixture()方法读取测试数据，而非直接导入JSON文件：

class Login {
  getUserData() {
    return cy.fixture('users/user');
  }

  getAdminData() {
    return cy.fixture('users/admin');
  }

  // 示例使用
  loginAsUser() {
    this.getUserData().then(user => {
      // 使用user.val.firstname等数据执行登录操作
      cy.get('#username').type(user.val.firstname);
      // ...其他登录步骤
    });
  }
}

这种方式的优势： #

• 适配Cypress异步测试模型，无需额外处理模块导入的类型兼容问题
• 无需修改tsconfig.json的resolveJsonModule配置
• Cypress自动处理fixture路径解析，避免相对路径维护麻烦
• 支持Cypress内置的fixture缓存机制，提升测试执行效率

若坚持直接导入JSON的优化方案 #

如果更倾向于直接导入的方式，除了已做的配置，还可以添加类型声明来完善TypeScript的类型提示：

1. 在fixtures/users目录下创建user-fixtures.d.ts类型声明文件：

// 定义fixture数据的类型
export interface UserFixture {
  val: {
    firstname: string;
    lastname: string;
  };
}

// 声明JSON模块
declare module '*.json' {
  const value: UserFixture;
  export default value;
}

2. 确保tsconfig.json的include字段包含该声明文件：

"include": [
  "cypress/**/*",
  "fixtures/**/*.d.ts"
]

这样不仅能彻底解决报错，还能获得完整的类型校验和IDE智能提示。

内容的提问来源于stack exchange，提问作者KiritoLyn