migrate target from es5 to es6 in browser and test runner

Question

I have some code in typescript

DTMEdge.ts
DTMNode.ts
DTreeMap.ts

resulting after compilation in

wwwroot
- js
  - dtree
    - DTMEdge.js
    - DTMNode.js
    - DTreeMap.js

basically each ts file looks like

export class DTxxx {
    ....
}

DTreeMap.ts starts with

import { DTMEdge } from "./DTMEdge";
import { DTMNode } from "./DTMNode";

with "target": "es5" in tsconfig.json I can:

use the resulting code in a browser by importing it via

    <script src="/js/dtree/DTMEdge.js"></script>
    <script src="/js/dtree/DTMNode.js"></script>
    <script src="/js/dtree/DTreeMap.js"></script>

run test with mocha, the test file begining with:

    const assert = require('assert');
    const { DTMEdge} = require('../wwwroot/js/dtree/DTMEdge.js');
    const { DTMNode } = require('../wwwroot/js/dtree/DTMNode.js');
    const { DTreeMap } = require('../wwwroot/js/dtree/DTreeMap.js');

when I switch to "target": "es6" in tsconfig.json I can:

use the resulting code in a browser by importing it via

<script type="module">
    import {DTMNode} from "./js/dtree/DTMNode.js"
    import {DTMEdge} from "./js/dtree/DTMEdge.js"
    import {DTreeMap} from "./js/dtree/DTreeMap.js"

But I can't run my test with the following error:

...\wwwroot\js\dtree\DTMEdge.js:1
export class DTMEdge {
^^^^^^

SyntaxError: Unexpected token 'export'
...

How can'I get my tests run when I target es6 ?

Does this answer your question? [Getting Unexpected Token Export](https://stackoverflow.com/questions/38296667/getting-unexpected-token-export) — gunwin, Dec 15 '21 at 16:02
@gunwin renaming every file to .mjs inclufing the test file and importing with `import { DTMEdge } from '../wwwroot/js/dtree/DTMEdge.mjs';`, I insist on the {} solves the problem. BUT, I now loose the ability to use the Visual Studio Test Explorer. I had to dig into the doc to see if I can specify a file extention csproj file. — tschmit007, Dec 15 '21 at 17:22

score 0 · Answer 1 · answered Dec 16 '21 at 16:01

the solution is:

rename test file as .mjs
copy each file to filename.mjs
edit test script accordingly:

import { DTMEdge } from '../wwwroot/js/dtree/DTMEdge.mjs';
import { DTMNode } from '../wwwroot/js/dtree/DTMNode.mjs';
import { DTreeMap }  from '../wwwroot/js/dtree/DTreeMap.mjs';

edit package.json

  "scripts": {
    "test": "mocha --recursive './tests/*.*js'"
  }

et voilà:

npm test

runs.

migrate target from es5 to es6 in browser and test runner

1 Answers1