Develop Reference

test function is not recognized as a global function

I followed a JavaScript unit testing tutorial at acadamind.com in that tutorial instructor used Vitest for demonstrations and the reason they mentioned using Vitest instead of Jest was Jest needed some extra configuration to work with the latest JavaScript syntax.
After doing my own research about unit testing I realized industry demand unit testing skills with the Jest. So I followed another tutorial for learning unit testing with Jest and React Testing Library (RTL).
I created a brand new TypeScript project with Create React App (CRA) and followed the instructions in that tutorial and everything went well. The instructor mentioned that Jest and RTL are supported out of the box with CRA.
After studying unit testing I tried to apply that knowledge and write some tests with my application, which was created some time back, and recently we updated it to React Scripts 5. In that application, I check node_modules folder, and Jest is there as a dependency. But I have noticed that the following packages are not listed in the package.json file in my project, so I installed them:
#testing-library/jest-dom": "^5.16.5",
#testing-library/react": "^13.4.0",
#testing-library/user-event": "^14.4.3",
#types/jest": "^29.4.0",
After that, I noticed my new project has this file in the src folder so I have copy pasted this file as well.
setupTest.ts
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '#testing-library/jest-dom';
When I tried to run when I tried to write my first unit test I noticed that VS Code doesn't recognize this test function as a global function and indicates an error and then I try to run the test script and I am getting this error
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/home/pathum/Documents/tagd/node_modules/axios/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
> 1 | import axios from 'axios';
| ^
2 | // config
3 | import { HOST_API } from '../config';
4 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/utils/axios.ts:1:1)
at Object.<anonymous> (src/hooks/useRefresh.tsx:2:1)
at Object.<anonymous> (src/hooks/useAxiosPrivate.tsx:3:1)
at Object.<anonymous> (src/pages/contracts/contract-form/new-contact-person.tsx:12:1)
at Object.<anonymous> (src/pages/contracts/contract-form/parties.tsx:15:1)
at Object.<anonymous> (src/pages/contracts/contract-form/contract-form.tsx:9:1)
at Object.<anonymous> (src/pages/contracts/contract-form/contract-form.test.tsx:2:1)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.398 s
Ran all test suites related to changed files.
Watch Usage: Press w to show more.
Seems I need to do some configurations for Jest to work properly in the application. How do I fix this?

Install the necessary dependencies: npm install --save-dev #babel/preset-typescript and npm install --save-dev jest-cli typescript
Create a new file in the root of your project called jest.config.js and add the following content to it:
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/*.test.ts'],
};
Add a new property called "jest" to the "scripts" section of your package.json file and set it to the following: "jest --config jest.config.js --coverage". This will tell Jest to use the configuration file you just created and also generate a coverage report.
Create a new file in the root of your project called tsconfig.test.json and add the following content to it:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./test-dist"
},
"include": [
"src/**/*.test.ts"
]
}
Finally, you can run your tests with npm run jest.
You also need to make sure that you are using import statement correctly in your tests. You should use import statement to import functions, classes, and variables from other modules, but you should use require statement to import modules that are not written in TypeScript.

vue cli build with target lib: "require is not defined" when component is imported

I'm trying to export a Vue component as a package, and using vue cli to build the dist. I intend to publish it on npm, but I'm currently using a symbolic link for testing purpose. However even with a simple hello-world project I can't make a valid package.
I created a project:
vue create hello-world
Then I modified the package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue",
"lint": "vue-cli-service lint"
},
"main": "./dist/vue-hello-world.common.js",
Then I call
npm run build
and it compiles without error.
Then I make an import in a vue component in another project (I used a symbolic link in node_modules):
import HelloWorld from "hello-world";
On page render I get the following error:
[Vue warn]: Failed to resolve async component: function MediaViewerPdf() {
return Promise.all(/*! import() */[__webpack_require__.e(62), __webpack_require__.e(46)]).then(__webpack_require__.bind(null, /*! ./viewers/MediaViewerPdf.vue */ "./vuejs/components/mediaViewer/viewers/MediaViewerPdf.vue"));
}
Reason: ReferenceError: require is not defined
Any idea what's happening?
Remarks:
using vue inspect, I checked that in webpack config that:
target: "web"
I already set resolve.symlinks at false on the importing project.
EDIT: I have confirmed that it doesn't come from the symbolic link, I have exactly the same error with package directly on node_modules.
Repo with whole code: https://github.com/louis-sanna/vue-hello-world

