차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- study:script_test [2019/07/06 08:18] – [webpack + karma + jasmine] taekgu
+++ study:script_test [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 2: / 줄 2: @@
 ===== webpack + karma + jasmine =====
-webpack + [[study:karma|karma]] + jasmin
 [[https://github.com/devrafalko/webpack-karma-jasmine|devrafalko / webpack-karma-jasmine]]
@@ 줄 18: / 줄 18: @@
 npm install --save-dev karma-jasmine karma-jasmine-html-reporter karma-mocha-reporter karma-webpack
 </code>
+// 여기는 Tama가 추가 //
+ TypeScript를 이용한다면 추가적으로
+npm install --save-dev @types/jasmine ts-loader typescript
+** 기타 로더들 **
+  * babel-loader
+  * css-loader
+  * style-loader
+  * ts-loader
 ==== 2.karma.conf.js파일 생성 ====
 ''karma.conf.js''의 추천설정
@@ 줄 190: / 줄 200: @@
-==== karma.conf.js ====
+==== karma.conf.js의 구성====
-  * frameworks는 테스트 프레임워크 이름를 설정하는데 ''jasmine''문자열로 자스민 프레임워크를 사용한다고 설정했다. 다른 것을 (jasmine, mocha, qunit등) 지원한다.
+  * **basePath** : 모든 패턴(files, exclude등)의 경로를 결정하는데 사용되는 기본경로
-  * files는 테스트와 테스트 대상이 되는 파일, 그리고 필요하면 제이쿼리같은 써드파티 라이브러리등 테스트에 필요한 파일 목록을 나열한다. 나는 src 폴더에는 소스코드, test 폴더는 테스트 코드로 분류했다.
+  * **frameworks**는 테스트 프레임워크 이름를 설정하는데 ''jasmine''문자열로 자스민 프레임워크를 사용한다고 설정했다. 다른 것을 (jasmine, mocha, qunit등) 지원한다.
-  * browsers는 테스트할 브라우저를 기술한다.카르마는 크롬(Chrome), 파이어폭스(Firefox), 사파리(Safari), 인터넷 익스플로러, 오페라 등 설정한 모든 브라우저를 자동으로 실행한다. 추가로 팬텀JS(PhantomJS)나 슬리머JS(SlimerJS)로 헤드리스(headless) 환경에서 테스트할 수도 있다. 이걸로도 충분치 않다면 브라우저스택(BrowserStack)이나 소스(Sauce)로 묶어 가능한 모든 브라우저에서 테스트할 수도 있다.
+  * **files**는 테스트와 테스트 대상이 되는 파일, 그리고 필요하면 제이쿼리같은 써드파티 라이브러리등 테스트에 필요한 파일 목록을 나열한다. 나는 src 폴더에는 소스코드, test 폴더는 테스트 코드로 분류했다.
-  * autoWatch는 테스트 종료후 계속 파일 변화를 감지하면서 테스트를 자동으로 재실행하는 옵션이다. 모카의 –watch 옵션과 같은 기능이다.
+  * **browsers**는 테스트할 브라우저를 기술한다.카르마는 크롬(Chrome), 파이어폭스(Firefox), 사파리(Safari), 인터넷 익스플로러, 오페라 등 설정한 모든 브라우저를 자동으로 실행한다. 추가로 팬텀JS(PhantomJS)나 슬리머JS(SlimerJS)로 헤드리스(headless) 환경에서 테스트할 수도 있다. 이걸로도 충분치 않다면 브라우저스택(BrowserStack)이나 소스(Sauce)로 묶어 가능한 모든 브라우저에서 테스트할 수도 있다.
+  * **autoWatch**는 테스트 종료후 계속 파일 변화를 감지하면서 테스트를 자동으로 재실행하는 옵션이다. 모카의 –watch 옵션과 같은 기능이다.
 ==== files ====
 files배열은 브라우저에 포함된 파일과 karma가 보고, 제공하는 파일을 결정합니다.
@@ 줄 216: / 줄 227: @@
   // this file will be served on demand from disk and will be ignored by the watcher
-  {pattern: 'compiled/app.js.map', included: false, served: true, watched: false, nocache: true}
+  {pattern: 'compiled/app.js.map', included: false, served: true, watched: false, nocache: true},
+      {pattern: 'src/**/*.spec.js', watched:true, served:true, included: true},
+      {pattern: 'src/**/*.spec.ts', watched:true, served:true, included: true},
+      {pattern: 'test/**/*.js', watched:true, served:true, included: true}
+      /*parameters:
+          watched: if autoWatch is true all files that have watched set to true will be watched for changes
+          served: should the files be served by Karma's webserver?
+          included: should the files be included in the browser using <script> tag?
+          nocache: should the files be served from disk on each request by Karma's webserver? */
+      /*assets:
+          {pattern: '*.html', watched:true, served:true, included:false}
+          {pattern: 'images/*', watched:false, served:true, included:false} */
 ],
 </code>
-==== 추가 플러그인 ====
+==== 추가 패키지 ====
-생성한 카르마 컴피그 파일로 카르마를 실행하려면 세 가지 카르마 플러그인을 추가 다운로드 해야한다.
 karma-jasmine: 카르마에서 자스민을 사용할 수 있다.
 jasmine-core: karma-jasmine은 카르마가 자스민을 사용할수 있도록 하는 어답터 역할만 한다. 자스민 코드가 있는 jasmine-core를 추가해야 한다.
 karma-chrome-launcher: 테스트 브라우져로 크롬을 선택했으면 이 플러그인을 설치해서 카르마가 크롬을 사용할 수 있도록 해야한다. 이것도 어답터라고 보면 되겠다.
-<code bash>
-npm install karma-jasmine jasmine-core karma-chrome-launcher --save-dev
-</code>
-==== Install ====
-Now that we have gotten the why? out of the way, let’s see how we can go about implementing our own testing framework:
-First and foremost, we’ll have to install the libraries that we wish to use to test our systems.
+==== mamajs의 karma.conf.js ====
-<code bash>
-npm install --save-dev mocha chai
-npm install --save-dev ts-node typescript
-npm install --save-dev @types/chai @types/mocha
-</code>
-package.json
+<code javascript karma.conf.js>
-<code javascript>
+// Karma configuration
-"scripts": {
+// Generated on Mon Jun 03 2019 23:19:22 GMT+0900 (대한민국 표준시)
-    "test": "mocha --require ts-node/register src/**/*.spec.ts"
+const path = require('path');
-},
+var webpackConfig = require('./webpack.config')
-</code>
-**Gulp**
+module.exports = function(config) {
-We need to install two more packages to be able to use Gulp:
+  config.set({
-<code bash>
-npm install gulp gulp-mocha --save-dev
+    // 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: ['jasmine'],
+    // list of files / patterns to load in the browser
+    files: [
+      {pattern: 'src/**/*.spec.js', watched:true, served:true, included: true},
+      {pattern: 'src/**/*.spec.ts', watched:true, served:true, included: true},
+      {pattern: 'test/**/*.js', watched:true, served:true, included: true}
+      /*parameters:
+          watched: if autoWatch is true all files that have watched set to true will be watched for changes
+          served: should the files be served by Karma's webserver?
+          included: should the files be included in the browser using <script> tag?
+          nocache: should the files be served from disk on each request by Karma's webserver? */
+      /*assets:
+          {pattern: '*.html', watched:true, served:true, included:false}
+          {pattern: 'images/*', watched:false, served:true, included:false} */
+    ],
+    // list of files / patterns to exclude
+    exclude: [ ],
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+    client: {
+      //capture all console output and pipe it to the terminal, true is default
+      captureConsole:false,
+      //if true, Karma clears the context window upon the completion of running the tests, true is default
+      clearContext:false,
+      //run the tests on the same window as the client, without using iframe or a new window, false is default
+      runInParent: false,
+      //true: runs the tests inside an iFrame; false: runs the tests in a new window, true is default
+      useIframe:true,
+      jasmine:{
+        //tells jasmine to run specs in semi random order, false is default
+        random: false
+      }
+    },
+    // 여기부터 기본 init에서 수정 사항
+    // 웹팩 설정 가져오기?? 아까 설치한 모듈('karma-webpack')
+    webpack: {
+      mode: 'development',
+      //module: webpackConfig.module,
+      resolve: webpackConfig.resolve,
+      module: {
+        rules: [
+          {
+            test: /\.jsx$/i,
+            include: [
+              path.resolve(__dirname, 'src')
+            ],
+            exclude: [/node_modules/],
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: ['@babel/preset-env'],
+               // plugins: ['@babel/plugin-proposal-class-properties']
+              }
+            }
+          },
+          {
+            test: /\.tsx?$/i,
+            include: [
+              path.resolve(__dirname, 'src')
+            ],
+            exclude: [/node_modules/],
+            use: {
+              loader: 'ts-loader'
+            }
+          },
+          {
+            test: /\.css$/i,
+            use: ['style-loader','css-loader'],
+          }
+        ]
+      }
+  },
+  // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      'src/**/*.js': ['webpack'], // test/*spec.js을 실행하기 전에 'webpack'을 선행
+      'src/**/*.ts': ['webpack'],
+    },
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['kjhtml','mocha'/*,'mocha','dots','progress','spec'*/],
+    // 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,
+    logLevel: config.LOG_ERROR,
+    // 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
+  })
+}
 </code>
-==== Script Test ====
-  * Mocha / Chai
-  * Jasmine
-  * [[https://karma-runner.github.io|Karma]]
 ===== Jasmine =====
 ** Behavior-Driven JavaScript **

GaramX

사용자 도구

사이트 도구

차이

문서 도구