---

작성일자 : 2019-02-12

category: develop

참조

vue-loader test
karma-webpack

karma-webpack

install

npm i -D karma-webpack

셋팅

karma.conf.js

var webpackConfigFile = require('./webpack.config.js')
var webpackConfig = webpackConfigFile()
delete webpackConfig.entry

// webpackConfig = {
//   module: {
//     ...

...

files: [
  // only specify one entry point
  // and require all tests in there
  'test/index.js'
],

preprocessors: {
  // add webpack as preprocessor
  'test/index.js': [ 'webpack' ]
},

webpack: webpackConfig,

webpackMiddleware: {
  // webpack-dev-middleware configuration
  // i. e.
  stats: 'errors-only'
}

test/index.js

// 파일 이름에 .spec 이 포함된 파일들을
// 테스트 대상으로 한다.
var testsContext = require.context('.', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

js 테스트

src/hello.js

“`javascript
// src/hello.js
var Hello = {
getName() {
return ‘Hello’
}
}
export default Hello

### test/hello.spec.js

javascript
// test/hello.spec.js
import Hello from ‘../src/hello.js’

describe(‘Hello’, () => {
it(‘getName’, () => {
expect(Hello.getName()).toBe(“Hello”);
})
})

<br>

## vue 테스트

### src/TestComponent.js

javascript
// src/TestComponent.js

### test/TestComponent.spec.js

javascript
var Vue = require(‘vue’)

import TestComponent from ‘../src/components/TestComponent.vue’

describe(‘testComponent.vue’, function () {

it(‘start’, function () {
expect(1).toBe(1)
})

it(‘should have correct message’, function () {
expect(TestComponent).not.toBe(null);
})

})
“`

에러 처리

karma error

• “message”: “An error was thrown in afterAll\nSyntaxError: Unexpected token ‘)'”,
• 테스트 코드 내에
  에러 발생 부분: describe('...', () => {
  일단 에러 해결: describe('...', function () {
• 원인 파악 함: PhantomJS 는 es6 미지원
  karma > browser : PhantomJS 일 때 발생
  karma > browser : Chrome 으로 변경하니 에러 발생안함
• 처음에 vue template 부분 인지를 못함 -> webpack config 파일을 잘못 로딩하고 있었음