So I asked the question on the vue-cli repo and I got the solution! https://github.com/vuejs/vue-cli/issues/4245
Turns out NODE_ENV was already set at development in my shell, so it was the mode used to make the build.
Just need to set the mode explicitly and it works:
vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue --mode production
You may need to add it to vue.config.js:
config
.mode("production")

This happens due to the fact that Vue CLI Webpack setup by default does not import commonjs modules, as described in your "main" field in package.json. So the problem is with the project that attempts import, not with the project that exports the component.
There are two ways to attempt to solve this problem.
From the importing project side
You can remedy this by installing babel plugins for the project that imports your components and setting babel.config.js
module.exports = {
presets: [
'#vue/app'
],
plugins: [
'#babel/plugin-transform-modules-commonjs', // leave to import .common.js files
'#babel/plugin-transform-modules-umd' // leave to import .umd.js files
]
}
But doing this alone will not be sufficient: you also will need to import CSS that is generated with the library by adding this in your entry file
import 'hello-world/dist/vue-hello-world.css';
Note that I have only tested this using yarn link, but I have confidence that this will work with an imported separate npm module just fine.
From the library side
The intent (I suppose) of the original question - how do I bundle a library so my users don't have to do this little dance each time they want to use it?
Option 1: don't bundle it - provide .vue files and sources. Just include everything in 'src' directory of your module, write a readme with explanation and be done with it. Let the importing project figure the compilation and bundling out.
Option 2: use rollup with Vue plugin to roll components into bundle. There is an example on how to do that. In that example you can see that your project will be able to import .esm build
https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/library

Not sure how you are creating the symbolic link, but you should use npm link for that. If you are still having problems (like I did myself) I would suggest you try npm-link-better:
npm install -g npm-link-better
cd vue-hello-world
npm link
cd ../hello-world
nlc -w vue-hello-world
For building component libraries, I suggest you have a look at vue-cli-plugin-component. This plugin already sets up the vue-cli project pretty well.

meteor-client-bundler with webpack __meteor_runtime_config__ is not defined

I am trying to use this with my webpack project
https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
but I get this error
ReferenceError: __meteor_runtime_config__ is not defined
Here are the steps I did
create a new meteor project
then I run the client bundler like this
meteor-client bundle —source=./ —destination=./meteor-client.bundle.js —config=meteor-client.config.json
and here is the config
{
"runtime": {
"DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000"
},
"import": [
"meteor-base#1.3.0",
"mongo#1.4.2",
"reactive-var#1.0.11",
"jquery#1.11.10",
"tracker#1.1.3",
"shell-server#0.3.1",
"react-meteor-data"
]
}
then I copy my meteor-client.js to my webpack project node_modules
and import it like this
import 'meteor-client'
then I bundle webpack and run dev-server and I get the above mentioned error.

I had the same issue, and fixed that by putting my meteor-client.js to node_modules and exclude node_modules from processing by babel-loader with webpack (or you could just exclude meteor-client.js). Raw loading will workaround that.
In case someone still searching.

Bootstrap v4 runtime/load error in Aurelia

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.

You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)

Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.

Reflect.getOwnMetadata is not a function in karma with latest Aurelia

After updating to the latest version of Aurelia (March update beta.1.1.4), I'm getting the following error every time I run karma tests:
Error: Reflect.getOwnMetadata is not a function
Error loading C:/Software/myproject/test/unit/myclass.spec.ts
How do I fix it?

This has to do with the change of Aurelia from core-js to home-grown polyfills. The Reflect polyfill is missing and tests fail to run.
This problem is addressed in Aurelia navigation skeleton app by the following import statement in each unit test file:
import 'aurelia-polyfills';
I solved it by creating a setup.ts (or setup.js resp. to your language) file with just this statement, and then just listing it in karma.config.js at the first place.
for JS e.g.:
jspm : {
loadFiles: ['test/unit/setup.js', 'test/unit/**/*.js'],
...
}
for Typescript e.g.:
files: ['test/unit/setup.ts', 'test/unit/**/*.ts'],
...