testplane icon indicating copy to clipboard operation
testplane copied to clipboard

testplane does not support ESM configuration files and .ts extension for test files

Open BlackPoretsky opened this issue 1 year ago • 3 comments

Verify latest release

  • [ ] I verified that the issue exists in the latest Hermione release

Hermione version

8.23.1

Last Hermione version that worked

No response

Which area(s) of Hermione are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

No response

Reproduction steps

  1. Create a configuration file for Testplane with the html-reporter plugin. (npm init testplane -- -v with pnpm) Configuration:
import type { ConfigInput } from 'testplane';

export default {
  baseUrl: 'http://localhost',
  browsers: {
    chrome: {
      automationProtocol: 'devtools',
      desiredCapabilities: {
        browserName: 'chrome'
      },
      headless: true
    }
  },
  gridUrl: 'http://localhost:4444/wd/hub',
  httpTimeout: 60000,
  pageLoadTimeout: 0,
  plugins: {
    '@testplane/storybook': {
      autoScreenshots: true,
      // https://github.com/gemini-testing/hermione-storybook
      // To run hermione storybook tests, use --storybook flag when launching hermione
      // And dont forget to set 'buildStoriesJson: true' in storybook config if you use storybook@6
      enabled: true,
      localport: 6006,
      storybookConfigDir: '.storybook'
    },
    '@testplane/test-filter': {
      // https://github.com/gemini-testing/testplane-test-filter
      enabled: true,
      inputFile: 'testplane-filter.json'
      // Create a file testplane-filter.json
      // With the following structure:
      // [
      //     {
      //         \"fullTitle\": \"some-title\",
      //         \"browserId\": \"some-browser\"
      //     }
      // ]
    },
    '@testplane/url-decorator': {
      // https://github.com/gemini-testing/testplane-url-decorator
      enabled: true,
      url: {
        query: {
          // Write your entries like \"text\": \"ololo\" to add query param &text=ololo
          // You can also specify \"mode\": \"override\", if you need to overwrite existing param
        }
      }
    },
    'html-reporter/testplane': {
      defaultView: 'all',
      diffMode: '3-up-scaled',
      // https://github.com/gemini-testing/html-reporter
      enabled: true,
      path: 'testplane-report'
    }
  },
  resetCursor: false,
  sets: {
    desktop: {
      browsers: ['chrome'],
      files: ['**/tests/*.testplane.(t|j)s']
    }
  },
  testTimeout: 90000
} satisfies ConfigInput;
  1. Install the Testplane extension for VS Code.
  2. Open the Testplane extension.

Actual Behavior

When opening the extension, the following error message appears in the OUTPUT tab:

[WORKER 01:35:06] [01:35:06 +0300] Unable to read config from path e:\WEB_LEARN\SinsSoftware\Flippo\flippo-frontend\testplane.config.ts

[ERROR 01:35:06] Error: Testplane failed to start: 
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: e:\WEB_LEARN\SinsSoftware\Flippo\flippo-frontend\testplane.config.ts
require() of ES modules is not supported.
require() of e:\WEB_LEARN\SinsSoftware\Flippo\flippo-frontend\testplane.config.ts from E:\WEB_LEARN\SinsSoftware\Flippo\flippo-frontend\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected][email protected]_@type_2uf5nugpmtuodxde2bpdmktqoy\node_modules\testplane\build\src\config\index.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from e:\WEB_LEARN\SinsSoftware\Flippo\flippo-frontend\package.json.

Even when running via npx testplane instead of using the VS Code extension, the same error occurs.

After replacing the configuration file extension with .cts and using module.exports = {} syntax, the following issue occurs:

  • The html-reporter plugin creates a folder with the necessary files (e.g., database and other artifacts).
  • However, the .ts test files (e.g., example.testplane.ts) are not recognized, resulting in the following error:
[ERROR 03:35:26] TypeError: Unknown file extension ".ts" for E:\WEB_LEARN\SinsSoftware\Flippo\flippo-frontend\src\tests\example.testplane.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:141:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at async link (node:internal/modules/esm/module_job:76:21)

Expected Behavior

The expected behavior aligns with the example provided in the Testplane blog: testing-sidebar-f3c667ae110b1c90f9c5c7f2a5ab70d0

Which Node.js version are you using?

20.10.0

BlackPoretsky avatar Jan 06 '25 01:01 BlackPoretsky

It seems the issue lies in the Config class, specifically in the read method, where require() is used, causing a conflict with ESM. https://github.com/gemini-testing/testplane/blob/812bfe8ae89c2cf994c15f2f2472c5ac35c16a0d/src/config/index.ts#L20

To be honest, I don’t quite understand why import is used at the top of the file, while require is used for dynamic imports. Why not use import("path") instead? If require is necessary, perhaps it should be done using import { createRequire } from "module";.

BlackPoretsky avatar Jan 06 '25 14:01 BlackPoretsky

Hello. We will fully support ESM in next major version - https://github.com/gemini-testing/testplane/issues/854.

Thank you for your investigation.

DudaGod avatar Jan 09 '25 12:01 DudaGod

Is there an ETA for v9?

real-alexei avatar Jan 25 '25 19:01 real-alexei