在 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文件的？

提前致谢！

更新于 12/02/2021 我尝试根据此 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 测试代码分开。

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

resolve modules in testcafe typescript tests

reactjs

typescript

testing

automated-tests

testcafe