Unable to load .mjs file and run tests with Mocha - mocha.js

I am unable to load an .mjs file and run tests with mocha.
I have tried mocha v.7.2.0 with flag --experimental-modules and v.10.0.0 without flag.
I am using node v.14.15.4.
The import statement that I have in my code to test is:
import * as XLSX from 'xlsx/xlsx.mjs';
NB: this import statement works 100% fine while building my app with Webpack.
The error I get when I try to run unit tests on this code with Mocha is:
(node:5452) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
C:\Users......webapp\node_modules\xlsx\xlsx.mjs:81
export { set_cptable };
^^^^^^
SyntaxError: Unexpected token 'export' at wrapSafe (internal/modules/cjs/loader.js:979:16)
My mocha invocation is a vanilla mocha \"src/**/*.spec.js\", which I call through an npm task; as I mentioned before, flag --experimental-modules does not help.
My .babelrc, which (I suspect) is used to transpile my code, is the following:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"react-hot-loader/babel",
["module-resolver", {
"alias": {
"#src": "./src"
}
}]
],
"env": {
"coverage": {
"plugins": [
"istanbul"
]
}
}
}
What can I do to solve this problem?

Related

Getting svelte-material-ui working with snowpack and sass

I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui

TS-Node with Mocha doesn't use TS_NODE_PROJECT

I'm having trouble with using the env variable TS_NODE_PROJECT when ts-node is used for testing using Mocha.
The project structure looks like this:
src/
main_test.ts
tsconfig.json
package.json
In my test, I want to use an async function, which requires "lib": ["es2018"] as a compilation option.
// src/main_test.ts
describe('', () => {
it('test', () => {
(async function() {})()
});
});
// src/tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"lib": ["es2018"]
},
"exclude": [
"../node_modules"
]
}
To run the test, I use this command, but it results in an error:
TS_NODE_PROJECT='src' && mocha --require ts-node/register src/*_test.ts
# TSError: ⨯ Unable to compile TypeScript:
# error TS2468: Cannot find global value 'Promise'.
# src/main_test.ts(3,10): error TS2705: An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your `--lib` option.
This means that src/tsconfig.json is not used. According to Overriding `tsconfig.json` for ts-node in mocha
and the ts-node documentation, the command should pass the correct tsconfig.json path to ts-node.
Moving src/tsconfig.json to project directory and running the same command causes the test to succeed. How can I pass the tsconfig.json path to ts-node so that the test compiles correctly?
Oh. How embarrassing...
TS_NODE_PROJECT='src/tsconfig.json' mocha --require ts-node/register src/*_test.ts
I find very useful to move mocha setup in different files so package.json remains clean, you can use a mocharc file like this:
module.exports = {
ignore: [
'./test/helpers/**/*',
'./test/mocha.env.js'
],
require: [
'test/mocha.env', // init env here
'ts-node/register'
],
extension: [
'ts'
]
}
and then create the file test/mocha.env.js (or call it as you wish) with this content:
process.env.NODE_ENV = 'test'
process.env.TS_NODE_PROJECT = 'src/tsconfig.json'

karma-typescript: import JS file with Async keyword

I'm using karma-typescript, with this karma config file :
karmaTypescriptConfig: {
compilerOptions: {
target: "es5",
lib: ["dom", "es2015", "es2017"]
},
bundlerOptions: {
transforms: [require("karma-typescript-es6-transform")()]
}
},
In my spec files, I have this code :
import {} from './local/lib.js'
In my lib.js, I have this code :
async function() {}
When executing my tests with npm test, I have this error :
ERROR [source-reader.karma-typescript] Error parsing code: Unexpected token (X:Y) in /local/lib.js
If I remove the async keyword, everything is alright.
How can I edit my karma config file to fix the error ?
According to an issue in the Github of the karma-typescript package (https://github.com/monounity/karma-typescript/issues/344), there is an undocumented flag which may help you test code which contains ES2017 code:
karmaTypescriptConfig: {
compilerOptions: {
target: "es5",
lib: ["dom", "es2015", "es2017"]
},
bundlerOptions: {
acornOptions: {
ecmaVersion: 8,
},
transforms: [require("karma-typescript-es6-transform")()]
}
},
This flag made appear our issues with the async keyword. However, there is still an issue with the spread syntax (...array) in our code, even using this flag. If anyone knows an answer how to also fix that, I will happily extend my answer.

Relative #imports break ng-packagr with error "returned value of `file` must be a string"

We recently updated our Angular Dependencies to 6, and now ng-packagr breaks with the listed error. with ng serve and ng build, the import strategy...
#import "~src/scss/variables"
works fine. When ng packagr gets to the Rendering Stylesheets portion, it breaks with the error above.
This is my ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts",
"externals": {
"#angular/animations": "ng.animations"
}
},
"whitelistedNonPeerDependencies": ["."]
}
Is there an option I'm missing?

mocha fails to transpile react-native-i18n

I'm working on testing react-native components, however when I run mocha with babel-core transpiler and this .babelrc:
{
"presets": [ "react", "es2015", "stage-2" ]
}
I get:
let { Platform, NativeModules } = require('react-native')
SyntaxError: Unexpected token {
This line lives in react-native-i18n/index.js
I'm running mocha in harmony mode.

Resources