resolve modules in testcafe typescript tests

Question

I encountered the module resolving issue in my testcafe(1.17.1) test. I have a test

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

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

the <root>/src/MyComponent.tsx looks like this

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

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

When I run testcafe ./tests/test.e2e.ts, I always got the error Error: TypeScript compilation failed. Cannot find module '../scss/MyComponent.module.scss' or its corresponding type declarations. My testcafe tsconfig specified the path config, the <root>/scss-module-for-tests.ts just exports a empty string

// .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"]
        }
      }
    }
  }
}

However, seems typescript path config doesn't resolve relative path nor accept a regex, but My project has a lot of those ../scss/*module.scss imports. Is there anyway to resolve the scss file directly for testcafe?

Thanks in advance!

Update on 12/02/2021 I tried add compiler for testcafe according to this doc , I put a .testcaferc.json at the root folder

//.testcaferc.json at <root>
{
  "compilerOptions": {
    "typescript": {
      "options": {
        "esModuleInterop": "true"
      }
    }
  }
}

But seems the esModuleInterop=true config didn't reach to testcafe.

Update 12/13/2021: Not easy to configure it correctly, I removed the *.scss file reference in the test code. Problem solved.

Answer 1

It looks like your TestCafe tests' code references your testing application code. However, TestCafe tests do not require testing application code. In fact, the code of the TestCafe tests and the application can be divided into two separate projects. Please try to separate your web application code and your TestCafe tests' code.