BabylonJS Typescript imports fail for MochaJS specs

Bugs
1

While attempting to set up a unit testing environment that involves MochaJS and BabylonJS, the importing of BabylonJS parts threw two kinds of errors:

  1. SyntaxError: Named export 'Camera' not found. for
import { Camera } from '@babylonjs/core/Cameras/camera.js';
  1. SyntaxError: Cannot use import statement outside a module.
    Tests are running with a dedicated tsconfig.json and a .mocharc.js config. This GitHub repo contains a full test and demo setup.
import camera from '@babylonjs/core/Cameras/camera.js';
const { Camera } = camera;

Comparison of the setup (configs, etc.) was made to Typestrong/ts-node-repros example repo.

Key facts:

  1. Node Version: 14.17.0
  2. Mocha: loader: 'ts-node/esm'
  3. package.json : "type": "module"
  4. TS config:
    { "compilerOptions": { "module": "ES2020", "target": "ES2020", "moduleResolution": "node", "esModuleInterop": true } }

Question: How can I import BabylonJS parts into the Mocha unit testing environment?

1 Like
2

Adding @sebavan

3

Did you check with the mocha ppl ? it seems an issue on their loader expecting only esm where our code is actually es5 with import es6 styles. Internally we for instance do not have the required .js and such but this is a great point @RaananW was actually checking as well recently ?

5

I would assume this is because our internal imports are not with .js endings.

Babylon.js code should not be tested, it is perfect!
Having said that, i guess in certain cases it makes sense to use it in testing :wink:

Can you share a reproduction of this?

6

Hi and thanks for your fast reply!

@RaananW There’s a link to a demo repo that you can use to reproduce the two errors. The short README explains how to trigger the two errors with a simple npm run command.

@sebavan I did not check with Mocha people as tests are running. I can just not figure out how the BabylonJS import could work. As you can see in the repo linked above, I use a tsconfig.json config file to define what the runtime is allowed to do. If you got a suggestion what to modify, I am happy to improve and learn.

Hope that helps and thanks in advance!

8

Has anybody had any new insights on this topic? If I can contribute something on top of the provided demo case, please let me know!

9

It looks like you are using a special loader ts-node/esm and I am wondering if you do not need another one to consume es6 import styles from our package in mocha. Did you check with them on Github or their forum ???

10

@sebavan thanks for the suggestion. I actually tried a couple of things, but it’s just shifting the problem around (read: solving one, opening another) as you can see in the several branches. I tried with Jasmine as well and ran into the same problem: With BabylonJS we are looking at an ES5 implementation that uses ES6 imports. Mocha, Jasmine and other teams will push us back (up the chain) as the unit of test evolves around BabylonJS.

11

In this case babel could transpile import style to es5 with the import transform plugin. This is actually what jest users are using.

12

I guess you are talking about this thread here?

13

The babel-plugin-transform-imports will probably not solve the issue here.

1 Like
14

To provide some more info: The demo-repo has been updated with a somehow “working” state. After several tries and lots of errors, I went with instant-mocha, which is a bundle that packages all the magic of Babel, Webpack, etc. The tsconfig.json and so on are provided. But I just worked around the issue.

When you install everything in the demo and run are-you-es5 check -r ., you’ll see the actual error - exactly as you described - with the imports. I am still searching for a real solution as I could not get the transpilation sorted in an order that just works and tackles the es6 imports. If you could provide some lines, I’d be grateful. Thanks in advance!

(And thanks for restoring the post!)

15

But this is exactly what the babel plugin should sort out transforming es6 import style to es5.

Adding @RaananW who might have other options ?

1 Like
16

i’ll download the code tomorrow and see if I can understand the issue better

1 Like
17

Hi there!

I’m facing the same problems as @fjk.

We’re working on a TS project using Webpack & BabylonJS and are a little stuck on making our code testable as importing certain classes from BabylonJS always breaks the tests with different errors.

We’re not “bound” to a specific testing framework ATM but we were not able to succeed with any we’ve tried so far (mocha, jest, jasmine).

Our experience is very similar to what @fjk describes. Especially “shifting the problem around (read: solving one, opening another)” pretty much brings it to the point.

In the end all issues we’ve seen so far have something to do with importing BJS classes into our tests.

I’d really appreciate some progress or help on this as well!

Thanks

19

I’ll set this issue to be a high priority, add it seems to be affecting different projects. As I was away till today it would be great to hear from you if it was resolved by you in any way.
Thanks!

2 Likes
20

@RaananW sure I will! Just ping me and tell me where I can contribute my time. Thanks in advance!

1 Like
21

hey! finally found the time to look into the code. After finalizing the install (i am running on windows so no sh commands for me :-)) I managed to run the tests:

image
image734Ă—256 5.29 KB

both passed on first run.

Note - I am running node 12 and not 14, but I don’t believe this is the case here.
I also had to install mocha in the project itself, as I don’t have it installed globally (which is probably the case on your system?

The repository has two npm run commands, but they are both undefined. there was only one test script, and it seems to be working.
Would be great to get it to fail though, so I will know what you are experiencing :slight_smile:

22

I had the same problem - I made a separate tsconfig for testing with target commonjs.
react-babylonjs/tsconfig.test.json at master · brianzinn/react-babylonjs (github.com)

In my script I also have “require esm”:
cross-env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha --require ts-node/register --require esm \"test/**/*.spec.{js,jsx,ts,tsx}\"

edit:
here is a vscode launch config for debugging tests with breakpoints as well:

{
          "type": "node",
          "request": "launch",
          "args": [
            "--require",
            "ts-node/register",
            "--require",
            "esm",
            "--timeout",
            "99999",
            "--colors",
            "${workspaceFolder}/test/**/*.spec.{ts,tsx}"
          ],
          "internalConsoleOptions": "openOnSessionStart",
          "name": "Mocha Tests",
          "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
          "skipFiles": [
            "<node_internals>/**"
          ],
          "env": {
            "TS_NODE_PROJECT": "tsconfig.test.json",
            "TS_NODE_TRANSPILE_ONLY": "true",
          },
          "runtimeArgs": [
            "--max-old-space-size=4096"
          ]
        }
2 Likes