I have to use a non open source pub/sub library for websockets (diffusion) and have to stick to a specific version because it's what is used on the server side and I have no control about it.
The issue is that in one single util in their code base they use the reserved keyword interface and that triggers a minification error that breaks the build:
Failed to minify the code from this file:
./node_modules/babel-loader/lib??ref--6-oneOf-2!./node_modules/diffusion/src/node_modules/util/interface.js:127
Read more here: bit.ly/CRA-build-minify
Which regex can I use to exclude this dependency from minification?
config.optimization.minimizer[0].options.exclude = /node_modules/; does not ecxlude it from minification.
config.optimization.minimizer[0].options.exclude = /^.*(node_modules|.js).*$/; works but it's too broad
For more context, this is the code of the dependency that is causing the minification to fail:
node_modules/diffusion/src/node_modules/util/interface.js
function _implements() {
var args = Array.prototype.slice.call(arguments, 0);
var impl = args.pop();
var unsatisfied = [];
...
// The joys of duck type. Quack quack
args.forEach(function(interface) { <<<<<<<<<<<<<<<<<<<<<
unsatisfied = unsatisfied.concat(interface(impl));
});
This is how the webpack config file looks like before my overrides: (we are not allowed to eject)
"optimization": {
"minimizer": [
{
"options": {
"test": {
},
"extractComments": false,
"sourceMap": true,
"cache": true,
"parallel": true,
"terserOptions": {
"output": {
"ecma": 5,
"comments": false,
"ascii_only": true
},
"parse": {
"ecma": 8
},
"compress": {
"ecma": 5,
"warnings": false,
"comparisons": false,
"inline": 2
},
"mangle": {
"safari10": true
}
}
}
},
{
"pluginDescriptor": {
"name": "OptimizeCssAssetsWebpackPlugin"
},
"options": {
"assetProcessors": [
{
"phase": "compilation.optimize-chunk-assets",
"regExp": {
}
}
],
This has been fixed as of version 6.0.0
It's easier to fix when not ejecting IMO.
You're probably using old version or react-scripts, just upgrade it to react-scripts#>=2.0.0.
Taken from this section of React Documentation
Related
I have the following configuration file for Cucumber:
const common = {
// ...common settings here
};
module.exports = {
ci: {
...common,
format: [
"progress",
],
},
default: {
...common,
format: [
"progress-bar",
],
},
};
This works flawlessly. I can specify any of the defined profiles, etc. I'm looking migrate, if possible, the same configuration file into ESM format, but I just don't quite understand how to make the default profile work. If I do:
export default {
ci: { /* ... */ },
default: { /* ... */ },
};
...and place "type": "module" in package.json, it stops working and the configuration is not understood anymore.
Can anyone spot what's the catch there? Would be great a small explanation if this can be done :)
I was initially confused by the default keyword ;)
This is a working (ESM) configuration with multiple profiles:
const common = {
/* ... */
};
export const ci = {
...common,
format: [
"progress",
],
};
export default {
...common,
format: [
"progress-bar",
],
};
Mocha.js functions like describe() and it() are available everywhere in my project, but I only want them to be only accessible and callable in my "test" folder. Is there any way to do that?
P.S. I'm using typescript if that makes a difference.
I think your question is really vague. Still I am going to try to answer assming that you use eslint...
In your .eslintrc.js (or eslint config file), you may have:
module.exports = {
env: {
browser: true,
es6: true,
node: true,
mocha: true
}
(...)
Where you should have:
module.exports = {
env: {
browser: false,
es6: true,
node: true
},
(...)
overrides: [
{
files: 'test/**/*.spec.js',
env: {
mocha: true,
},
},
],
Recently I've moved a project from plain old JavaScript to TypeScript. Previously every test was running fine. Right after the change some test cases just broke and I can not understand why. I'm using Vue.js alongside vue-test-utils and jest.
jest.config.js
module.exports = {
collectCoverageFrom: [
'/src/**/*.{js,jsx,vue}',
'!**/node_modules/**',
'!**/vendor/**',
],
moduleFileExtensions: [
'ts',
'js',
'json',
'vue',
],
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.js$': 'babel-jest',
'^.+\\.ts$': 'ts-jest',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vuex-class-modules).+\\.js$',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
},
setupFilesAfterEnv: [
'#testing-library/jest-dom/extend-expect',
],
};
A snippet of an example test that's failing right now, which has been working fine previously.
some.test.js
function mountStore(loggedInState) {
const store = new Vuex.Store({
modules: {
customer: {
namespaced: true,
state: {
isLoggedIn: loggedInState,
},
actions,
},
},
});
return shallowMount(Component, {
localVue,
store,
router,
stubs: { 'router-link': RouterLinkStub },
});
}
describe('Test with customer logged in at beginning', () => {
let wrapper;
beforeEach(() => {
wrapper = mountStore(true);
});
it('should redirect to home if user is logged in on init', () => {
expect(wrapper.vm.$route.name).toBe('Home');
});
});
Regarding this specific test case, the result is as following.
expect(received).toBe(expected) // Object.is equality
Expected: "Home"
Received: null
I also noticed upgrading all dependencies (including some Jest dependencies) leads to even more failing tests. So I expect that to (probably) be the reason, since I just added TypeScript support later on. However, I don't know what dependency combination would lead to a faulty behavior.
Relevant dependencies I've updated, which eventually would lead to even more failing tests.
jest
ts-jest
babel-jest
Add
preset: 'ts-jest/presets/js-with-babel',
to jest.config.js since you use ts-jest with babel-jest. Source.
Did you try adding #types/jest? And adding it in your tsconfig.json:
"types": ["#types/node", "#nuxt/types", "#types/jest", "nuxt-i18n"]
I was having a similar issue. #winwiz1's answer worked for me, but I needed to put it inside the project definition as I'm using the projects syntax. I would just leave this as a comment on #winwiz1's answer, but StackOverflow mangles the format.
projects: [
{
"displayName": "test-unit",
"preset": "ts-jest",
"testMatch": ["<rootDir>/test-unit/**/*\\.tests\\.[t|j]s"]
}
],
I'm facing the next situation with Cucumber in Protractor (With Webstorm)
When I try to run the only feature that I have, it displays the next message (I have already defined the steps in a class)
Undefined. Implement with the following snippet:
Given('I open the url {string}', function (string) {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});
...
1 scenario (1 undefined)
4 steps (4 undefined)
0m00.000s
Process finished with exit code 1
This is my config file (conf.js)
exports.config = {
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
seleniumAddress: 'http://localhost:4444/wd/hub',
baseUrl: 'https://www.afphabitat.cl/portalPrivado_FIXWeb/public/login.htm',
ignoreSynchronization: true,
getPageTimeout: 60000,
allScriptsTimeout: 50000,
defaultTimeoutInterval: 30000,
specs: ['features/*.feature'],
cucumberOpts: {
compiler: [],
require: ['step_defs/*.js'],
dryRun : false,
tags: ['#wip'],
monochrome: true,
strict: true,
plugin: "json",
format: 'json:reports/cucumber-report.json',
resultJsonOutputFile: 'reports/cucumber-report.json'
},
multiCapabilities:
[{
'browserName': 'chrome',
chromeOptions: {
binary: process.env.CHROME_BIN,
args: ['--no-sandbox', '--start-maximized']
}
},
{
'browserName': 'firefox',
args: ['--no-sandbox','--start-maximized']
}],
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
}
}
Next one is my step definition file (step_defs_Login.js)
import { Given, Then, When } from "cucumber";
import { browser, by, element, } from 'protractor';
Given('I open the url {string}', function (string) {
browser.get(string);
// callback();
});
When('proceed to enter my username as {string}', function (string1) {
let username = element(by.id('j_username_input')).clear();
username = element(by.id('j_username_input')).sendKeys(string1);
// callback();
});
When('proceed to enter my password as {string}', function (string2) {
let password = element(by.id('j_password')).clear();
password = element(by.id('j_password')).sendKeys(string2);
// callback();
});
Then('I have been logged in successfully', function () {
element(by.id('button')).click();
// callback();
});
Don't forget the JSON File (package.json)
{
"name": "package",
"version": "1.0.0",
"description": "First Protractor Cucumber project",
"main": "conf.js",
"scripts": {
"test": "cucumberjs"
},
"keywords": [
"TAE"
],
"author": "zzz",
"license": "ISC",
"devDependencies": {
"cucumber": "^5.1.0",
"selenium-webdriver": "^4.0.0-alpha.5"
},
"dependencies": {
"protractor": "latest"
}
}
I don't know if this is necessary or not, but this is my Hooks file (hooks.js)
let {defineSupportCode} = require('cucumber');
defineSupportCode (function ({After, Before}){
Before(function () {
// return this.driver.manage().window().maximize()
return this.browser.manage().window().maximize();
})
After(function () {
return this.driver.quit()
})
});
I have installed the next ones:
Protractor version 5.4.2
Node version 10.16.3
NPM 6.9.0
This is the project structure:
And this is the Run Configurations
Can anybody please help me with this???
Have you got the string you are passing in the feature file enclosed in "double quotes"?
I open the url "myUrl"
Try
require: ['../step_defs/*.js']
or
require: ['./step_defs/*.js']
In cucumberOpts object
Looks like you are using Webstrom to work on this cucumber framework. As I know, Webstrom will find the respective step definition for that step automatically. Coming to the issue,
1) Open your feature file and check that particular step is showing as implemented or not
2) Try to replace {string} with regular expression (.*) which will accept any type of data and check same step in feature file- step
Check both above cases
I'm trying to write some visual tests and running into the mentioned error with the protractor-image-comparison of version 2.0.1. Even though there is an update of the library I decided to stick to the older version since I experience some issues with the newest one as well.
My setup is:
//protractor.conf.js:
const { SpecReporter } = require('jasmine-spec-reporter');
const { join } = require('path');
const { ProtractorImageComparison } = require('protractor-image-comparison');
exports.config = {
allScriptsTimeout: 11000,
specs: ['./src/**/*-spec.ts'],
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: [
// '--headless',
'--disable-gpu', '--window-size=1600,950', '--no-sandbox'],
},
},
SELENIUM_PROMISE_MANAGER: false,
directConnect: true,
framework: 'jasmine2',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {
},
},
onPrepare() {
require('ts-node').register({
project: join(__dirname, './tsconfig.e2e.json'),
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
browser.protractorImageComparison = new ProtractorImageComparison({
baselineFolder: join(__dirname, '/src/resources/baseline/'),
screenshotPath: join(__dirname, '/src/tmp/'),
formatImageName: '{tag}',
autoSaveBaseline: false
});
},
};
I came across this issue today and apparently from version 3.0.1 this package now functions as a plugin and not a class which needs to be instantiated.
I managed to get it working adding the following code to my conf.js:
plugins: [
{
inline: require('protractor-image-comparison'),
// package: 'protractor-image-comparison' //protractor is installed globally so it is checking for plugin globally also
options: {
baselineFolder: './testArtifacts/screen-compare/baselines/',
screenshotPath: './testArtifacts/screen-compare/screenshots/',
formatImageName: `{tag}-{logName}-{width}x{height}`,
savePerInstance: true,
},
},
],
Note: For me protractor was installed globally so I needed this workaround using inline instead of package to get it searching for the plugin module locally.