How to fix 'STACK: ReferenceError: [BABEL]' at running jest tests - vue.js

at running npm test i get the following error for every existing typescript class.
im using vue, jest
STACK: ReferenceError: [BABEL] ... Unknown option: base.cwd. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`

Related

Jest / ESLint fail is not defined

I've just generated a fresh project with npx react-native init and ESLint is complaining in one of my test files:
9:1 error 'describe' is not defined no-undef
12:5 error 'beforeEach' is not defined no-undef
16:5 error 'afterEach' is not defined no-undef
20:5 error 'test' is not defined no-undef
28:17 error 'fail' is not defined no-undef
30:13 error 'expect' is not defined no-undef
Based on the docs and this thread, I've added:
env: {
jest: true,
},
to my .eslintrc.js file. However, ESLint is still complaining with:
28:17 error 'fail' is not defined no-undef
Has anyone already experienced and solved this issue ?
Here are the jest dependencies versions in package.json:
"babel-jest": "^26.5.2",
"jest": "^26.5.3",
Ok so it turns out Jest uses Jasmine's fail().
Updated .eslintrc.js by adding Jasmine and it works. No more errors.
env: {
jasmine: true,
jest: true,
},
The former runner, jest-jasmine2, is deprecated in Jest since 27.0.0
and jest-circus is getting used instead.
Update .eslintrc.js
env: {
jest: true,
circus: true,
}

Error: Compile Error: bootstrap-datepicker is not a helper

I am using
https://www.npmjs.com/package/ember-cli-bootstrap-datepicker and Ember 2.18
package.json in devDependencies:
"ember-cli-bootstrap-datepicker": "0.6.1",
in hbs:
{{bootstrap-datepicker format="dd.mm.yy"}}
error after ember test:
actual: >
null
stack: >
Error: Compile Error: bootstrap-datepicker is not a helper
at http://localhost:7357/assets/vendor.js:21757:19
at Compilers.compile (http://localhost:7357/assets/vendor.js:21369:13)
at expr (http://localhost:7357/assets/vendor.js:21720:25)
at http://localhost:7357/assets/vendor.js:21458:17
at Compilers.compile (http://localhost:7357/assets/vendor.js:21369:13)
at compileStatement (http://localhost:7357/assets/vendor.js:22127:20)
at compileStatements (http://localhost:7357/assets/vendor.js:22132:13)
at CompilableTemplate.compileStatic (http://localhost:7357/assets/vendor.js:22157:31)
at http://localhost:7357/assets/vendor.js:18256:30
at AppendOpcodes.evaluate (http://localhost:7357/assets/vendor.js:17481:13)
message: >
Died on test #1 at Module.callback (http://localhost:7357/assets/tests.js:1333:24)
at Module.exports (http://localhost:7357/assets/vendor.js:119:32)
at requireModule (http://localhost:7357/assets/vendor.js:34:18)
at TestLoader.<anonymous> (http://localhost:7357/assets/test-support.js:10892:11)
at TestLoader.require (http://localhost:7357/assets/test-support.js:10882:27)
at TestLoader.loadModules (http://localhost:7357/assets/test-support.js:10874:16)
at loadTests (http://localhost:7357/assets/test-support.js:12321:22): Compile Error: bootstrap-datepicker is not a helper
negative: >
false
browser log: |
...
funny fact, if i remove format="dd.mm.yy" from {{}}, then it won't throw error. What am i supposed to add or what am i missing to test to work ? package's doc doesn't say anything
edit: i have seen this, ember Error: Compile Error: is not a helper, it seems i have everything right

Error "Cannot read property 'indexOf' of undefined" binding n-api module

I wrote a c++ module using n-api, compiled it with cmake-js and now want to use it in my electron-vue app. If I use the module in a project without electron-vue it works. But when I try to use it in my electron-vue app I'm always getting this error:
App threw an error during load
TypeError: Cannot read property 'indexOf' of undefined
at Function.getFileName (D:\temp\test2\node_modules\bindings\bindings.js:178:16)
at bindings (D:\temp\test2\node_modules\bindings\bindings.js:82:48)
at eval (webpack:///./src/main/index.js?:28:67)
at Module../src/main/index.js (D:\temp\test2\dist\electron\main.js:3822:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///./src/main/index.dev.js?:11:1)
at Object../src/main/index.dev.js (D:\temp\test2\dist\electron\main.js:3810:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///multi_./src/main/index.dev.js_./src/main/index.js?:1:1)
at Object.0 (D:\temp\test2\dist\electron\main.js:3880:1)
I'm using bindings like so:
const colorBalance = require('bindings')('colorBalance');
I have tried to define my module as external according to this but it didn't solve the problem:
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
externals: ['NameOfMyModule']
}
}
}
Most probably you are trying to apply method 'indexOf' to variable which isn't defined yet. Take a look at docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf . Check if your variable is defined somewhere and it should be an array type.
In the meantime I've tried to import the module without bindings:
const colorBalance = require('../../build/Release/colorBalance.node');
Then I getting a new error:
Error: Cannot open D:\temp\test2\build\Release\colorBalance.node: Error: Module did not self-register.
at Object.eval (webpack:///./build/Release/colorBalance.node?:1:155)
at eval (webpack:///./build/Release/colorBalance.node?:2:30)
at Object../build/Release/colorBalance.node (D:\temp\test2\dist\electron\main.js:97:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///./src/main/index.js?:28:20)
at Module../src/main/index.js (D:\temp\test2\dist\electron\main.js:3833:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///./src/main/index.dev.js?:11:1)
at Object../src/main/index.dev.js (D:\temp\test2\dist\electron\main.js:3821:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
I've rebuild electron using electron-rebuild. I've read about win_delay_load_hook here and tried this but the error doesn't disappear.
I've solved my problem by changing the build chain from cmake to gyp. Compiling with gyp everything works fine.
#grobotor, regarding the self-register issue. Please see these resources :)
https://stackoverflow.com/a/41283828
https://stackoverflow.com/a/55177338
TLDR; I discovered my issue was due to this in the bindings.gyp
"sources": [ ],
This was causing the error "Error: Module did not self-register" when I was attempting to run autotests on Linux (as module is only built for mac)
https://github.com/codebytere/node-mac-permissions/issues/23
Regarding your original issue, I don't think electronBuilder externals is where that property should be since it's a packager. The externals needs to configure the bundler, such as with webpack's externals
Example of my configuration:
// Bundle all deps when building dist (except native modules), otherwise streamline development by just using local node_modules dir
externals: packDistributable ? [{
permissions: "node-mac-permissions"
}] : [nodeExternals()],

Uncaught (in promise) TypeError: Illegal constructor at new SvelteElement (index.mjs:1381)

Uncaught promise when registering a custom element using the latest
sapper, svelte, nodeJS, and rollup stack using the following
statements.
REPL example: https://svelte.dev/repl/489ee8acd10848b0bb1feb2535bd6cc5?version=3.16.5 created locally
<svelte:options tag="parlax-background" />
& rollup.config.js
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({...})
svelte({
dev: !production,
customElement: true,
// and tried also with customElement: { tag: "my-element"}
hydratable: true,
emitCss: true
I want to mention that I had tested on a fresh project
Logs
[Client Side]
=> Uncaught (in promise) TypeError: Illegal constructor
at new SvelteElement (index.mjs:1381)
[Server Side]
=> The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
44: <svelte:options tag="my-element" />
1. When I registering [ **customElement: true ] in the config i get**
2. If I do not register my element in the config I do not get any error, but neither my element is registered :(
Ref: https://github.com/sveltejs/svelte/issues/4132
As described in the referenced GitHub issue, once you configure the Svelte compiler with customElements: true, you're expected to provide an element tag for all your components (using <svelte:options tag="my-component"/>.
In your REPL's example, this would mean updating App.svelte with e.g. <svelte:options tag="my-app"/>
When you now run the app, you should not see the error in the console anymore, but a working app.

Global node-config variable undefined when testing with Jest

I am implementing Option 2 from the node-config docs.
This runs fine, and my global config variable is defined when running outside of a test environment.
However, when I run this with vue-cli and Jest unit testing (e.g. vue-cli-service test:unit), I get this error:
● Test suite failed to run
ReferenceError: APP_CONFIG is not defined
// vue.config.js
...
configureWebpack: {
plugins: [
new ConfigWebpackPlugin('APP_CONFIG')
]
},
...
What is a good way around this? Is it because Jest starts executing the JS files before the node-config can finish switching out all global variables with their values?
Jest does not run Webpack, so you would have to manually setup the config for your tests. As a workaround, you could declare the config as a Jest global.
To declare the global, add the globals property to the exported object in jest.config.js. The sub-property key would be the config-webpack's namespace (APP_CONFIG in your case), and the value would be the required config JSON files from config/:
// jest.config.js
module.exports = {
globals: {
APP_CONFIG: require('./config/default.json')
}
}