I'm trying to load jquery-mockjax into my test suite and followed the instructions on http://www.ember-cli.com/user-guide/#managing-dependencies.
I have placed a Brockfile.js in the root of my ember app:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
if (EmberApp.env() !== 'production') {
app.import( app.bowerDirectory + '/jquery-mockjax/dist/jquery.mockjax.js', { type: 'test' } );
}
module.exports = app.toTree();
But it seems like the ember CLI is totally ignoring the file - I even tried adding a syntax error to trigger a build error. What could be going wrong?
The Ember CLI as of (1.13) does not actually read the Brocfile.js. But rather ember-cli-build.js.
I solved this issue by having jquery-mockjax in both package.json and bower.json
Related
I'm currently working on a project with webpack (version 5.50.0) and Storybook (version 6.3.7). The stories directory in this project is within the storybook directory.
During an update of webpack to version 5.51.1 I came across the following error
when I run npm run storybook:
10% building 0/15 entries 21/55 dependencies 1/17 modules/Users/dsudol/development/projects/ca_projects/Test/node_modules/webpack/lib/FileSystemInfo.js:816
if (entry.resolved !== undefined) return entry.resolved;
^
TypeError: Cannot read property 'resolved' of undefined
at getResolvedTimestamp
Here's my main.js config
'use strict';
const path = require('path');
module.exports = {
stories: [
'./**/*.stories.#(js|jsx|ts|tsx|mdx)'
],
core: {
builder: 'webpack5'
},
addons: [
'#storybook/addon-links',
'#storybook/addon-docs',
'#storybook/addon-contexts/register',
'#storybook/addon-controls',
{
name: '#storybook/addon-essentials',
options: {
backgrounds: true
}
}
]
};
How can I solve this without moving the stories out of the storybook directory or using an explicit path like './stories/**/*.stories.#(js|jsx|ts|tsx|mdx)'.
Tipps to Reproduce
Create a simple app with react (I did it without npm install create-react-app), webpack and Storybook. Move the stories directory inside the .storybook directory. Then change the path in main.js accordingly and run npm run storybook.
This was fixed in Webpack 5.51.2, so you'll need to update.
Further reading:
Bug Report
Bug Fix
I am getting below error while running jest test cases in Angular. All test suites are failing with this error.
Getting typeError: (options.astTransformers || []).map is not a function while running the test suite in Angular
This solution is for Angular 8/9/10
I would recommend doing these steps:
Uninstall jest-preset-angular
Reinstall jest-preset-angular
Clear jest cache
Retry
If the above solution not working, try installing
npm install --dev ts-jest
Fix this error by removing the following line in the jest.config.js file.
module.exports = {
...
passWithNoTests: true,
projects: '<rootDir>/libs/now-version' // <--- newly added property. should be removed
};
As I found this link on github.
https://github.com/nrwl/nx/issues/3885#issuecomment-706620382
This error started after updating Angular to 11, and when I generate a new lib inside NX and it ends up adding this new line, whenever a new lib is generated, by the CLI
Seems to be a newer version of the package.
In the package.json I changed the jest-preset-angular from "8.3.2" to "8.2.0" and that error went away.
Updating the jest.config.js as below fixed my issue
module.exports = {
displayName: 'AppName',
preset: '../../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
},
coverageDirectory: '../../coverage/libs/appName',
transform: {
'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
},
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
testRunner: 'jest-jasmine2'
};
Jest configuration for Angular can be tricky.
I recommend you use jest-preset-angular which is a library that you will import into your Angular project that will manage the configuration of Jest for Angular.
This may be related to the update of Jest 27 that deprecated astTransformers as string[].
Configure your Angular project to use Jest 26 with jest-preset-angular and you should be fine
I've been using Webpack for my ES6 JS project and has been going well until I started to play with dynamic imports.
What I had that worked (router.js):
import { navigo } from "Navigo"; // router
import { clients } from "Controllers/clients.js";
const navigo = new Navigo();
navigo_router.on({
'/clients': () => {
clients.init();
}
});
But the more pages/routes I add, the more imports get stacked up in the head of the module. This is a relatively large app and I have a lot of pages/routes to add and therefore I need to load them dynamically to reduce the size of the initial page load.
So, following Webpack's documentation for dynamic imports, I tried the following which loads the controller module only when the relative route is called:
import { navigo } from "Navigo"; // router
const navigo = new Navigo();
navigo_router.on({
'/clients': () => {
import("Controllers/clients.js").then((clients) => {
clients.init();
});
}
});
But saving this in my editor resulted in a Babel transpiling error; SyntaxError: 'import' and 'export' may only appear at the top level, and clients.init() is not being called when tested in browser.
After a bit of reading, I discovered I needed a Babel plugin to transpile dynamic import() to require.ensure. So, I installed the plugin using the following command:
npm install babel-plugin-dynamic-import-webpack --save-dev
And declared the plugin in my babel.rc file
{ "plugins": ["dynamic-import-webpack"] }
After installing the plugin, the transpiling error disappeared and checking my transpiled code I found that the dynamic import()s has in fact been changed to require.ensure as expected. But now I get the following browser errors when testing:
Error: Loading chunk 0 failed.
Stack trace:
u#https://<mydomain.com>/js/app.bundle.js:1:871
SyntaxError: expected expression, got '<' 0.app.bundle.js:1
Error: Loading chunk 0 failed.
I didn't understand why it was referencing 0.app.bundle.js with the 0. prefix, so I checked my output/dist folder and I now have a new file in there called 0.app.bundle.js:
0.app.bundle.js 1,962bytes
app.bundle.js 110,656bytes
I imagine this new bundled file is the dynamically imported module, clients.js.
I only added dynamic importing to that one route and have left all the other routes as they were. So, during testing, I can view all routes except that one /clients route that now throws the above errors.
I'm totally lost at this point and hoped somebody could help push me over the finish line. What is this new file 0.app.bundle.js and how am I supposed to be using it/including it in my application?
I hope I've explained myself clearly enough and look forward to any responses.
I managed to fix my own problem in the end, so I will share what I discovered in an answer.
The reason the chunk file wasn't loading was because Webpack was looking in the wrong directory for it. I noticed in the Network tab of my developer console that the the chunk file/module was being called from my root directory / and not in /js directory where it belongs.
As per Webpack's documentation, I added the following to my Webpack config file:
output: {
path: path.resolve(__dirname, 'dist/js'),
publicPath: "/js/", //<---------------- added this
filename: 'app.bundle.js'
},
From what I understand, path is for Webpack's static modules and publicPath is for dynamic modules.
This made the chunk load correctly but I also had further issues to deal with, as client.init() wasn't being called and yielded the following error:
TypeError: e.init is not a function
To fix this, I also had to change:
import("Controllers/clients.js").then((clients) => {
clients.init();
});
To:
import("Controllers/clients.js").then(({clients}) => {
clients.init();
});
Note the curly braces in the arrow function parameter.
I hope this helps somebody else.
For debugging, you need to do
import("Controllers/clients.js").then((clients) => {
console.log(clients);
});
maybe working
import("Controllers/clients.js").then((clients) => {
clients.default.init();
});
I'm trying to use Webpack to create a couple of simple modules in an ASP.NET MVC 5 Visual Studio 2015 project. Following instructions on the Webpack site, I downloaded the latest version of Node.js. Then using the Node command prompt, changed to my project's folder. There, I ran this command to install Webpack locally:
npm install webpack --save-dev
It created a package.json file in the root of my project:
{
"devDependencies": {
"webpack": "^2.4.1"
}
}
Note that the project already has jQuery and Bootstrap as bundles via the BundleConfig.cs, which are then referenced on _Layout.cshtml; hence they're available on all pages of the app.
Now I'd like to create a very simple test to see how to create and require modules using Webpack; once I understand it better, I can add more complex modules. I've been reading about code-splitting: https://webpack.js.org/guides/code-splitting-async/ but it's still not clear how you do this.
The function test requires function isEmpty. I'd like to define isEmpty as a module and then use it with test.
var test = function(value){
return isEmpty(value);
};
var isEmpty = function(value) {
return $.trim(value).length === 0 ? true : false;
};
This article has been helping: http://developer.telerik.com/featured/webpack-for-visual-studio-developers/
The Webpack documentation mentions import() and also require.ensure(). How do I use Webpack to modularize the isEmpty code and then use it?
Webpack allows you to use the commonJS approach for dependency management which Node.js uses, so if you have experience with Node.js it's very similar.
If not have a look at this article on the module system or the spec for a description of the module system.
For this problem I will assume all files are in the same directory. I think you will need to first move the isEmpty code into a separate file maybe isEmpty.js and change it's structure a bit so that it looks like this:
module.exports = function(value) {
return $.trim(value).length === 0 ? true : false;
};
then your test function can be moved into a separate test.js file and you can require the isEmpty module and use it like this:
var isEmpty = require('./isEmpty');
var test = function(value){
return isEmpty(value);
};
You will probably have to do something about the dependency on $ (I'm guessing jquery?) but I think that can be handled with shimming
If you have a number of functions you can do something like:
someFunctions.js
var self = {};
self.Double = function(value){
return value*2;
}
self.Triple = function(value){
return value*3;
}
module.exports = self;
useFunctions.js
var useFunctions = require('./someFunctions');
var num = 5;
console.log(useFunctions.Double(num));
console.log(useFunctions.Triple(num));
I am building a JavaScript application (no framework yet, but I may move it to Backbone). I have created various classes, here's an example, chart.js:
var moment = require('moment');
var chart = {
...
getAllMonths: function(firstMonth, lastMonth) {
var startDate = moment(firstMonth);
var endDate = moment(lastMonth);
var monthRange = [];
while (startDate.isBefore(endDate)) {
monthRange.push(startDate.format("YYYY-MM-01"));
startDate.add(1, 'month');
}
return monthRange;
},
setMonths: function() {
// get data via ajax
this.globalOptions.months = this.getAllMonths(data['firstMonth'], data['lastMonth']);
}
};
module.exports = chart;
My file structure is as follows:
index.js
src/
chart.js
form.js
I import the two classes into index.js and use browserify to bundle these scripts up in order to use them in my web app.
Now I want to add tests for chart.js and form.js. I have added a new directory called test/ and empty test files:
index.js
src/
chart.js
form.js
test/
test_chart.js
test_form.js
My question now is what test_chart.js should look like in order to test the getAllMonths function, and what test runner I should use.
I've started experimenting with the following in test_chart.js:
console.log('hello world');
var chart = require('../src/chart');
var months = chart.getAllMonths('2014-02-01', '2015-03-01');
// assert if months.length != 14
But if I run this with node test/test_chart.js, I get errors about failed module imports for moment etc (shouldn't these be imported automatically with the original chart.js module?).
Secondly, what test runner could I use for this kind of simple testing? I'd like something that will automatically run everything in the test directory, and offers asserts etc.
I ended up using Mocha. It's really pretty easy:
npm install --save-dev mocha
mocha
Boom!
It automatically looks for files in the test/ folder.
Still having the problem with imports though.