The migration from Angular v12 to v13 has been tough and while the app functions perfectly, the tests are still a problem on our side.
We have been running v12 tests using Jest with ESM (because we have a WebWorker and the import.meta.url requires ESM since v12) successfully as of now.
But now that v13 ships with only ES Modules it breaks in some third party libraries requiring angular code.
Now that the jest-preset-angular supports running v13 + ESM with a working example app I thought I'd give it another try. This is also being discussed in NGXS's slack.
My current very basic config is the following:
const {pathsToModuleNameMapper} = require('ts-jest/utils');
const {paths} = require('./tsconfig.json').compilerOptions;
require('jest-preset-angular')
const esModules = ['tslib'].join('|');
/** #type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'jest-preset-angular/presets/defaults-esm',
globals: {
'ts-jest': {
useESM: true,
stringifyContentPathRegex: '\\.(html|svg)$',
tsconfig: '<rootDir>/tsconfig-esm.spec.json',
},
},
moduleNameMapper: {
...pathsToModuleNameMapper(paths, {prefix: '<rootDir>'}),
tslib: 'tslib/tslib.es6.js',
},
transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};
I've gone through the documentation multiple times, I'm following migration issues being opened on different repo trying to address the issue.
I've also gone through the latest related issues including this.
Has anyone managed to have a working v13 + Jest + ESM + NGXS stack ? I can't seem to figure it out.
For anyone who wants to fidget with a minimal reproduction repo, you can find it here. The tests run fine without ESM and fail using ESM because we end up trying to require #angular from the NGXS bundle.
I couldn't make it work while preserving the import.meta.url syntax with Jest which requires Node to be run with the --experimental-vm-modules flag.
I noticed that I could run my test using a classic ESM config as long as the node flag wasn't there.
So I resorted to transforming the import.meta.url syntax back to CommonJS in my test config using this babel plugin
Related
unfortunately, my most recent application is required to support Internet Explorer 11. This requirement came somewhat suprising to me, so I already built the applications frontend with Vue.js. The backend is written in Laravel, therefore I use laravel-mix/webpack.
This is my app.js:
require('./bootstrap');
window.Vue = require('vue');
Obviously, IE11 doesn't support Vue.js so I tried the following ways of transpiling/polyfilling the code.
1. requiring polyfill
Approach: Adding require("#babel/polyfill"); to the top of my app.js as described in https://babeljs.io/docs/en/babel-polyfill
Result: Following Error Message shown in IE console:
SCRIPT1003: ':' expected
Clearly a compatibility issue, since pre data(){} is invalid in ES < 5
2. using mix.babel
Approach: Adding mix.babel(['resources/js/app.js'], 'resources/js/app.js') to my webpack.mix.js as described in https://laravel.com/docs/5.8/mix (I am using laravel 5.8.36). My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.babel(['resources/js/app.js'], 'resources/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
Result: Same Error Message as in 1
3. using an mix extension
Approach: Installing this extension: https://laravel-mix.com/extensions/polyfill and configure my webpack.mix.js as described. My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
mix.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": "11"}
})
Result: Again, the same Error Message as in 1
4. manually transpiling with babel-cli
Approach: Merely out of desperation I tried to manually transpile my app.js with the following command ./node_modules/.bin/babel ./public/js/app.js --out-dir ./public/js/
Result: Stil no luck, same error as in 1
I am really starting to get frustrated, so any help is much appreciated.
If you can't get Babel-Polyfill to work, you could try using Polyfill.io, which automatically polyfills the selected Polyfills if the browser requires them.
All you need to do is go the Create a polyfill bundle page, and select the polyfills you need. Then once you've made your bundle, copy the URL at the top and add a <script> tag with said URL to your head.
I personally haven't used it with Laravel, but I've previously fought with babel-polyfill myself, and ended up using Polyfill.io since i couldn't get babel-polyfill to work.
If I run yarn test, which runs jest, I get the following error:
C:\react-native-project\node_modules\react-native\Libraries\Utilities\warnOnce.js:15
const warnedKeys: {[string]: boolean} = {};
But that only happens if I follow the directions of the react-native-testing-library:
Then automatically to add it to your jest tests by using setupFilesAfterEnv option in the
jest.config.js file:
If I remove the file I will not get that error and I can get simple tests to run. When I remove the file, the test runs but AsyncStorage is not recognized so the tests still don't run. I have AsyncStorage. It's installed and the app works, but I want to add component tests. I also noticed the file, jest.config.js, is conspicuously missing from the testing project itself. Is there any documentation or working example? I would rather not do a diff of my project and the testing project. Is there a more well-documented or reliable testing framework/module available?
I'm able to get working tests by following the documentation of the React Native Testing Library with the npm package name of #testing-library/react-native not to be confused with the React Native Testing Library with the npm package name of react-native-testing-library. Both packages allow testing components and are recommended by React-Native documentation but this one works when following the instructions. It also has instructions "to define a custom render method that includes things like global context providers, data stores, etc" so that testing components with AsyncStorage and such shouldn't be a problem.
I'm sort of stuck with one problem and googling it for about three hours brought me nowhere.
Here's the problem. I'm trying to develop my own custom PDF viewer based on PDF.JS lib. Officially it is distributed on npm as pdfjs-dist package. However I need to extend a few classes that are not accessible in pdfjs-dist. So I npm install'ed or yarn add'ed the original repo https://github.com/mozilla/pdf.js.git. This way I have access to classes I need. Inside pdf.js there are core lib that is stored in pdf.js/src/ and a pdf-viewer app that is stored in pdf.js/web/.
Inside that pdf.js/web/ app core lib (pdf.js) is referenced via pdfjs-lib alias that is resolved to pdf.js/src/ during pdf.js inner build process by gulp.
For example pdf.js/web/base_viewer.js:
import { AnnotationLayerBuilder } from './annotation_layer_builder';
import { createPromiseCapability } from 'pdfjs-lib';
import { PDFPageView } from './pdf_page_view';
So now I'm trying to import that pdf.js/web/base_viewer.js in my app that is using latest Webpack 4 (I guess), and this pdfjs-lib sub-dependency is not resolved.
I've tried webpack's resolve-alias mechanism (https://webpack.js.org/configuration/resolve/):
resolve: {
alias: {
'pdfjs-lib': path.resolve(__dirname, './node_modules/pdf.js/src/')
},
}
...but looks like it resolves dependencies only of my own App, but not sub-dependencies of my dependency.
Just in case I'm building Vue 3.0 app using vue-cli and access webpack config this way: https://cli.vuejs.org/guide/webpack.html, but don't think it matters.
Any help from Webpack gurus here?
Thanks.
Basically my issue is that I get an error message, "__DEV__ is not defined" when I run jest. So I have read stackoverflow and other google posts on this. Some have suggested removing my .babelrc, but I actually need that file. Others have suggested adding
"globals": {
"__DEV__": true
}
To my package.json. I did that as well. I even deleted my node modules folder and re-installed. What should I do? Odd thing is that it was working before, but not now.
You can create a jest.config.json file in the root of your react-native project and add this globally as such
{
"jest": {
"globals": {
"__DEV__": true
}
}
}
Just add globals.DEV = true to your test file or set it in globals part of your jest settings
I got this when I was running Detox E2E tests inside of my react native app. Then use to work just fine but then I upgraded my mac OS and xcode and they started throwing Reference error DEV is not defined. Not sure why it was fine before and then broke after that.
My issue was fixed when I removed any code that was being imported from my react native app inside of the detox E2E tests. So the issue was importing any javascript from my app/ folder. I had a simple utility log function that wraps console.log which was the culprit. I did not need to modify any jest configs.
For anyone facing this issue I updated my jest by running in the terminal npm update jest this solved the issue for me.
After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm