Using testcafe with typescript and yarn pnp

[aultac]

What is your Scenario?

I'd like to use the latest typescript compiler for testcafe tests with yarn pnp which doesn't provide direct access to the typescript module (it's in a zip file instead).

What are you suggesting?

I don't think testcafe needs to do anything different other than add some documentation to help fellow travelers. You can get this to work with the following 2 steps:

1: unplug typescript from pnp to get it out of the zip file and into your local project:

yarn unplug typescript

2: Get the typescript file location in your .testcafe.js configuration file (it has to be a .js file, not a .json file):

const { execSync } = require('child_process');
const tscbin = execSync('yarn bin tsc').toString().trim();
const tscmodule = tscbin.replace('/bin/tsc','');

module.exports = {
  compilerOptions: {
    typescript: {
      configPath: "tsconfig.test.json",
      customCompilerModulePath: tscmodule,
    }
  }
}

What alternatives have you considered?

No response

Additional context

No response

[felis2803]

Hello @aultac,

Thanks for sharing this method. We will research it and let you know our results.

[Asuza]

@aultac, may I ask how you are starting your tests? I'm trying to get Yarn PnP + TypeScript + TestCafe working, and am running into this issue after making the changes you suggested.

PS C:\dev\projectroot\client> testcafe chrome '.\tc\Tests\**\*.test.ts'
\
error TS6053: File 'tc/Tests/**/*.test.ts' not found.
  The file is in the program because:
    Root file specified for compilation

error TS6231: Could not resolve the path 'chrome' with the extensions: '.ts', '.tsx', '.d.ts'.
  The file is in the program because:
    Root file specified for compilation

For reference, here is my .testcaferc.js file, based on yours:

const { execSync } = require('child_process');
const tscbin = execSync('yarn bin tsc').toString().trim();
const tscmodule = tscbin.replace('/bin/tsc','');

module.exports = {
  screenshots: {
    takeOnFails: true
  },
  compilerOptions: {
    typescript: {
      configPath: 'tc/tsconfig.json',
      customCompilerModulePath: tscmodule,
    }
  }
};

I have no idea why my testcafe chrome '.\tc\Tests\**\*.test.ts' command appears to be trying to find chrome as if it were a script to be compiled, or why it can't seem to find my tests. Thanks!

[aultac]

Do you need to run testcafe from yarn when you're on the command line (as opposed to in package.json)? i.e. yarn run testcafe ....

I used this for my testcafe config:

const { execSync } = require('child_process');
  
// You have to `yarn unplug typescript` to get access to this module for testcafe
const tscloc = execSync('yarn bin tsc').toString().trim().replace('/bin/tsc','');
  
module.exports = {
  src: "test/**/*.test.ts",
  browsers: "chrome",
  appCommand: "yarn run http-server .",
  appInitDelay: 200,
  debugOnFail: true,
  compilerOptions: {
    typescript: {
      configPath: "tsconfig.test.json",
      customCompilerModulePath: tscloc,
    }
  }
}

[miherlosev]

Duplicate of #7710