작아지기 시작한 베일.Js 유닛 테스트 환경

17131 단어 karmaJavaScriptVue.jsmocha

개시하다


Vue.js에서 단원 테스트의 정보원으로서 먼저 공식 문서를 참고해야 한다.
단일 테스트-Vue.js
테스트 도구의 문서에 설정 방법을 의뢰합니다.
상세한 설정에 관해서는 각 테스트 도구의 문서를 확인하십시오.
현대 JavaScript 개발의 일상으로서 여러 도구를 조합하여 설치해야 하는 환경입니다.
제로에서 시작한 앱이라면vue-clivue init webpack하면 테스트 주변 설정도 오기 때문에 문제가 없습니다.그러나 Vue는 기존 JavaScript 애플리케이션의 경우js를 가져오려면 이 방법을 사용할 수 없습니다.
이 글에서 Vue.다음은 0부터 js 단원 테스트 환경을 구축하는 방법을 소개한다.
이 글의 코드도 아래 GiitHub 창고에서 공개됐다.
https://github.com/ryo-utsunomiya/vue-unit-test-from-scratch

Vue.js 설정


먼저, Vue.js의 실행 환경을 구축하다.Node.js와 npm가 설치되는 것을 전제로 합니다.또 번역 가능단일 파일 구성 요소이 목표다.

라이브러리 설치


Vue 바디와 빌드를 위한 라이브러리를 설치합니다.
npm init
npm i vue
npm i -D babel-cli babel-preset-env webpack babel-loader css-loader vue-template-compiler vue-loader

구성 설정


우선 바벨을 설정합니다..babelrc라는 서류를 작성하여 다음과 같이 기술해 주십시오.
{
  "presets": [
    "env"
  ]
}
다음은 웹 패키지 설정을 진행합니다.webpack.config.js라는 서류를 작성하여 다음과 같이 기술해 주십시오.
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
};
여기 src/main.js 이 파일을 입구점으로 하고 dist 이 디렉터리에서 구축 결과 (build.js) 를 출력합니다.확장자가'.vue'인 파일은 vue-loader이고'.js'인 파일은 babel-loader가 처리합니다.

소스 코드 설명


src 디렉터리를 만들고 그 아래에 main.js와 App.vue를 놓으십시오.
src
├── App.vue
└── main.js
main.js는 다음과 같다.
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});
App.vue는 다음과 같다.
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
};
</script>
다음은 스크립트를 구축할 준비를 하세요.package.다음은 json의scripts를 변경하십시오.
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
추가된 것은 build입니다. 웹 패키지를 호출하고 있습니다.
이 상태에서 npm run build 명령을 실행하면 구축에 성공할 것입니다.
이 단계에서는 화면을 확인할 수 없어 뷰 앱이 제대로 작동하는지 걱정이 되니 동작을 확인해보자.index.다음 내용 제작 >.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue unit test from scratch</title>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>
</html>
다음은 개발용 웹 서버를 만듭니다.개발용 서버의 설정 방법을 아는 사람은 이 절차를 건너뛰어도 된다.만약 손 옆에 있는 기계가 맥이라면 php -S localhost:8080 방문http://localhost:8080/ 이런 방법도 가능하다.이 글은 노드를 완성하기 위해 추가 프로그램 라이브러리를 설치했다.
npm i -D webpack-dev-server
설치 후 패키지.json의scripts를 다음과 같은 내용으로 변경합니다.
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
npm run dev 명령을 입력한 후 Webpack의 구축이 실행되고 구축 후 서버가 일어나고 브라우저가 열립니다http://localhost:8080/.

설정 테스트


여기서 드디어 본론으로 들어간다.이번에는 참고vuejs-templates/webpack로 카르마+모차의 조합으로 단원 테스트 환경을 제작했다.또 최소한의 구성으로 먼저 돌아가고 싶어 브라우저는 크롬(CI로 돌아가고 싶으면 PhantoomJS 등)을 사용한다.
먼저 결단고를 설치한 모차와 주자를 테스트하는 카르마를 설치한다.
npm i -D mocha karma karma-chrome-launcher karma-mocha karma-webpack
그런 다음 생성karma.conf.js합니다.
const webpackConfig = require('./webpack.config');

module.exports = function(config) {
  config.set({
    frameworks: ['mocha'],
    files: [
      'test/**/*.spec.js'
    ],
    preprocessors: {
      'test/**/*.spec.js': ['webpack'],
    },
    webpack: webpackConfig,
    reporters: ['progress'],
    browsers: ['Chrome'],
  });
};
여기에는 다음과 같은 설정이 있습니다.
  • 결단 사용 모차
  • 테스트는 테스트 디렉터리에서 *.spec.js의 이름으로 배치
  • 웹 패키지 기반 구축 후 테스트 실행
  • 테스트 보고서 사용progress 보고자
  • 브라우저에서 Chrome
    • 사용
    설정이 완료되면 다음은 테스트의 기술입니다.테스트 디렉터리를 만들고 그 아래에 앱을 추가합니다.스펙.js를 만들어 주세요.내용은 다음과 같다.
    import Vue from 'vue'
import App from '../src/App.vue'
import assert from 'assert';

Vue.config.productionTip = false;

describe('App', () => {
  it('default data', () => {
    assert.equal('function', typeof App.data);
    const defaultData = App.data();
    assert.equal('Hello Vue!', defaultData.message);
  });

  it('mount component', () => {
    const vm = new Vue(App).$mount();
    assert.equal('Hello Vue!', vm.message);
  });

  it('renders the correct message', () => {
    const Ctor = Vue.extend(App)
    const vm = new Ctor().$mount()
    assert.equal('Hello Vue!', vm.$el.textContent);
  });
});
    마지막으로karma를 시작하는 명령을 씁니다.package.다음은 json의scripts를 고쳐 주십시오.
      "scripts": {
    "test": "karma start --single-run",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
    이렇게 하면 npm run test(또는 npm test,npm t에서 카르마를 시작할 수 있다.npm t를 실행한 후 웹 패키지의 구축 = > Chrome의 시작 = > 테스트 결과의 출력 순서에 따라 작업해야 합니다.
    최종 결과는 다음과 같이 출력됩니다.

    Chrome 61.0.363(Mac OS X 10.13.0): Executed 3 of 3 SUCCESS(0.012 secs/0.006 secs)가 최종 테스트 결과입니다.

    끝맺다


    이 정도면 Vue 구성 요소를 쓰는 테스트에 최소한 필요한 환경이 갖춰졌다고 할 수 있다.
    앞으로 환경을 확대하는 데 참고 가치가 있는 것은 vuejs-templates/webpack겠죠.여기, 헤드 없는 브라우저(Phantoom JS)를 통해 테스트를 진행합니다, 시논.js의mock의 이용, 테스트의 덮어쓰기 보고서의 출력 등으로 본 보도에 닿지 않은 기능이 추가되었습니다.
    포...in 및 for...of의 차이
    Excel VBA 학습 노트(一)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage