본문 바로가기
QA/Test Automation

Java Script Test Automation(React+Karma+Jasmin)

by 화뉘 2018. 11. 26.

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


댓글