Java Script Test Automation(React+Karma+Jasmin)

Ubuntu에 react Test 자동화를 해보자!

환경

VirtualBox

ubuntu-18.04.1-desktop-amd64.iso

karam & jasmin

Ubuntu 설치

Kernel driver not installed (rc=-1908) Make sure the kernel module has been loaded successfully. where: suplibOsInit what: 3 VERR_VM_DRIVER_NOT_INSTALLED (-1908) - The support driver is not installed. On linux, open returned ENOENT. VM 실행 시에 다음과 같은 Error가 발생할 수 있다. 그럴 땐 시스템 환경설정 >  보안 및 개인정보 보호에 진입해서 Oracle 앱 허용을 해줘야 한다.

karam.conf.js

// Karma configuration // Generated on Fri Nov 23 2018 12:15:54 GMT+0900 (KST) var path = require('path') module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['browserify','jasmine'], // list of files / patterns to load in the browser files: [ '*.js' ], // list of files / patterns to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { '*.js': ['browserify'] }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['PhantomJS'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) }

package.json

{ "name": "react", "version": "0.1.4", "description": "Mobile Web", "main": "index.js", "engines": { "node": ">=5.0.0", "npm": "^3.0.0" }, "scripts": { "clean": "rimraf dist", "compile": "node webpack/scripts/compile", "build": "npm run clean && cross-env NODE_ENV=production npm run compile", "start": "cross-env NODE_ENV=development node webpack/scripts/start", "test": "cross-env NODE_ENV=test jest --config=./jest-config.json --no-cache", "test:watch": "npm test -- --watch", "lint": "eslint .", "lint:fix": "npm run lint -- --fix", "precommit": "lint-staged", "prepush": "npm test" }, "lint-staged": { "*.js": "eslint" }, "repository": { "type": "git", "url": "git+https://github.com/project.git" }, "author": "joe", "license": "UNLICENSED", "private": true, "dependencies": { "airbnb-js-shims": "^1.3.0", "animated-scroll-to": "^1.1.6", "bowser": "^1.7.1", "briz-react-swipe": "^5.0.12", "browserify": "^16.2.3", "classnames": "^2.2.5", "compression": "^1.6.2", "copy-to-clipboard": "^3.0.7", "express": "^4.14.0", "js-cookie": "^2.1.4", "lodash.isempty": "^4.4.0", "moment": "^2.18.1", "normalize.css": "^7.0.0", "object-assign": "^4.1.1", "promise": "^7.1.1", "prop-types": "^15.6.0", "qs": "^6.4.0", "raf": "^3.3.2", "react": "^16.0.0", "react-addons-shallow-compare": ">=0.14", "react-async-script-loader": "^0.3.0", "react-dates": "^12.6.0", "react-dom": "^16.0.0", "react-ga": "^2.2.0", "react-google-maps": "next", "react-infinite-scroller": "^1.0.12", "react-lazyload": "^2.2.7", "react-number-format": "^1.2.1", "react-redux": "^5.0.4", "react-router": "^3.2.0", "react-transition-group": "^1.1.3", "redbox-react": "^1.3.6", "redux": "^3.7.2", "redux-thunk": "^2.2.0", "spin.js": "^2.3.2", "sweetalert2": "^6.6.5", "whatwg-fetch": "^2.0.3" }, "devDependencies": { "babel-core": "^6.24.1", "babel-eslint": "^7.2.3", "babel-jest": "^20.0.3", "babel-loader": "^7.0.0", "babel-plugin-dynamic-import-node": "^1.0.2", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-env": "^1.4.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "babel-runtime": "^6.20.0", "browserify": "^16.2.3", "chalk": "^1.1.3", "codecov": "^2.2.0", "connect-history-api-fallback": "^1.3.0", "cross-env": "^5.0.0", "css-loader": "^0.28.1", "enzyme": "^2.8.2", "eslint": "^4.1.1", "eslint-config-standard": "^10.2.1", "eslint-config-standard-react": "^5.0.0", "eslint-plugin-babel": "^4.1.1", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jest": "^20.0.3", "eslint-plugin-node": "^4.2.2", "eslint-plugin-promise": "^3.5.0", "eslint-plugin-react": "^7.1.0", "eslint-plugin-standard": "^3.0.1", "extract-text-webpack-plugin": "^2.1.0", "figures": "^2.0.0", "file-loader": "^0.11.1", "fs-extra": "^3.0.1", "html-webpack-plugin": "^2.24.1", "husky": "^0.13.3", "jasmine-core": "~2.4.1", "jest": "^20.0.4", "karma": "^3.1.1", "karma-browserify": "^5.3.0", "karma-chrome-launcher": "1.x || ~0.2.2", "karma-firefox-launcher": "1.x || ~0.1.7", "karma-jasmine": "1.x || ~0.3.7", "karma-junit-reporter": "~0.0.2", "karma-phantomjs-launcher": "^1.0.4", "lint-staged": "^3.4.2", "load-grunt-tasks": "^3.4.1", "node-sass": "^4.5.3", "react": "^16.6.3", "react-test-renderer": "^16.0.0", "regenerator-runtime": "^0.10.5", "rimraf": "^2.6.1", "sass-loader": "^6.0.5", "style-loader": "^0.17.0", "url-loader": "^0.5.8", "watchify": "^3.11.0", "webpack": "^2.5.1", "webpack-dev-middleware": "^1.8.4", "webpack-hot-middleware": "^2.13.2", "yargs": "^8.0.1" }, "jest": { "modulePaths": [ "<rootDir>/src" ], "moduleDirectories": [ "node_modules", "src" ], "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js" }, "moduleFileExtensions": [ "js", "jsx" ], "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.jsx?$", "globals": { "__DEV__": false, "__TEST__": true, "__PROD__": false }, "coverageDirectory": "./coverage/", "collectCoverage": true }, "resolutions": { "react-native/metro-bundler": "0.19.0" }, "node": { "global": "window", "process": true, "crypto": "empty", "module": false, "clearImmediate": false, "setImmediate": false } }

깔끔하게 library 설치 방법

rm -rf node_modules/ npm cache clean npm install

실행

karma start karma.conf.js --browsers PhantomJS --single-run --log-level debug

Output

26 11 2018 14:48:48.212:DEBUG [config]: Loading config /home/joe/karma/mobile-web-react/karma.conf.js 26 11 2018 14:48:48.216:DEBUG [config]: autoWatch set to false, because of singleRun 26 11 2018 14:48:48.217:DEBUG [karma-server]: Final config { "LOG_DISABLE": "OFF", "LOG_ERROR": "ERROR", "LOG_WARN": "WARN", "LOG_INFO": "INFO", "LOG_DEBUG": "DEBUG", "frameworks": [ "browserify", "jasmine" ], "protocol": "http:", "port": 9876, "listenAddress": "0.0.0.0", "hostname": "localhost", "httpsServerConfig": {}, "basePath": "/home/joe/karma/mobile-web-react", "files": [ { "pattern": "/home/joe/karma/mobile-web-react/*.js", "served": true, "included": true, "watched": true, "nocache": false, "weight": [ 1, 0, 1, 0, 0, 0 ] } ], "browserConsoleLogOptions": { "level": "debug", "format": "%b %T: %m", "terminal": true }, "customContextFile": null, "customDebugFile": null, "customClientContextFile": null, "exclude": [ "/home/joe/karma/mobile-web-react/karma.conf.js" ], "logLevel": "DEBUG", "colors": true, "autoWatch": false, "autoWatchBatchDelay": 250, "restartOnFileChange": false, "usePolling": true, "reporters": [ "progress" ], "singleRun": true, "browsers": [ "PhantomJS" ], "captureTimeout": 60000, "proxies": {}, "proxyValidateSSL": true, "preprocessors": { "/home/joe/karma/mobile-web-react/*.js": [ "browserify" ] }, "urlRoot": "/", "reportSlowerThan": 0, "loggers": [ { "type": "console", "layout": { "type": "pattern", "pattern": "%[%d{DATE}:%p [%c]: %]%m" } } ], "transports": [ "polling", "websocket" ], "forceJSONP": false, "plugins": [ "karma-*" ], "client": { "args": [], "useIframe": true, "runInParent": false, "captureConsole": true, "clearContext": true }, "defaultClient": { "args": [], "useIframe": true, "runInParent": false, "captureConsole": true, "clearContext": true }, "browserDisconnectTimeout": 2000, "browserDisconnectTolerance": 0, "browserNoActivityTimeout": 30000, "processKillTimeout": 2000, "concurrency": null, "failOnEmptyTestSuite": true, "retryLimit": 2, "detached": false, "crossOriginAttribute": true, "browserSocketTimeout": 20000, "cmd": "start", "configFile": "/home/joe/karma/mobile-web-react/karma.conf.js" } 26 11 2018 14:48:48.220:DEBUG [plugin]: Loading karma-* from /usr/local/lib/node_modules 26 11 2018 14:48:48.220:DEBUG [plugin]: Loading plugin /usr/local/lib/node_modules/karma-browserify. 26 11 2018 14:48:48.431:DEBUG [plugin]: Loading plugin /usr/local/lib/node_modules/karma-coverage. 26 11 2018 14:48:48.693:DEBUG [plugin]: Loading plugin /usr/local/lib/node_modules/karma-jasmine. 26 11 2018 14:48:48.696:DEBUG [plugin]: Loading plugin /usr/local/lib/node_modules/karma-phantomjs-launcher. 26 11 2018 14:48:48.764:DEBUG [framework.browserify]: created browserify bundle: /tmp/1830825872ce6d6f085118f36ddf651b.browserify 26 11 2018 14:48:48.784:DEBUG [framework.browserify]: add bundle to config.files at position 0 26 11 2018 14:48:48.791:DEBUG [web-server]: Instantiating middleware 26 11 2018 14:48:48.853:DEBUG [watcher]: Excluded file "/home/joe/karma/mobile-web-react/karma.conf.js" 26 11 2018 14:48:48.862:DEBUG [framework.browserify]: building bundle 26 11 2018 14:48:48.865:DEBUG [framework.browserify]: updating project.config.js in bundle 26 11 2018 14:48:48.865:DEBUG [framework.browserify]: updating test.js in bundle 26 11 2018 14:48:49.570:DEBUG [framework.browserify]: bundling 26 11 2018 14:48:49.661:INFO [framework.browserify]: bundle built 26 11 2018 14:48:49.663:INFO [karma-server]: Karma v3.1.1 server started at http://0.0.0.0:9876/ 26 11 2018 14:48:49.667:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited 26 11 2018 14:48:49.680:INFO [launcher]: Starting browser PhantomJS 26 11 2018 14:48:49.681:DEBUG [temp-dir]: Creating temp dir at /tmp/karma-86591091 26 11 2018 14:48:49.683:DEBUG [launcher]: /usr/local/lib/node_modules/phantomjs/lib/phantom/bin/phantomjs /tmp/karma-86591091/capture.js 26 11 2018 14:48:49.834:DEBUG [web-server]: serving: /usr/local/lib/node_modules/karma/static/client.html 26 11 2018 14:48:49.863:DEBUG [web-server]: serving: /usr/local/lib/node_modules/karma/static/karma.js 26 11 2018 14:48:49.923:DEBUG [karma-server]: A browser has connected on socket bYWR4pruFDshDCE9AAAA 26 11 2018 14:48:49.978:DEBUG [web-server]: upgrade /socket.io/?EIO=3&transport=websocket&sid=bYWR4pruFDshDCE9AAAA 26 11 2018 14:48:50.022:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket bYWR4pruFDshDCE9AAAA with id 86591091 26 11 2018 14:48:50.031:DEBUG [launcher]: PhantomJS (id 86591091) captured in 0.364 secs 26 11 2018 14:48:50.047:DEBUG [phantomjs.launcher]: 26 11 2018 14:48:50.051:DEBUG [middleware:karma]: custom files null null null 26 11 2018 14:48:50.051:DEBUG [middleware:karma]: Serving static request /context.html 26 11 2018 14:48:50.051:DEBUG [web-server]: serving: /usr/local/lib/node_modules/karma/static/context.html 26 11 2018 14:48:50.054:WARN [middleware:karma]: Invalid file type, defaulting to js. browserify 26 11 2018 14:48:50.064:DEBUG [middleware:source-files]: Requesting /absolute/usr/local/lib/node_modules/karma-jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?1f336da4025323945fc818c69bdc564a85081e4e 26 11 2018 14:48:50.064:DEBUG [middleware:source-files]: Fetching /usr/local/lib/node_modules/karma-jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js 26 11 2018 14:48:50.065:DEBUG [web-server]: serving (cached): /usr/local/lib/node_modules/karma-jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js 26 11 2018 14:48:50.088:DEBUG [middleware:source-files]: Requesting /base/test.js?f1e8afc0445d448008af53b945365a082c4f2f4d 26 11 2018 14:48:50.088:DEBUG [middleware:source-files]: Fetching /home/joe/karma/mobile-web-react/test.js 26 11 2018 14:48:50.089:DEBUG [middleware:source-files]: Requesting /base/project.config.js?5ec2aa573f32095500773291513ae6910e25a090 26 11 2018 14:48:50.089:DEBUG [middleware:source-files]: Fetching /home/joe/karma/mobile-web-react/project.config.js 26 11 2018 14:48:50.089:DEBUG [middleware:source-files]: Requesting /absolute/tmp/1830825872ce6d6f085118f36ddf651b.browserify?0d315cdf3617983b1178913f6058fe7a63276fd1 26 11 2018 14:48:50.089:DEBUG [middleware:source-files]: Fetching /tmp/1830825872ce6d6f085118f36ddf651b.browserify 26 11 2018 14:48:50.089:DEBUG [middleware:source-files]: Requesting /absolute/usr/local/lib/node_modules/karma-jasmine/lib/boot.js?945a38bf4e45ad2770eb94868231905a04a0bd3e 26 11 2018 14:48:50.089:DEBUG [middleware:source-files]: Fetching /usr/local/lib/node_modules/karma-jasmine/lib/boot.js 26 11 2018 14:48:50.090:DEBUG [middleware:source-files]: Requesting /absolute/usr/local/lib/node_modules/karma-jasmine/lib/adapter.js?3098011cfe00faa2a869a8cffce13f3befc1a035 26 11 2018 14:48:50.090:DEBUG [middleware:source-files]: Fetching /usr/local/lib/node_modules/karma-jasmine/lib/adapter.js 26 11 2018 14:48:50.090:DEBUG [web-server]: serving (cached): /home/joe/karma/mobile-web-react/test.js 26 11 2018 14:48:50.091:DEBUG [web-server]: serving (cached): /home/joe/karma/mobile-web-react/project.config.js 26 11 2018 14:48:50.091:DEBUG [web-server]: serving (cached): /tmp/1830825872ce6d6f085118f36ddf651b.browserify 26 11 2018 14:48:50.093:DEBUG [web-server]: serving (cached): /usr/local/lib/node_modules/karma-jasmine/lib/boot.js 26 11 2018 14:48:50.094:DEBUG [web-server]: serving (cached): /usr/local/lib/node_modules/karma-jasmine/lib/adapter.js 26 11 2018 14:48:50.096:DEBUG [web-server]: serving: /usr/local/lib/node_modules/karma/static/context.js PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.013 secs / 0.001 secs) TOTAL: 1 SUCCESS 26 11 2018 14:48:50.144:DEBUG [karma-server]: Run complete, exiting. 26 11 2018 14:48:50.145:DEBUG [launcher]: Disconnecting all browsers 26 11 2018 14:48:50.146:DEBUG [framework.browserify]: cleaning up 26 11 2018 14:48:50.156:DEBUG [launcher]: Process PhantomJS exited with code null 26 11 2018 14:48:50.156:DEBUG [temp-dir]: Cleaning temp dir /tmp/karma-86591091 26 11 2018 14:48:50.162:DEBUG [launcher]: Finished all browsers

Sample Test Code(test.js)

describe('ChromeLauncher', function () { it('works', function () { expect(2).toBe(2); }) })

Trouble Shooting

ReferenceError: Can't find variable: process

ReferenceError: Can't find variable: process karam.conf.js frameworks: ['browserify','jasmine'], preprocessors: { '*.js': ['browserify'] },

browserify cannot find npm module

npm install -g browserify