vue-test-loader 项目教程

1. 项目的目录结构及介绍

vue-test-loader/
├── build/
│   ├── babelrc
│   ├── eslintrc
│   ├── gitignore
│   ├── CHANGELOG.md
│   ├── LICENSE
│   ├── README.md
│   ├── index.js
│   ├── package.json
│   └── yarn.lock
├── src/
│   ├── components/
│   │   └── ExampleComponent.vue
│   └── tests/
│       └── ExampleComponent.spec.js
└── __tests__/
    └── ExampleComponent.spec.js

目录结构介绍

• build/: 包含项目的构建配置文件，如 babelrc、eslintrc、gitignore 等。
• src/: 包含项目的源代码，包括 Vue 组件和测试文件。
  • components/: 存放 Vue 组件文件。
  • tests/: 存放测试文件。
• tests/: 存放生成的测试文件。

2. 项目的启动文件介绍

项目的启动文件主要是 index.js，位于 build/ 目录下。该文件负责配置 vue-loader 以处理 Vue 组件中的自定义测试块。

// build/index.js
module.exports = {
  // 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'test': 'vue-test-loader'
          }
        }
      }
    ]
  }
};

3. 项目的配置文件介绍

package.json

package.json 文件位于 build/ 目录下，包含了项目的依赖和脚本配置。

{
  "name": "vue-test-loader",
  "version": "1.0.0",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "vue-test-loader": "^1.0.0",
    "jest": "^26.0.0"
  }
}

babelrc

babelrc 文件位于 build/ 目录下，配置了 Babel 的转译规则。

{
  "presets": ["@babel/preset-env"]
}

eslintrc

eslintrc 文件位于 build/ 目录下，配置了 ESLint 的代码检查规则。

{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "off"
  }
}

gitignore

gitignore 文件位于 build/ 目录下，配置了 Git 忽略的文件和目录。

node_modules/
dist/

CHANGELOG.md

CHANGELOG.md 文件位于 build/ 目录下，记录了项目的更新日志。

LICENSE

LICENSE 文件位于 build/ 目录下，包含了项目的开源许可证信息。

README.md

README.md 文件位于 build/ 目录下，提供了项目的介绍和使用说明。

# vue-test-loader

Extract custom test blocks from Vue components.

## Usage

1. Install the loader:
   ```bash
   npm install --save-dev vue-test-loader

2. Setup vue-loader to pass the test block to the loader:

   module.exports = {
     // The rest of the config
     module: {
       rules: [
         {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: {
             loaders: {
               'test': 'vue-test-loader'
             }
           }
         }
       ]
     }
   };
   

3. Write tests in your Vue components:

   <template>
     <div />
   </template>
   <script>
   export default {
     name: 'example-component'
   }
   </script>
   <test>
   import { shallow } from 'vue-test-utils'
   import ExampleComponent from './ExampleComponent'
   
   describe('ExampleComponent', () => {
     test('is div', () => {
       expect(shallow(ExampleComponent).is('div')).toBe(true)
     })
   })
   </test>
   

以上是 `vue-test-loader` 项目的教程，包含了项目的目录结构、启动文件和配置文件的介绍。