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

Question

我在 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文件引用。问题解决了。

Answer 1

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