关于土豆哥
一只文艺型码农
对mpvue进行前端测试
对mpvue进行前端测试

采用Vue.js的测试方法,为mpvue添加测试。

配置

  1. 打开package.json,添加如下内容(注意自行在必要的地方添加逗号):
    "scripts"中添加"test": "jest"
    "dependencies"中添加"vue": "^2.4.4"
    "devDependencies"中添加

    “@vue/test-utils”: “^1.0.0-beta.13”
    “jest”: “^21.2.1”
    “vue-jest”: “^2.6.0”
    “vue-template-compiler”: “^2.4.4”

添加(与scripts同级)

        "jest": {
            "moduleFileExtensions": [
                "js",
                "json",
                "vue"
            ],
            "transform": {
              "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
              ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
            },
            "moduleNameMapper": {
              "^@/(.*)$": "<rootDir>/src/$1"
            }
          }

2. 在命令行中进入对应目录,输入npm install

查看配置效果

  1. 创建test文件夹(与package.json同级目录),新建test.js文件,输入以下内容:
        describe('Our test file', () => {
    
              it('should be working now', () => {
                expect('a').toBe('a')
              })
    
        })
    
  2. 在命令行中输入npm test
  3. 我们应该会看到如下内容:

编写真正的测试文件

  1. 假设我们想测试的组件为components文件夹下的card(mpvue模板生成的组件)
  2. 不用对card.vue文件做任何改动(主要是不需要添加name):
  3. test.js内容修改为:
        import { mount } from '@vue/test-utils'
        import card from '../src/components/card'
    
        describe('card', () => {
            const wrapper = mount(card)
    
            it('<p> tag should have class: card', () => {
                let p =  wrapper.find('p')
                expect(p.classes()).toContain('card')
            })
    
        })
    
  4. 在命令行中输入npm test
  5. 我们应该会看到如下内容:

注意事项、参考资料

  1. 文件命名:xxx.vue对应的测试文件名为xxx.spec.js
  2. 这里使用的是jest,而不是mocha
  3. 参考资料(包括更多语法):https://vue-test-utils.vuejs.org/zh/guides/#%E8%B5%B7%E6%AD%A5
赞赏
除特殊说明外,本站文章均为作者原创,采用 CC BY-NC-SA 3.0 Unported 协议进行许可。
没有标签
首页      码农      折腾      对mpvue进行前端测试

发表评论

textsms
account_circle
email

CAPTCHAis initialing...
  • 潇湘

    ReferenceError: wx is not defined 请问这个问题要怎么解决啊

    1年前回复
  • nan

    FAIL test/utils.test.js
    ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it’s not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring “node_modules”.

    Here’s what you can do:
    • To have some of your “node_modules” files transformed, you can specify a custom “transformIgnorePatterns” in your config.
    • If you need a custom transformation specify a “transform” option in your config.
    • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the “moduleNameMapper” config option.

    You’ll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/joanqin/Documents/fennec_wx/test/utils.test.js:1
    ({“Object.”:function(module,exports,require,__dirname,__filename,global,jest){import { resizeImage } from ‘@/assets/js/utils’;
    ^^^^^^

    SyntaxError: Unexpected token import

    at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

    12月前回复
  • lalala

    使用了微信组件,测试时报警告
    [Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.
    请问这个问题要怎么解决啊

    9月前回复
    • NeeX

      @lalala: 暂时还没有办法解决0.0

      9月前回复
      • lalala

        @NeeX: 0.0那项目里的测试一定会有很多这样的警告的,也没有mock的方式吗?

        9月前回复

对mpvue进行前端测试
采用Vue.js的测试方法,为mpvue添加测试。 配置 打开package.json,添加如下内容(注意自行在必要的地方添加逗号): 在"scripts"中添加"test": "jest" 在"dependencies"中添加"vue": …
扫描二维码继续阅读
2018-08-19