{"id":82,"date":"2022-05-29T14:58:37","date_gmt":"2022-05-29T06:58:37","guid":{"rendered":"http:\/\/www.33weixin.com\/index\/?p=82"},"modified":"2022-05-29T15:00:13","modified_gmt":"2022-05-29T07:00:13","slug":"%e5%8d%95%e5%85%83%e6%b5%8b%e8%af%95","status":"publish","type":"post","link":"http:\/\/www.33weixin.com\/index\/index.php\/2022\/05\/29\/%e5%8d%95%e5%85%83%e6%b5%8b%e8%af%95\/","title":{"rendered":"\u5355\u5143\u6d4b\u8bd5"},"content":{"rendered":"

\u914d\u7f6e\u548c\u5de5\u5177<\/h2>\n

\u4efb\u4f55\u517c\u5bb9\u57fa\u4e8e\u6a21\u5757\u7684\u6784\u5efa\u7cfb\u7edf\u90fd\u53ef\u4ee5\u6b63\u5e38\u4f7f\u7528\uff0c\u4f46\u5982\u679c\u4f60\u9700\u8981\u4e00\u4e2a\u5177\u4f53\u7684\u5efa\u8bae\uff0c\u53ef\u4ee5\u4f7f\u7528\u00a0Karma<\/a>\u00a0\u8fdb\u884c\u81ea\u52a8\u5316\u6d4b\u8bd5\u3002\u5b83\u6709\u5f88\u591a\u793e\u533a\u7248\u7684\u63d2\u4ef6\uff0c\u5305\u62ec\u5bf9\u00a0Webpack<\/a>\u00a0\u548c\u00a0Browserify<\/a>\u00a0\u7684\u652f\u6301\u3002\u66f4\u591a\u8be6\u7ec6\u7684\u5b89\u88c5\u6b65\u9aa4\uff0c\u8bf7\u53c2\u8003\u5404\u9879\u76ee\u7684\u5b89\u88c5\u6587\u6863\uff0c\u901a\u8fc7\u8fd9\u4e9b Karma \u914d\u7f6e\u7684\u4f8b\u5b50\u53ef\u4ee5\u5feb\u901f\u5e2e\u52a9\u4f60\u4e0a\u624b\uff08Webpack<\/a>\u00a0\u914d\u7f6e\uff0cBrowserify<\/a>\u00a0\u914d\u7f6e\uff09\u3002<\/p>\n

\u7b80\u5355\u7684\u65ad\u8a00<\/h2>\n

\u5728\u6d4b\u8bd5\u7684\u4ee3\u7801\u7ed3\u6784\u65b9\u9762\uff0c\u4f60\u4e0d\u5fc5\u4e3a\u4e86\u53ef\u6d4b\u8bd5\u5728\u4f60\u7684\u7ec4\u4ef6\u4e2d\u505a\u4efb\u4f55\u7279\u6b8a\u7684\u64cd\u4f5c\u3002\u53ea\u8981\u5bfc\u51fa\u539f\u59cb\u8bbe\u7f6e\u5c31\u53ef\u4ee5\u4e86\uff1a<\/p>\n

<template<\/span>><\/span>\n  <span<\/span>><\/span>{{ message }}<\/span<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\n  export<\/span> default<\/span> {\n    data () {\n      return<\/span> {\n        message: 'hello!'<\/span>\n      }\n    },\n    created () {\n      this<\/span>.message = 'bye!'<\/span>\n    }\n  }\n<\/span><\/script<\/span>><\/span>\n<\/code><\/pre>\n
\u5f53\u6d4b\u8bd5\u7684\u7ec4\u4ef6\u65f6\uff0c\u6240\u8981\u505a\u7684\u5c31\u662f\u5bfc\u5165\u5bf9\u8c61\u548c Vue \u7136\u540e\u4f7f\u7528\u8bb8\u591a\u5e38\u89c1\u7684\u65ad\u8a00\uff1a<\/p>\n
\/\/ \u5bfc\u5165 Vue.js \u548c\u7ec4\u4ef6\uff0c\u8fdb\u884c\u6d4b\u8bd5<\/span>\nimport<\/span> Vue from<\/span> 'vue'<\/span>\nimport<\/span> MyComponent from<\/span> 'path\/to\/MyComponent.vue'<\/span>\n\n\/\/ \u8fd9\u91cc\u662f\u4e00\u4e9b Jasmine 2.0 \u7684\u6d4b\u8bd5\uff0c\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4f60\u559c\u6b22\u7684\u4efb\u4f55\u65ad\u8a00\u5e93\u6216\u6d4b\u8bd5\u5de5\u5177\u3002<\/span>\n\ndescribe('MyComponent'<\/span>, () => {\n  \/\/ \u68c0\u67e5\u539f\u59cb\u7ec4\u4ef6\u9009\u9879<\/span>\n  it('has a created hook'<\/span>, () => {\n    expect(typeof<\/span> MyComponent.created).toBe('function'<\/span>)\n  })\n\n  \/\/ \u8bc4\u4f30\u539f\u59cb\u7ec4\u4ef6\u9009\u9879\u4e2d\u7684\u51fd\u6570\u7684\u7ed3\u679c<\/span>\n  it('sets the correct default data'<\/span>, () => {\n    expect(typeof<\/span> MyComponent.data).toBe('function'<\/span>)\n    const<\/span> defaultData = MyComponent.data()\n    expect(defaultData.message).toBe('hello!'<\/span>)\n  })\n\n  \/\/ \u68c0\u67e5mount\u4e2d\u7684\u7ec4\u4ef6\u5b9e\u4f8b<\/span>\n  it('correctly sets the message when created'<\/span>, () => {\n    const<\/span> vm = new<\/span> Vue(MyComponent).$mount()\n    expect(vm.message).toBe('bye!'<\/span>)\n  })\n\n  \/\/ \u521b\u5efa\u4e00\u4e2a\u5b9e\u4f8b\u5e76\u68c0\u67e5\u6e32\u67d3\u8f93\u51fa<\/span>\n  it('renders the correct message'<\/span>, () => {\n    const<\/span> Ctor = Vue.extend(MyComponent)\n    const<\/span> vm = new<\/span> Ctor().$mount()\n    expect(vm.$el.textContent).toBe('bye!'<\/span>)\n  })\n})\n<\/code><\/pre>\n
\u7f16\u5199\u53ef\u88ab\u6d4b\u8bd5\u7684\u7ec4\u4ef6<\/h2>\n
\u5f88\u591a\u7ec4\u4ef6\u7684\u6e32\u67d3\u8f93\u51fa\u7531\u5b83\u7684 props \u51b3\u5b9a\u3002\u4e8b\u5b9e\u4e0a\uff0c\u5982\u679c\u4e00\u4e2a\u7ec4\u4ef6\u7684\u6e32\u67d3\u8f93\u51fa\u5b8c\u5168\u53d6\u51b3\u4e8e\u5b83\u7684 props\uff0c\u90a3\u4e48\u5b83\u4f1a\u8ba9\u6d4b\u8bd5\u53d8\u5f97\u7b80\u5355\uff0c\u5c31\u597d\u50cf\u65ad\u8a00\u4e0d\u540c\u53c2\u6570\u7684\u7eaf\u51fd\u6570\u7684\u8fd4\u56de\u503c\u3002\u770b\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50:<\/p>\n
<template<\/span>><\/span>\n  <p<\/span>><\/span>{{ msg }}<\/p<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\n  export<\/span> default<\/span> {\n    props: ['msg'<\/span>]\n  }\n<\/span><\/script<\/span>><\/span>\n<\/code><\/pre>\n
\u4f60\u53ef\u4ee5\u5728\u4e0d\u540c\u7684 props \u4e2d\uff0c\u901a\u8fc7\u00a0propsData<\/code>\u00a0\u9009\u9879\u65ad\u8a00\u5b83\u7684\u6e32\u67d3\u8f93\u51fa:<\/p>\n
import<\/span> Vue from<\/span> 'vue'<\/span>\nimport<\/span> MyComponent from<\/span> '.\/MyComponent.vue'<\/span>\n\n\/\/ \u6302\u8f7d\u5143\u7d20\u5e76\u8fd4\u56de\u5df2\u6e32\u67d3\u7684\u6587\u672c\u7684\u5de5\u5177\u51fd\u6570 <\/span>\nfunction<\/span> getRenderedText<\/span> (Component, propsData<\/span>) <\/span>{\n  const<\/span> Ctor = Vue.extend(Component)\n  const<\/span> vm = new<\/span> Ctor({ propsData }).$mount()\n  return<\/span> vm.$el.textContent\n}\n\ndescribe('MyComponent'<\/span>, () => {\n  it('render correctly with different props'<\/span>, () => {\n    expect(getRenderedText(MyComponent, {\n      msg: 'Hello'<\/span>\n    })).toBe('Hello'<\/span>)\n\n    expect(getRenderedText(MyComponent, {\n      msg: 'Bye'<\/span>\n    })).toBe('Bye'<\/span>)\n  })\n})\n<\/code><\/pre>\n
\u65ad\u8a00\u5f02\u6b65\u66f4\u65b0<\/h2>\n
\u7531\u4e8e Vue \u8fdb\u884c\u00a0\u5f02\u6b65\u66f4\u65b0DOM<\/a>\u00a0\u7684\u60c5\u51b5\uff0c\u4e00\u4e9b\u4f9d\u8d56DOM\u66f4\u65b0\u7ed3\u679c\u7684\u65ad\u8a00\u5fc5\u987b\u5728\u00a0Vue.nextTick<\/code>\u00a0\u56de\u8c03\u4e2d\u8fdb\u884c\uff1a<\/p>\n
\/\/ \u5728\u72b6\u6001\u66f4\u65b0\u540e\u68c0\u67e5\u751f\u6210\u7684 HTML<\/span>\nit('updates the rendered message when vm.message updates'<\/span>, done => {\n  const<\/span> vm = new<\/span> Vue(MyComponent).$mount()\n  vm.message = 'foo'<\/span>\n\n  \/\/ \u5728\u72b6\u6001\u6539\u53d8\u540e\u548c\u65ad\u8a00 DOM \u66f4\u65b0\u524d\u7b49\u5f85\u4e00\u523b<\/span>\n  Vue.nextTick(() => {\n    expect(vm.$el.textContent).toBe('foo'<\/span>)\n    done()\n  })\n})\n<\/code><\/pre>\n
\u6211\u4eec\u8ba1\u5212\u505a\u4e00\u4e2a\u901a\u7528\u7684\u6d4b\u8bd5\u5de5\u5177\u96c6\uff0c\u8ba9\u4e0d\u540c\u7b56\u7565\u7684\u6e32\u67d3\u8f93\u51fa\uff08\u4f8b\u5982\u5ffd\u7565\u5b50\u7ec4\u4ef6\u7684\u57fa\u672c\u6e32\u67d3\uff09\u548c\u65ad\u8a00\u53d8\u5f97\u66f4\u7b80\u5355\u3002<\/p>\n
\n
\u539f\u6587\uff1a\u00a0http:\/\/vuejs.org\/guide\/unit-testing.html<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
\u914d\u7f6e\u548c\u5de5\u5177 \u4efb\u4f55\u517c\u5bb9\u57fa\u4e8e\u6a21\u5757\u7684\u6784\u5efa\u7cfb\u7edf\u90fd\u53ef\u4ee5\u6b63\u5e38\u4f7f\u7528\uff0c\u4f46\u5982\u679c\u4f60\u9700\u8981\u4e00\u4e2a\u5177\u4f53\u7684\u5efa\u8bae\uff0c\u53ef\u4ee5\u4f7f\u7528\u00a0Karma\u00a0\u8fdb\u884c\u81ea…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts\/82"}],"collection":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":1,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":83,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/posts\/82\/revisions\/83"}],"wp:attachment":[{"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.33weixin.com\/index\/index.php\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}