Bitbucket - No binary for Chrome browser on your platform - reactjs

I'm working on basic react project and I'm able to run test with karma and mocha on my mac with chrome.
But bitbucket pipeline says that I do not have a chrome, so the question is how to install chrome there and will I have to install it every time with build?
my yml
image: node:7.10.0
pipelines:
default:
- step:
script:
- npm install -g bower
- bower install --allow-root
- npm install
- npm test
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha'],
files: [
'./tests/*.js'
],
exclude: [],
preprocessors: {
'./tests/*.js': ['webpack']
},
// webpack configuration
webpack: require('./webpack.dev.js'),
webpackMiddleware: {
stats: 'errors-only'
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'], //run in Chrome
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
concurrency: Infinity
});
};

The line image: node:7.10.0 in your bitbucket-pipelines.yml file specifies a Docker image to use. In your case, it’s a plain node version 7.10.0 image, so there is no Chrome contained in it.
There are two things you can do:
Read about Docker, learn how to create your own image that includes Chrome (or whatever other software) and then use that image in your pipeline
Or, probably far easier: search for an existing Docker image created by someone else which includes node, Chrome and possibly other software you might need. Then, use that image in the image: <image-name> configuration line.
In either case, once you have a suitable image, this will be needed when your pipeline is run and Chrome will be available immediately, and you will not need any kind of “installation”.

Related

Installing common library seems to install additional node_modules within the library

Overview
I have created a common react library to be used within a range of applications. I had no issues with it prior to upgrading on of the applications to React 18.
I am using rollup to do the library configuration and the library also has a documentation site.
Issue
When I download the package from artifacts it seems fine and works but when I install the package it seems to create a node_modules folder within the library and install an older version of React.
This causes a React version mismatch error and stops the app from running until I manually delete the node_modules folder, it then runs correctly without issue.
Additionally this behaviour doesn't happen in a different application we have which is running React 17.0.2, it seems to only have become an issue in our React 18 apps.
Example
Here you can see that the package has it's own version of React installed which doesn't exist when I download the package directly from artifacts.
Rollup configuration
The library is running React 18 and so is the application and we use Rollup to do the library configuration.
export default {
input: './src/lib/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
preserveModules: false
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
preserveModules: false
}
],
plugins: [
peerDepsExternal(),
commonjs(),
typescript({
tsconfigOverride: {
exclude: [
'**/__tests__',
'**/*.test.ts',
'**/*.test.tsx',
'./src/tests',
'./src/examples',
'**/*.example.ts',
'**/*.example.tsx',
'**/ApplicationRouter.tsx',
'**/index.tsx'
],
include: ['src/lib']
}
}),
postcss({
extract: true,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/lib',
'./node_modules'
]
}]
]
})
]
};
I think it's the npm version causing the problem. If you are using npm >=v7 try to install the dependencies with
npm i --legacy-peer-deps
And see if that solves the problem.
Also, I see you are creating a React Component Library, there's a tool Create React Package lets you do this with Rollup, Babel, ESLint, TypeScript, and PostCSS already set up. So you can focus on the code rather than configuration.

React- Webpack minifying code and creating bundle in dev env. I want all unbundled files in dev so that i can debug

React- Webpack minifying code and creating bundle in dev env. I want all unbundled files in dev so that i can debug ?
Attached below is webpack.config.js
devServer: {
contentBase: BUILD_DIR,
// port: 9001,
compress: true,
hot: true,
open: true
},
Please let me know which configurations should i be changing?
The primary purpose of WebPack is to bundle JavaScript files.
If you want to debug the js code, try to generate sourcemap files using devtool option.
If you are using webpack version 4 and above, then try to set the mode option to "development".
The sourcemap files will be helpful while debugging in browser.
Similar discussion on another SO thread

Run karma tests in linux terminal

I'm building automation proccess for some AngularJS project. As part of flow I have to ran karma tests via grunt test on linux (CentOS) machine without GUI interface. I have no idea how karma works. Can I run it this way?
The karma-runner for grunt has an example of how to configure karma to run with phantom in CI mode(Run the tests once and then exit). You just have to use this configuration in your Gruntfile:
karma: {
unit: {
configFile: 'karma.conf.js',
runnerPort: 9999,
singleRun: true,
browsers: ['PhantomJS'],
logLevel: 'ERROR'
}
}
The browsers array tells karma that you want to use only PhantomJS(No GUI necessary).

