I've been trying to set up tests for some Angular components, but I keep running into an issue as all of my components use ng-lightning, which results in the following error:
/angular-lightning-test/node_modules/ng-lightning/ng-lightning.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import
{ NgModule } from '#angular/core';
SyntaxError: Unexpected token import
I've tried multiple ways to get this going through Babel, though I'm not sure that should be required as Jest can handle it for every other file using import in this project.
I'm using jest-preset-angular to handle the setup for these tests. You can see the configuration it uses here.
I've created a very small sample project where you can see this error:
https://github.com/humantree/angular-lightning-test
The component is as simple as this:
#Component({
selector: 'badge',
template: '<ngl-badge>{{text}}</ngl-badge>'
}) export class BadgeComponent {
text = 'Test Badge';
}
and the test is as simple as this (I realize an actual test is missing, but the error still occurs before that would happen):
describe('BadgeComponent', () => {
let badge: BadgeComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [BadgeComponent],
imports: [NglModule.forRoot()]
});
badge = TestBed.get(BadgeComponent).instance;
});
});
Can anyone see anything that I could add to my Jest configuration (or anything else) that would solve this error?
Note: For what it's worth, I also have these tests set up running in Mocha using mocha-webpack, and am having the exact same issue with that setup.
Thanks!
Try the following:
1) install the following packages: babel-jest, babel-preset-env
2) Add a .babelrc file at the your project root.
{ "presets": ["env"]}
3) Edit your jest.config.js file so babel process ng-lightning
{
"preset": "jest-preset-angular",
"transform": {
"^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!ng-lightning)"
]
}
Related
I'm not able to make use of ANY imports that include $app or $env or any path related variable inside a file that is created "outside" of SvelteKit.
Example:
socketio/server.ts
import * as FriendsService from '../src/lib/services/friends';
/services/friends.ts
import { JWT_ACCESS_TOKEN_SECRET } from "$env/static/private";
ERROR:
TSError: тип Unable to compile TypeScript:
../src/lib/services/friends.ts:2:41 - error TS2307: Cannot find module '$env/static/private' or its corresponding type declarations.
There's more information about the bug here:
https://github.com/sveltejs/kit/issues/1485
I was wondering if anyone found a workaround this.
EDIT:
I assume there is a way of doing this, I'm running the server with command of ts-node, but instead of that I should make Vite see it somehow?
I fixed it by adding "extends": "./.svelte-kit/tsconfig.json" in tsconfig.json :
// tsconfig.json
{
"compilerOptions": {
...
},
"extends": "./.svelte-kit/tsconfig.json"
}
I am running a test for a component that needs to check if it has a particular CSS style. As the React Native Testing Library doesn't have this function by default, I installed the #testing-library/react-native to use toHaveStyle from there but while running a test I get an error: Test suite failed to run. Cannot find module '#testing-library/jest-native' from "a path to my test file here". Here is my test and the jest config:
// test file
import React from 'react';
import {toHaveStyle} from '#testing-library/jest-native';
describe('JobForm', () => {
expect.extend({toHaveStyle});
// ....
});
// package.json
{
//...
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?#?react-native|#react-native-community|#react-navigation|aws-amplify-react-native|#ui-kitten)"
],
"setupFiles": [
"<rootDir>/jest.setup.js",
"./node_modules/react-native-gesture-handler/jestSetup.js"
]
}
}
//jest.setup.js
import mockRNCNetInfo from '#react-native-community/netinfo/jest/netinfo-mock.js';
import mockAsyncStorage from '#react-native-async-storage/async-storage/jest/async-storage-mock';
jest.mock('#react-native-community/netinfo', () => mockRNCNetInfo);
jest.mock('#react-native-async-storage/async-storage', () => mockAsyncStorage);
It seems that you forgot to finish the configuration from the Usage section (a section below the Installation section) from the #testing-library/jest-native package. All you need to do is add this line to your setup file:
import '#testing-library/jest-native/extend-expect';
In case of config or import issues it's always a good idea to compare you config against model one provided by RNTL team. RNTL has a basic example app that is useful for that purpose, especially that it also includes #testing-library/jest-native.
I used to solve similar errors while I was using Jest with only JavaScript, but currently I'm not able to do so with Typescript.
All my tests were running fine until I installed Puppeteer which requires #types/jest-environment-puppeteer, #types/puppeteer and #types/expect-puppeteer.
After installing them, puppeteer tests are running perfectly, but other tests started to fail with below error.
D:\...\api\node_modules\uuid\dist\esm-browser\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1796:14)
at Object.require (../node_modules/#nestjs/common/decorators/core/injectable.decorator.js:4:16)
WHAT I DID?
allowJs: true on tsconfig.json and set the transformIgnorePatterns on jest configs. So that jest can compile files from node_modules/
After that this error stopped but test failed for another strange reason.
And worse is that test start time have increased too much.
So I left allowJs as in original setup and updated jest config from
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
}
to
"transform": {
"^.+\\.(t)s$": "ts-jest"
}
So currently ts-jest doesnt compile js files. But I think I am not able to make babel pick the transformation for js files. These are my jest configs:
{
"moduleFileExtensions": ["js", "json", "ts"],
"rootDir": ".",
"testEnvironment": "node",
"testRegex": ".e2e-spec.ts$",
"transform": {
"^.+\\.(t)s$": "ts-jest",
"^.+\\.(js|jsx)$": "babel-jest"
},
"transformIgnorePatterns": ["<rootDir>/node_modules/.+.(js|jsx)$"]
}
Thanks to this reply:
https://stackoverflow.com/a/54117206/15741905
I started googling for similar fixes and ended up here:
https://github.com/uuidjs/uuid/issues/451
And this solved my problem: https://github.com/uuidjs/uuid/issues/451#issuecomment-1112328417
// jest.config.js
{
//................
moduleNameMapper: {
// Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
"uuid": require.resolve('uuid'),
}
}
Tough I would still be happy if there is solution to this by using jest-babel.
Because I had to carry jest configs from package.json to a seperate .js file.
Edit:
According to this github issue compatibility issue has been solved with the latest release of the uuid library.
Simply adding moduleNameMapper:{"^uuid$": "uuid"} into my jest.config.js fixed the issue for me:
transient dependency uuid: ^8.3.2
jest: 28.1.3
angular: 14.0.1
Upgrade to uuidv4() version 9.0.0 ("uuid": "^9.0.0") now fixes the the issue. See comment from SimenB: https://github.com/uuidjs/uuid/issues/451#issuecomment-1377099565
I tried the answer above initially, adding moduleNameMapper:{"^uuid$": "uuid"} into my jest.config.js, which fixed the issue for me. Then I followed the link (above) to read more and I saw that it has been fixed in "uuid": "^9.0.0".
So I took out the fix, installed latest uuidv4() at version 9.0.0, (package link below) and it started working fine again. No more errors and tests are running fine, again. https://www.npmjs.com/package/uuid
My React App started having the issues after updating "jest": "26.0.1" to "jest": "29.4.1", "environment-jsdom-fifteen": "1.0.2" to "jest-environment-jsdom": "29.4.1". along with other updates "ts-jest": "26.5.6" to "ts-jest": "^29.0.5". However, as mentioned above, upgrading to uuid version 9.0.0 has fixed it.
Date : 2/15/2023
Jest Version : "#types/jest": "^29.4.0",
UUID Version : "uuid": "^9.0.0"
using the jest.config.ts will generate an error that says
Multiple configurations found
here's how you can override that
/**
* #format
*/
import 'react-native';
import React from 'react';
import App from '../src/App';
import {v4 as uuidv4} from 'uuid';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<App />);
});
jest.mock('uuid', () => {
return {
v4: jest.fn(() => 1)
}
})
Hoping this will solve other peoples error if the correct answer is not working for you :).
adding this to the package.json file solved it for me:
"devDependencies": {
....
},
"browser": {
"uuid": "./node_modules/uuid/dist/esm-browser/index.js"
}
I tried to move from vue-cli to vite but observed some obstacles.
I want to include several npm packages into my vue 3 project.
I tried to understand the issue, and basically the error came when I imported
https://www.npmjs.com/package/rdf-parse
If I run npm run dev everything works as expected, but when I run npm run build and serve the dist folder with http-server the error:
Uncaught TypeError: Object.defineProperty called on non-object at Function.defineProperty
occurs.
The code worked with vue-cli and in vite-dev mode so I expect I missed somethin crucial in the vite.config.js
But I didnt find anything in the docu that helped me out and also no thread here on stackoverflow or elsewhere.
I created a repo with a minimal example here: https://github.com/stackoverflowuser/vite-issue
It is the npm vue3 template (npm init vue#3) and only the library rdf-parse is added.
// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
}
},
build: {
target: "es2020"
},
optimizeDeps: {
esbuildOptions: {
// Limit target browsers due to issue: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
target: "es2020",
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeModulesPolyfillPlugin()
]
}
},
})
In hope someone can give me a hint.
I want to apply a jest test to react component and I get an error that says:
Jest encountered an unexpected token
When I try to:
import moment from 'moment';
import './style.css'; //<----here
I try to mock css files and image objects and change the configuration:
// package.json
{
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
My styleMock.js is:
module.exports = {};
My fileMock.js is:
module.exports = 'test-file-stub';
But I still get the error:
Jest encountered an unexpected token
and the error is in the same place as it was previously.
My jest is the latest version "24.8.0".
Anyone knows why?
i use this lib for that identity-obj-proxy
npm install identity-obj-proxy
change this line:
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
to this:
"\\.(css|less)$": "identity-obj-proxy"