解析 testcafe 打字稿测试中的模块

Posted 2023-02-18

【中文标题】解析 testcafe 打字稿测试中的模块

【英文标题】：resolve modules in testcafe typescript tests

【发布时间】：2022-01-07 16:25:38

【问题描述】：

我在 testcafe(1.17.1) 测试中遇到了模块解析问题。 我有一个测试

//test.e2e.ts in <root>/tests folder
import MyComponent from '../src/MyComponent';
...
...
fixture('Custom domain tests');

test('test 1', async () => 
  ...
  ...
);

<root>/src/MyComponent.tsx 看起来像这样

//MyComponent.tsx in <root>/src folder
import React,  FunctionComponent  from 'react';
import styles from '../scss/MyComponent.module.scss';

export const MyComponent: FunctionComponent = () => 
  ...
  ...

当我运行testcafe ./tests/test.e2e.ts 时，总是出现错误 Error: TypeScript compilation failed. Cannot find module '../scss/MyComponent.module.scss' or its corresponding type declarations. 我的testcafe tsconfig 指定了路径配置，<root>/scss-module-for-tests.ts 只是导出一个空字符串

// .testcaferc.json in <root>/

  "compilerOptions": 
    "typescript": 
      "options": 
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": 
          "../scss/MyComponent.module.scss": ["scss-module-for-tests.ts"],
          "*.scss": ["scss-module-for-tests.ts"]
        
      
    
  

然而，打字稿路径配置似乎不解析相对路径也不接受正则表达式，但我的项目有很多 ../scss/*module.scss 导入。有没有办法直接为testcafe解析scss文件？

提前致谢！

2021 年 12 月 2 日更新 我尝试根据这个doc为testcafe添加编译器，我在根文件夹中放了一个.testcaferc.json

//.testcaferc.json at <root>

  "compilerOptions": 
    "typescript": 
      "options": 
        "esModuleInterop": "true"
      
    
  

但似乎 esModuleInterop=true 配置没有到达 testcafe。

2021 年 12 月 13 日更新： 不容易正确配置，我去掉了测试代码中的*.scss文件引用。问题解决了。

【参考方案1】：

您的 TestCafe 测试代码似乎引用了您的测试应用程序代码。但是，TestCafe 测试不需要测试应用程序代码。事实上，TestCafe 测试和应用程序的代码可以分为两个独立的项目。请尝试将您的 Web 应用程序代码和您的 TestCafe 测试代码分开。

【讨论】：

谢谢@aleks-pro，真的，我的测试代码是指应用程序代码，我会拆分和重构它们。不过这样的应用代码参考太多了，希望我可以先配置一下testcafe，让它工作起来。

尝试为 typescript 编译器选项添加 .testcaferc.json，但 testcafe 似乎忽略了我的配置

没有样本很难找到问题的原因。您能否分享一个我们可以重现该问题的项目示例？您可以从中删除所有敏感数据。