testing problem with NMRium

[hamed-musallam]

@targos

when i try to test NMRium in another project with https://testing-library.com/, I get this error related to d3 which we imported in different places in nmrium, https://github.com/cheminfo/nmrium/blob/master/src/component/1d/utilities/scale.ts and there are other places

Error: require() of ES Module C:\dev-projects\nmrium-react-wrapper\node_modules\d3\src\index.js from C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\1d\utilities\scale.js not supported.

Instead change the require of index.js in C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\1d\utilities\scale.js to a dynamic import() which is available in all CommonJS modules.

[targos]

I may help you with Playwright as that's what we use to test nmrium here, but I don't have knowledge of Testing Library.

[hamed-musallam]

@targos thanks

[hamed-musallam]

@targos

the same problem from NMRium when including it into another project and using the playwright package for testing, I use it with the same configuration that you use in NMRium

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\dev-projects\nmrium-react-wrapper\node_modules\d3\src\index.js from C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\1d\utilities\scale.js not supported.
Instead change the require of index.js in C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\1d\utilities\scale.js to a dynamic import() which is available in all CommonJS modules.

   at ..\node_modules\nmrium\lib-cjs\component\1d\utilities\scale.js:4

  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.reScaleY = exports.getIntegralYScale = exports.getYScale = exports.getXScale = void 0;
> 4 | const d3_1 = require("d3");
    |              ^
  5 | function getXScale(state, spectrumId = null) {
  6 |     const { width, margin, xDomains, xDomain, mode } = state;
  7 |     const range = mode === 'RTL'

    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\1d\utilities\scale.js:4:14)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\reducer\helper\getRange.js:3:17)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\reducer\actions\RangesActions.js:39:36)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\reducer\actions\CorrelationsActions.js:11:25)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\reducer\Reducer.js:40:42)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\context\ChartContext.js:5:19)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\2d\Viewer2D.js:35:24)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\1d\Viewer1D.js:34:20)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\nmrium\lib-cjs\component\NMRium.js:37:36)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\src\actions\types.ts:3:15)
    at Module.F._compile (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\utilsBundleImpl.js:16:994)
    at Object.t.<computed>.uu._extensions.<computed> [as .ts] (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\utilsBundleImpl.js:16:1010)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\src\observables\index.ts:10:14)
    at Module.F._compile (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\utilsBundleImpl.js:16:994)
    at Object.t.<computed>.uu._extensions.<computed> [as .ts] (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\utilsBundleImpl.js:16:1010)
    at Object.<anonymous> (C:\dev-projects\nmrium-react-wrapper\test-e2e\core.test.ts:7:43)
    at Module.F._compile (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\utilsBundleImpl.js:16:994)
    at Object.t.<computed>.uu._extensions.<computed> [as .ts] (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\utilsBundleImpl.js:16:1010)
    at Loader._requireOrImport (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\loader.js:276:14)
    at Loader.loadTestFile (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\loader.js:164:18)
    at Runner._runFiles (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\runner.js:289:44)
    at Runner._run (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\runner.js:224:23)
    at async TimeoutRunner.run (C:\dev-projects\nmrium-react-wrapper\node_modules\playwright-core\lib\utils\timeoutRunner.js:53:14)
    at async raceAgainstTimeout (C:\dev-projects\nmrium-react-wrapper\node_modules\playwright-core\lib\utils\timeoutRunner.js:113:15)
    at async Runner.runAllTests (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\runner.js:182:20)
    at async runTests (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\cli.js:162:18)
    at async Ai.<anonymous> (C:\dev-projects\nmrium-react-wrapper\node_modules\@playwright\test\lib\cli.js:70:7)

[targos]

can you share part of the code that fails? At least the test.

[hamed-musallam]

@targos

it was a mistake from my side, I import a custom function that cause this problem, and now Playwright works as expected locally but the workflow does not, I run the build and run the server locally and it works without any problem, what do you think the problem. The workflow is a clone version of yours

https://github.com/NFDI4Chem/nmrium-react-wrapper/tree/development