I am using vue/cli 3 configured for cypress e2e tests. The e2e test scenario works fine but I also wish to use cypress for unit tests. I installed cypress-vue-unit-test but when loading a single component (using mountVue) cypress fails to interpret the Vue syntax ( etc).
I presume I have to add configuration so that the correct web pack loaders are used at the preprocessor stage when cypress bundles the files. I have been unable to figure out how to accomplish this as there is no web pack config file in my project and I am not sure how to modify the preconfigured set-up. Can anyone guide me?
Thanks phoet, you pointed me in the right direction. The solution was to place the configuration in tests/e2e/plugins/index.js with the following content (probably could be refined):
const webpack = require("#cypress/webpack-preprocessor");
const VueLoader = require("vue-loader/lib/plugin");
const webpack_vue_cypress_config = {
webpackOptions: {
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"#": "../../"
}
},
plugins: [new VueLoader()]
},
watchOptions: {}
};
module.exports = (on, config) => {
on("file:preprocessor", webpack(webpack_vue_cypress_config));
return Object.assign({}, config, {
fixturesFolder: "tests/e2e/fixtures",
integrationFolder: "tests/e2e/specs",
screenshotsFolder: "tests/e2e/screenshots",
videosFolder: "tests/e2e/videos",
supportFile: "tests/e2e/support/index.js"
});
};
Thanks Linus; that's much cleaner
const webpack = require("#cypress/webpack-preprocessor");
const options = {
webpackOptions: require("#vue/cli-service/webpack.config.js"),
watchOptions: {}
};
module.exports = (on, config) => {
on("file:preprocessor", webpack(options));
return Object.assign({}, config, {
fixturesFolder: "tests/e2e/fixtures",
integrationFolder: "tests/e2e/specs",
screenshotsFolder: "tests/e2e/screenshots",
videosFolder: "tests/e2e/videos",
supportFile: "tests/e2e/support/index.js"
});
};
Related
I have some problems with my tests since I upgraded from electron v11 to v20.
With this update the remote was moved from electron to a new module #electron/remote.
In jest.config.js I have the electron module mock mapping: electron: '<rootDir>/tests/mock/electron.mock.ts'
...
const mockIpcRenderer = {
on: jest.fn(),
send: jest.fn()
};
const mockRemote = {
app: {
getPath: mockGetPath,
getAppPath() {
return '/app/working/path';
}
},
process: {
env: jest.fn()
}
};
...
export const ipcRenderer = mockIpcRenderer;
export const remote = mockRemote;
So, after the update I extracted the remote part from the mock to a new file: remote.mock.ts
const mockApp = {
getPath: mockGetPath,
getAppPath() {
return '/app/working/path';
}
};
const mockProcess = {
env: jest.fn()
};
function mockGetPath(path: string) {
return 'somtething';
}
export const app = mockApp;
export const process = mockProcess;
and I added this line to my test file:
jest.mock('#electron/remote', () => require('../mock/remote.mock'));
The problem is when I run the test I get TypeError: Cannot read property 'on' of undefined.
The ipcRenderer is undefined and I don't know why ?
When I added that jest.mock('#electron/remote', () => require('../mock/remote.mock')); to the test file, the mocks from electron.mock.ts are not defined anymore, for some reason.
In the jest.config.js I added start and end symbols and added a new line for #electron/remote and it works.
moduleNameMapper: {
'^#electron/remote$': '<rootDir>/tests/mock/electron.mock.ts',
'^electron$': '<rootDir>/tests/mock/electron.mock.ts',
},
when I update webpack 4 to 5, the error exits.
I have a webpackDevServer.js which include the error message 'error'
// webpackDevServer.js
module.exports = function(proxy, allowedHost) {
return {
before(app, server) {
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(app);
}
// This lets us fetch source contents from webpack for the error overlay
app.use(evalSourceMapMiddleware(server));
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware());
},
};
};
I use the above file in a start.js file, when I run the project, I type node scripts/start.js
// start.js
...
const createDevServerConfig = require('../config/webpackDevServer.config');
...
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
then it throws an error
configuration has an unknown property 'before'. These properties are valid:
object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }
here is my package.json
"webpack": "^5.20.2",
"webpack-dev-server": "^4.0.0-beta.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "^6.1.0"
You have to change before to the onBeforeSetupMiddleware. Link with migration description from v3 to v4. https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md
In case, something will change on the migration guide, details are attached below
v3:
module.exports = {
devServer: {
after: function (app, server, compiler) {
app.get("/some/path", function (req, res) {
res.json({ custom: "response" });
});
},
},
};
v4:
module.exports = {
devServer: {
onAfterSetupMiddleware: function (devServer) {
devServer.app.get("/some/path", function (req, res) {
res.json({ custom: "response" });
});
},
},
};
fxxk, I'm stupid, when i search some key word (eg: onBeforeSetupMiddleware), I found the github of webpack-dev-server which tell the changes in new version 4.0.0 beta. https://github.com/webpack/webpack-dev-server/releases
Currently Jest is failing the tests because it cannot find the module called inside a component:
FAIL tests/Unit/VHeaderBar.spec.ts
● Test suite failed to run
Cannot find module '##/public/assets/images/placeholder.png' from 'VHeaderBar.vue'
at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:221:17)
at src/components/VHeaderBar.vue:687:18
at Object.<anonymous> (src/components/VHeaderBar.vue:749:3)
Case
In NuxtJs the ## signs refer to the root directory, because in the end solution we want to store images in the public folder or storage folder, which is located in the root of the project.
When running tests jest checks the src folder, then tries to mount the images stored from the root and can't find them.
I have tried many different ways to fix this issue, but can't seem to find the solution.
Here's a shortlist of what I already tried:
Changing regex to check for image files and lead it to the correct folder using the moduleNameMapper option in the Jest config file.
I read something on Stack about using a "mock" folder that exports the images files through javascript, but that didn't work.
Using the modulePaths option in the Jest config file.
Creating an alias in the tsconfig.js for the assets folder and using that in the moduleNameMapper
Tried a different approach in the VueJS component and test file to load assets, which broke the compiling process (so I reverted that).
Current Jest Config file
module.exports = {
moduleFileExtensions: [
"ts",
"tsx",
"vue",
"js",
"json"
],
watchman: false,
moduleNameMapper: {
"/\.(gif|jpg|jpeg|tiff|png)$/i": "<rootDir>/public/assets/images/$1",
"^#/(.*)$": "<rootDir>/src/$1",
"^~/(.*)$": "<rootDir>/src/$1",
"^~~/(.*)$": "<rootDir>/src/$1"
},
transform: {
// process js with `babel-jest`
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
// process `*.vue` files with `vue-jest`
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
// process `*.ts` files with `ts-jest`
"^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest",
},
snapshotSerializers: [
"<rootDir>/node_modules/jest-serializer-vue"
],
collectCoverage: true,
collectCoverageFrom: [
"<rootDir>/src/components/**/*.vue",
"<rootDir>/src/pages/**/*.vue",
"<rootDir>/src/layouts/**/*.vue"
],
testMatch: [
'**/tests/Unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
}
Current folder structure (only folders we use for the test)
project folder
- public
-- assets
--- **images**
- src
-- components
--- **mounted component** (works)
- tests
-- Unit
--- mountedComponent.spec.ts
Any suggestions?
Do I fix the jest.config?
Is there something wrong with the syntax?
Do I have to fix the tsconfig?
I've had a similar issue and it goes down to typescript not being able to import that file.
I've solved it by adding file type definition to files.d.ts:
declare module "*.pdf" {
const file: Buffer;
export default file;
}
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module "*.png" {
const src: string;
export default src;
}
Referring to this file in tsconfig.json:
{
"compilerOptions": {
/* ... */
},
"files": ["./src/#types/files.d.ts"],
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
And adding file transforms to jest.config.js:
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
roots: ["<rootDir>/src/"],
moduleNameMapper: {
"#app/(.*)": "<rootDir>/src/$1",
"#lib/(.*)": "<rootDir>/src/lib/$1",
},
transform: { // Transforms here
"\\.(gql|graphql)$": "#jagi/jest-transform-graphql",
"\\.(html|html|txt|pem|key)$": "./jest-transform-text.js",
"\\.(p12|pdf|otf|ttf)$": "./jest-transform-buffer.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
coverageReporters: ["text", "lcov"],
};
Examples of transform files:
// jest-transform-buffer.js
"use strict";
const fs = require("fs");
module.exports = {
process(src, filename) {
const data = fs.readFileSync(filename, "hex");
return (
'module.exports=Buffer.from("' +
data +
'","hex");module.exports.default=module.exports;'
);
},
};
And for images (or other files where you only need a filename) from create react app:
'use strict';
const path = require('path');
const camelcase = require('camelcase');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.svg$/)) {
// Based on how SVGR generates a component name:
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
const pascalCaseFilename = camelcase(path.parse(filename).name, {
pascalCase: true,
});
const componentName = `Svg${pascalCaseFilename}`;
return `const React = require('react');
module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
return {
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: ref,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
};
}),
};`;
}
return `module.exports = ${assetFilename};`;
},
};
I'm using jest with babel and i want to debug my test.
I'm able to debug jest with node --debug-brk ./node_modules/.bin/jest --runInBand [any other arguments here] but lose all es6 source code info.
I know source-map-support is a babel feature not jest's, but jest should somehow tell babel to include source-map-support.
so far I've tried
config transform for jest
"transform": {
".*": "/scripts/jest/preprocessor.js"
}
in my preprocess.js file I have
const register=require("babel-register")
register();
....
module.exports = {
process: function(src, filename) {
const options = assign({}, babelOptions, {
filename: filename,
retainLines: true,
sourceMap:true, // I added this line
});
return babel.transform(src, options).code;
}
but this doesn't work. any ideas?
I have an application with the server code running on Node.js and using Dojo. I have a config module defined like:
define([
'dojo/node!nconf',
'dojo/_base/config'
], function (nconf, dojoConfig) {
nconf.argv().file({
file: dojoConfig.baseDir + '/config.json'
});
console.log('-- file name:', dojoConfig.baseDir + '/config.json');
console.log('-- context:', nconf.get('context'));
// ... logic here ...
return nconf.get(nconf.get('context'));
});
To be able to unit test this module, I've written two mocks: one for the nconf native module and one for dojoConfig. Here is the test:
define([
'require',
'intern!object',
'intern/chai!assert'
], function (require, registerSuite, assert) {
registerSuite({
name: 'config utility',
'load default settings': function () {
require.undef('dojo/node!nconf');
require.undef('dojo/_base/config');
require({ map: {
'*': {
'dojo/node!nconf': 'server/utils/tests/nconfMock',
'dojo/_base/config': 'server/utils/tests/dojoConfigMock'
}
}});
require(['../config', './nconfMock'], this.async(1000).callback(
function (config, nconfMock) {
assert.isNotNull(config);
assert.isNotNull(nconf);
// assert.deepEqual(config, nconfMock.contextSettings.test);
}
));
}
});
});
I can see that my mock of dojoConfig is correctly loaded, but not the mock of the nconf module. During a webcast on Intern, Dylan mentioned that the mapping does not consider the plugin, that there's the way to force dojo/node module to load this nconfMock. Would you mind to give me more details?
Obviously, this is verbose, so if this continues to be a common request, we’ll probably do something to make it simpler in the future.
Important note: Without mapping dojo/node to intern/node_modules/dojo/node, the loading of my initial config module as defined above fails in the Intern environment. The mapping is done in the intern.js file. The reported error is:
Error: node plugin failed to load because environment is not Node.js
at d:/git/fco2/src/libs/dojo/node.js:3:9
at execModule (d:\git\fco2\node_modules\intern\node_modules\dojo\dojo.js:512:54)
at d:\git\fco2\node_modules\intern\node_modules\dojo\dojo.js:579:7
at guardCheckComplete (d:\git\fco2\node_modules\intern\node_modules\dojo\dojo.js:563:4)
at checkComplete (d:\git\fco2\node_modules\intern\node_modules\dojo\dojo.js:571:27)
at onLoadCallback (d:\git\fco2\node_modules\intern\node_modules\dojo\dojo.js:653:7)
at d:\git\fco2\node_modules\intern\node_modules\dojo\dojo.js:758:5
at fs.js:266:14
at Object.oncomplete (fs.js:107:15)
Solution: As suggested by Colin Snover below, I now use Mockery. I also do NOT use the contextual require, only the default one. Here is a (simplified) solution working with the version 1.9.3 of the Dojo toolkit.
define([
'intern!object',
'intern/chai!assert',
'intern/node_modules/dojo/node!mockery',
'./nconfMock'
], function (registerSuite, assert, mockery, nconfMock) {
registerSuite({
name: 'config utility',
teardown: function () {
mockery.disable();
mockery.deregisterAll();
require({ map: { '*': { 'dojo/_base/config': 'dojo/_base/config' } } });
require.undef('dojo/_base/config');
require.undef('server/utils/config');
},
'load default settings': function () {
mockery.enable();
mockery.registerMock('nconf', nconfMock);
require({ map: { '*': { 'dojo/_base/config': 'server/utils/tests/dojoConfigMock' } } });
require.undef('dojo/_base/config');
require.undef('server/utils/config');
require(
['server/utils/config'],
this.async(1000).callback(function (config) {
assert.isNotNull(config);
assert.deepEqual(config, nconfMock.contextSettings.test);
})
);
}
});
});
Thanks, Dom
In order to mock a Node.js dependency, you will probably want to simply use one of the various available projects for mocking Node.js modules. Mockery is a good choice since it’s stand-alone.
Since it looks like you’re using dojo/node and not the one from Intern, in your case, you’d do it like this:
define([
'intern!object', 'dojo/node!mockery', 'dojo/Deferred', 'require'
], function (registerSuite, mockery, Deferred, require) {
var moduleUsingMock;
registerSuite({
setup: function () {
var dfd = new Deferred();
mockery.enable();
mockery.registerMock('module-to-mock', mockObject);
require([ 'module-using-mock' ], function (value) {
moduleUsingMock = value;
dfd.resolve();
});
return dfd.promise;
},
teardown: function () {
mockery.disable();
},
'some test': function () {
moduleUsingMock.whatever();
// ...
}
});
});