Run distribution code using grunt

i am new in gruntjs. I have installed grunt. Also have app. I minified the code using grunt build. It created the /dist directory in which all minified versions of file is there.
How to run this distribution code(/dist) for production using grunt. Not able to figure it out. grunt serve command take /app directory by default
Use a package like grunt-contrib-connect (enter link description here). First install it:
$ npm install --save-dev grunt-contrib-connect
In your Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-connect');
// ...
// In your config object
grunt.initConfig({
// ...
connect: {
dist: {
options: {
port: 8000,
base: 'dist',
keepAlive: true
}
}
}
// ...
});
Then run your grunt task:
$ grunt connect:dist
And navigate to http://localhost:8000 (or change port in config).
Note: if you use watch, set keepAlive: false.

Connect Karma Runner to Jenkins CI

Help me understand how to connect my Angular-Jasmine-Karma stack to Jenkins. I have an Angular.js web app that I test with Karma (né Testacular) and Jasmine. It looks just like the Angular Tutorial. I want to test it using Jenkins Continuous Integration.
So far I have installed Angular, Jasmine and Karma according to the tutorial. I have installed Jenkins. I can get each working independently. From what I've gleamed, it seems as though Karma should output an XML file that Jenkins ingests, but Karma is not consistently outputting a file, and I do not understand this conceptually. At what point does Jenkins call Karma?
A good answer would outline the pieces needed to do Karma testing in Jenkins.
Just in case, here is my Karma config. It has been mutilated in the name of debugging.
module.exports = function(config){
config.set({
basePath : '../',
files : [
'app/lib/angular/angular.js',
'app/lib/angular/angular-*.js',
'app/js/**/*.js',
'test/unit/**/*.js'
],
exclude : [
'app/lib/angular/angular-loader.js',
'app/lib/angular/*.min.js',
'app/lib/angular/angular-scenario.js'
],
autoWatch : true,
frameworks: ['jasmine'],
browsers : ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-script-launcher',
'karma-jasmine'
],
reporters : ['dots', 'junit', 'coverage'],
junitReporter : {
outputFile: 'test_out/unit.xml',
suite: 'unit'
}
coverageReporter : {
type: 'cobertura',
dir: 'coverage/',
file: 'coverage.xml'
}
});
};
First, you need a karma.conf.js file that lists the following:
reporters: ['progress', 'coverage', 'dots', 'junit'],
junitReporter: {
outputDir: 'karma-results',
outputFile: 'karma-results.xml'
},
browsers: ['PhantomJS'],
singleRun: true
The most important item under the reporters key is junit. This is the add-on that will translate your Karma outputs into an XML file. Your test outputs must be in a specific XML format for Jenkins to parse it. You configure the output location of this XML file using the junitReporter key. In the browsers key, make sure you are specifying PhantomJS since it is most likely your Jenkins server will not have an instance of Chrome or Firefox. The singleRun key makes sure the Karma server is launched before tests are run and shut down when tests are finished.
Next, make sure all of the following node modules are installed on your server by running these commands:
npm install -g karma-cli
npm install -g karma --save-dev
npm install -g phantomjs
npm install -g karma-jasmine --save-dev
npm install -g karma-phantomjs-launcher --save-dev
npm install -g karma-coverage
Visit your Jenkins server through a browser. You can reach your Jenkins server at
http://server-ip-address:8080
Before moving forward, make sure you have the "
Environment Injector Plugin" and "Junit Plugin" installed. Once that is there, click on New Item on the left-hand side of the Jenkins homepage. Have the following parameters set for your job:
The "Properties Content" allows you to assign Jenkins a PATH on your server and allows you to use the karma keyword in the "Command" section below it. The "Command" section tells Jenkins to cd to the folder where your karma.conf.js file resides and start Karma.
If you use the outputDir and outputFile values in my karma.conf.js example above, then you can keep the "Test report XMLs" input value. Otherwise, change that to reflect the new path to where your XML results file will be generated.
Now, whenever you run this job in Jenkins, you'll be able to see whether or not it passed and also the line item results from your tests.
Do you use maven as a build tool? If so, take a look at: https://github.com/eirslett/frontend-maven-plugin. It runs the tests, so Jenkins can show the results.

Resources