{"id":5836,"date":"2022-05-27T00:40:16","date_gmt":"2022-05-26T16:40:16","guid":{"rendered":"https:\/\/damogame.cn:15443\/wordpress\/?p=5836"},"modified":"2022-05-27T00:40:16","modified_gmt":"2022-05-26T16:40:16","slug":"jest%e5%bf%ab%e9%80%9f%e5%85%a5%e9%97%a8%e5%8f%8a%e5%ae%9e%e8%b7%b5%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/i007.cc\/wordpress\/archives\/5836","title":{"rendered":"jest\u5feb\u901f\u5165\u95e8\u53ca\u5b9e\u8df5\u6559\u7a0b"},"content":{"rendered":"
\n
\u539f\u6587\u5730\u5740<\/a><\/div>\n
<\/div>\n<\/header>\n
\n
\n
\n

\u4e00\u3001JEST\u7b80\u4ecb<\/h2>\n

Jest\u662fFacebook\u5f00\u6e90\u7684\u4e00\u5957JavaScript\u6d4b\u8bd5\u6846\u67b6\uff0c \u5b83\u96c6\u6210\u4e86\u65ad\u8a00\u3001JSDom\u3001\u8986\u76d6\u7387\u62a5\u544a\u7b49\u5f00\u53d1\u8005\u6240\u9700\u8981\u7684\u6240\u6709\u6d4b\u8bd5\u5de5\u5177\u3002<\/p>\n

\u5b98\u65b9\u7b80\u4ecb\uff1a\u4e00\u4e2a\u4ee4\u4eba\u6109\u5feb\u7684javascript\u6d4b\u8bd5\u6846\u67b6\u3002 \u6211\u7684\u7406\u89e3\u662f\uff0c\u4e0d\u7528\u52a0\u73ed\u6539bug\u4e86\uff0c\u53ef\u4ee5\u63d0\u524d\u4e0b\u73ed\uff0c\u966a\u5973\u670b\u53cb\u559d\u5976\u8336\uff01<\/p><\/blockquote>\n

\u4e8c\u3001jest\u542f\u6b65<\/h2>\n

2.1 \u5b89\u88c5<\/h2>\n
\n
# \u9879\u76ee\u4e2d\u4f7f\u7528<\/span>\r\nyarn init -y\r\nyarn add --dev jest\r\n# \u6216\u8005\u5168\u5c40\u5b89\u88c5\uff0c\u968f\u65f6\u968f\u5730\u4f7f\u7528<\/span>\r\nyarn global add jest<\/code><\/pre>\n<\/div>\n
2.2 hello world(jest)<\/h2>\n
\u7f16\u5199\u4ee5\u4e0b\u4e24\u4e2ajs\u6587\u4ef6\uff0c\u63a7\u5236\u53f0\u8f93\u5165\u547d\u4ee4jest --no-cache --verbose<\/code>(\u5168\u5c40\u5b89\u88c5)\uff0c\u6216\u8005npx jest --no-cache --verbose<\/code>\uff08\u9879\u76ee\u4f9d\u8d56\u5b89\u88c5\uff09\uff0cjest\u4f1a\u641c\u7d22\u9879\u76ee\u4e0b\u6240\u6709\u6d4b\u8bd5\u811a\u672c\u5e76\u6267\u884c\u8f93\u51fa\u6d4b\u8bd5\u7ed3\u679c\u3002<\/p>\n
\n
\/\/ hello.js\r\n<\/span>module<\/span>.<\/span>exports<\/span> =<\/span> function<\/span>(){<\/span>\r\n    return<\/span> \"hello world\"<\/span>;<\/span>\r\n}<\/span>\r\n\/\/ hello.test.js\r\n<\/span>const<\/span> hello<\/span> =<\/span> require<\/span>(<\/span>'..\/hello'<\/span>);<\/span>\r\n\r\nit<\/span>(<\/span>'should '<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    expect<\/span>(<\/span>hello<\/span>()).<\/span>toBe<\/span>(<\/span>'hello world'<\/span>);<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n<\/div>\n
\u4e09\u3001\u57fa\u7840\u6d4b\u8bd5\u77e5\u8bc6<\/h2>\n
3.1 jest\u6587\u4ef6\u548c\u76ee\u5f55\u547d\u540d\u89c4\u8303<\/h2>\n
\u5f85\u6d4b\u8bd5\u6587\u4ef6:\u00a0hello.js<\/code>\u00a0\u6d4b\u8bd5\u811a\u672c\u6587\u4ef6\u53d6\u540d\uff1ahello.test.js<\/code>orhello.spec.js<\/code>\u00a0\u6d4b\u8bd5\u76ee\u5f55:tests<\/code>or__tests__<\/code><\/p>\n
3.2 \u6d4b\u8bd5\u51fd\u6570<\/h2>\n
\n
test<\/span>(<\/span>\"\u6d4b\u8bd5\u7528\u5217\u63cf\u8ff0\u4fe1\u606f\"<\/span>,()=>{<\/span>\r\n\r\n})<\/span>\r\n\/\/ or\r\n<\/span>it<\/span>(<\/span>\"\u6d4b\u8bd5\u7528\u4f8b\u63cf\u8ff0\u4fe1\u606f\"<\/span>,()=>{<\/span>\r\n\r\n})<\/span>\r\n<\/code><\/pre>\n<\/div>\n
3.3 \u65ad\u8a00\u51fd\u6570<\/h2>\n
\u6d4b\u8bd5\u5373\u8fd0\u884c\u7ed3\u679c\u662f\u5426\u4e0e\u6211\u4eec\u9884\u671f\u7ed3\u679c\u4e00\u81f4 \u65ad\u8a00\u51fd\u6570\u7528\u6765\u9a8c\u8bc1\u7ed3\u679c\u662f\u5426\u6b63\u786e<\/p><\/blockquote>\n
\n
exspect<\/span>(<\/span>\u8fd0\u884c\u7ed3\u679c<\/span>).<\/span>toBe<\/span>(<\/span>\u671f\u671b\u7684\u7ed3\u679c<\/span>);<\/span>\r\n\/\/\u5e38\u89c1\u65ad\u8a00\u65b9\u6cd5\r\n<\/span>expect<\/span>({<\/span>a<\/span>:<\/span>1<\/span>}).<\/span>toBe<\/span>({<\/span>a<\/span>:<\/span>1<\/span>})<\/span>\/\/\u5224\u65ad\u4e24\u4e2a\u5bf9\u8c61\u662f\u5426\u76f8\u7b49\r\n<\/span>expect<\/span>(<\/span>1<\/span>).<\/span>not<\/span>.<\/span>toBe<\/span>(<\/span>2<\/span>)<\/span>\/\/\u5224\u65ad\u4e0d\u7b49\r\n<\/span>expect<\/span>({<\/span> a<\/span>:<\/span> 1<\/span>,<\/span> foo<\/span>:<\/span> {<\/span> b<\/span>:<\/span> 2<\/span> }<\/span> }).<\/span>toEqual<\/span>({<\/span> a<\/span>:<\/span> 1<\/span>,<\/span> foo<\/span>:<\/span> {<\/span> b<\/span>:<\/span> 2<\/span> }<\/span> })<\/span>\r\nexpect<\/span>(<\/span>n<\/span>).<\/span>toBeNull<\/span>();<\/span> \/\/\u5224\u65ad\u662f\u5426\u4e3anull\r\n<\/span>expect<\/span>(<\/span>n<\/span>).<\/span>toBeUndefined<\/span>();<\/span> \/\/\u5224\u65ad\u662f\u5426\u4e3aundefined\r\n<\/span>expect<\/span>(<\/span>n<\/span>).<\/span>toBeDefined<\/span>();<\/span> \/\/\u5224\u65ad\u7ed3\u679c\u4e0etoBeUndefined\u76f8\u53cd\r\n<\/span>expect<\/span>(<\/span>n<\/span>).<\/span>toBeTruthy<\/span>();<\/span> \/\/\u5224\u65ad\u7ed3\u679c\u4e3atrue\r\n<\/span>expect<\/span>(<\/span>n<\/span>).<\/span>toBeFalsy<\/span>();<\/span> \/\/\u5224\u65ad\u7ed3\u679c\u4e3afalse\r\n<\/span>expect<\/span>(<\/span>value<\/span>).<\/span>toBeGreaterThan<\/span>(<\/span>3<\/span>);<\/span> \/\/\u5927\u4e8e3\r\n<\/span>expect<\/span>(<\/span>value<\/span>).<\/span>toBeGreaterThanOrEqual<\/span>(<\/span>3.5<\/span>);<\/span> \/\/\u5927\u4e8e\u7b49\u4e8e3.5\r\n<\/span>expect<\/span>(<\/span>value<\/span>).<\/span>toBeLessThan<\/span>(<\/span>5<\/span>);<\/span> \/\/\u5c0f\u4e8e5\r\n<\/span>expect<\/span>(<\/span>value<\/span>).<\/span>toBeLessThanOrEqual<\/span>(<\/span>4.5<\/span>);<\/span> \/\/\u5c0f\u4e8e\u7b49\u4e8e4.5\r\n<\/span>expect<\/span>(<\/span>value<\/span>).<\/span>toBeCloseTo<\/span>(<\/span>0.3<\/span>);<\/span> \/\/ \u6d6e\u70b9\u6570\u5224\u65ad\u76f8\u7b49\r\n<\/span>expect<\/span>(<\/span>'Christoph'<\/span>).<\/span>toMatch<\/span>(<\/span>\/stop\/<\/span>);<\/span> \/\/\u6b63\u5219\u8868\u8fbe\u5f0f\u5224\u65ad\r\n<\/span>expect<\/span>([<\/span>'one'<\/span>,<\/span>'two'<\/span>]).<\/span>toContain<\/span>(<\/span>'one'<\/span>);<\/span> \/\/\u4e0d\u89e3\u91ca\r\n<\/span><\/code><\/pre>\n<\/div>\n
3.4 \u5206\u7ec4\u51fd\u6570<\/h2>\n
\n
describe<\/span>(<\/span>\"\u5173\u4e8e\u6bcf\u4e2a\u529f\u80fd\u6216\u67d0\u4e2a\u7ec4\u4ef6\u7684\u5355\u5143\u6d4b\u8bd5\"<\/span>,()=>{<\/span>\r\n    \/\/ \u4e0d\u540c\u7528\u4f8b\u7684\u5355\u5143\u6d4b\u8bd5\r\n<\/span>})<\/span>\r\n<\/code><\/pre>\n<\/div>\n
3.5 \u5e38\u89c1\u547d\u4ee4<\/h2>\n
\n
{<\/span>\r\n  \"nocache\"<\/span>:<\/span> \"jest --no-cache\"<\/span>,<\/span> \/\/\u6e05\u9664\u7f13\u5b58<\/span>\r\n  \"watch\"<\/span>:<\/span> \"jest --watchAll\"<\/span>,<\/span> \/\/\u5b9e\u65f6\u76d1\u542c<\/span>\r\n  \"coverage\"<\/span>:<\/span> \"jest --coverage\"<\/span>,<\/span>  \/\/\u751f\u6210\u8986\u76d6\u6d4b\u8bd5\u6587\u6863<\/span>\r\n  \"verbose\"<\/span>:<\/span> \"npx jest --verbose\"<\/span> \/\/\u663e\u793a\u6d4b\u8bd5\u63cf\u8ff0<\/span>\r\n}<\/span><\/code><\/pre>\n<\/div>\n
\u56db\u3001\u57fa\u7840\u6d4b\u8bd5<\/h2>\n
4.1 \u5bf9\u8c61\u7b49\u503c\u6d4b\u8bd5<\/h2>\n
\n
describe<\/span>(<\/span>'\u5bf9\u8c61\u6d4b\u8bd5'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n\r\n    it<\/span>(<\/span>\"\u662f\u5426\u540c\u4e00\u4e2a\u5bf9\u8c61\"<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n        const<\/span> foo<\/span> =<\/span> {<\/span> a<\/span>:<\/span> 1<\/span> }<\/span>\r\n        expect<\/span>(<\/span>foo<\/span>).<\/span>toBe<\/span>(<\/span>foo<\/span>)<\/span>\r\n    })<\/span>\r\n\r\n    it<\/span>(<\/span>\"\u5bf9\u8c61\u503c\u662f\u5426\u76f8\u7b49\"<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n        expect<\/span>({<\/span> a<\/span>:<\/span> 1<\/span>,<\/span> foo<\/span>:<\/span> {<\/span> b<\/span>:<\/span> 2<\/span> }<\/span> }).<\/span>toEqual<\/span>({<\/span> a<\/span>:<\/span> 1<\/span>,<\/span> foo<\/span>:<\/span> {<\/span> b<\/span>:<\/span> 2<\/span> }<\/span> })<\/span>\r\n    })<\/span>\r\n\r\n    test<\/span>(<\/span>'\u5bf9\u8c61\u8d4b\u503c'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n        const<\/span> data<\/span> =<\/span> {<\/span> one<\/span>:<\/span> 1<\/span> };<\/span>\r\n        data<\/span>[<\/span>'two'<\/span>]<\/span> =<\/span> 2<\/span>;<\/span>\r\n        expect<\/span>(<\/span>data<\/span>).<\/span>toEqual<\/span>({<\/span> one<\/span>:<\/span> 1<\/span>,<\/span> two<\/span>:<\/span> 2<\/span> });<\/span>\r\n    });<\/span>\r\n\r\n});<\/span>\r\n<\/code><\/pre>\n<\/div>\n
4.2 \u5f02\u6b65\u6d4b\u8bd5<\/h2>\n
\u5f02\u6b65\u6d4b\u8bd5\u811a\u672c\u6267\u884c\u5b8c\uff0c\u5355\u5143\u6d4b\u8bd5\u5c31\u7ed3\u675f\u4e86\uff0c\u5982\u679c\u9700\u8981\u5ef6\u65f6\u624d\u80fd\u65ad\u8a00\u7684\u7ed3\u679c\uff0c\u5355\u5143\u6d4b\u8bd5\u51fd\u6570\u9700\u8981\u8bbe\u7f6edone<\/code>\u5f62\u53c2\uff0c\u5728\u5b9a\u65f6\u56de\u8c03\u51fd\u6570\u4e2d\u8c03\u7528\uff0c\u663e\u793a\u7684\u901a\u8fc7\u5355\u5143\u6d4b\u8bd5\u5df2\u5b8c\u6210\u3002<\/p>\n
\n
describe<\/span>(<\/span>'\u5f02\u6b65\u64cd\u4f5c\u6d4b\u8bd5'<\/span>,<\/span>  ()<\/span> =><\/span> {<\/span>\r\n    function<\/span> foo<\/span>(<\/span>callback<\/span>)<\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>'foo...'<\/span>)<\/span>\r\n        setTimeout<\/span>(()<\/span> =><\/span> {<\/span>\r\n            callback<\/span> &&<\/span> callback<\/span>();<\/span>\r\n        },<\/span> 1000<\/span>)<\/span>\r\n    }<\/span>\r\n    it<\/span>(<\/span>'\u5f02\u6b65\u6d4b\u8bd5'<\/span>,<\/span> (<\/span>done<\/span>)<\/span> =><\/span> {<\/span>\r\n        function<\/span> bar<\/span>()<\/span> {<\/span>\r\n            console<\/span>.<\/span>log<\/span>(<\/span>'bar..'<\/span>)<\/span>\r\n            done<\/span>();<\/span>\r\n        }<\/span>\r\n        foo<\/span>(<\/span>bar<\/span>);<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n<\/div>\n
4.3 \u5b9a\u65f6\u5668\u6d4b\u8bd5\uff08\u5f02\u6b65\u6d4b\u8bd5\uff09\u53ca\u65ad\u8a00<\/h2>\n
\u57fa\u4e8ejest\u63d0\u4f9b\u7684\u4e24\u4e2a\u65b9\u6cd5jest.useFakeTimers<\/code>\u548cjest.runAllTimers<\/code>\u53ef\u4ee5\u66f4\u4f18\u96c5\u7684\u5bf9\u5ef6\u65f6\u529f\u80fd\u7684\u6d4b\u8bd5\u3002<\/p>\n
\n
describe<\/span>(<\/span>'\u5b9a\u65f6\u5668\u76f8\u5173\u6d4b\u8bd5'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    \/\/ \u5f00\u542f\u5b9a\u65f6\u51fd\u6570\u6a21\u62df\r\n<\/span>    jest<\/span>.<\/span>useFakeTimers<\/span>();<\/span>\r\n\r\n    function<\/span> foo<\/span>(<\/span>callback<\/span>)<\/span> {<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>'foo...'<\/span>)<\/span>\r\n        setTimeout<\/span>(()<\/span> =><\/span> {<\/span>\r\n            callback<\/span> &&<\/span> callback<\/span>();<\/span>\r\n        },<\/span> 1000<\/span>)<\/span>\r\n    }<\/span>\r\n    it<\/span>(<\/span>'\u65ad\u8a00\u5f02\u6b65\u6d4b\u8bd5'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n        \/\/\u521b\u5efamock\u51fd\u6570\uff0c\u7528\u4e8e\u65ad\u8a00\u51fd\u6570\u88ab\u6267\u884c\u6216\u662f\u6267\u884c\u6b21\u6570\u7684\u5224\u65ad\r\n<\/span>        const<\/span> callback<\/span> =<\/span> jest<\/span>.<\/span>fn<\/span>();<\/span>\r\n        foo<\/span>(<\/span>callback<\/span>);<\/span>\r\n        expect<\/span>(<\/span>callback<\/span>).<\/span>not<\/span>.<\/span>toBeCalled<\/span>();<\/span>\r\n        \/\/\u5feb\u8fdb\uff0c\u4f7f\u6240\u6709\u5b9a\u65f6\u5668\u56de\u8c03\r\n<\/span>        jest<\/span>.<\/span>runAllTimers<\/span>();<\/span>\r\n        expect<\/span>(<\/span>callback<\/span>).<\/span>toBeCalled<\/span>();<\/span>\r\n    })<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n<\/div>\n
4.4 Dom\u6d4b\u8bd5<\/h2>\n
\u5b9e\u73b0dom\u6e32\u67d3\u6d4b\u8bd5\uff0c\u4ee5\u53ca\u70b9\u51fb\u4e8b\u4ef6\u7b49\u4ea4\u4e92\u529f\u80fd\u6d4b\u8bd5\u3002<\/p>\n
\n
describe<\/span>(<\/span>'Dom\u6d4b\u8bd5'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n    it<\/span>(<\/span>'\u6d4b\u8bd5\u6309\u94ae\u662f\u5426\u88ab\u6e32\u67d3 '<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n        document<\/span>.<\/span>body<\/span>.<\/span>innerHTML<\/span> =<\/span> `\r\n<\/span>    <div>\r\n<\/span>        <button id='btn'>\u5c0f\u6309\u94ae<\/button>\r\n<\/span>    <\/div> `<\/span>\r\n        console<\/span>.<\/span>log<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'btn'<\/span>),<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'btn'<\/span>).<\/span>toString<\/span>())<\/span>\r\n        expect<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'btn'<\/span>)).<\/span>not<\/span>.<\/span>toBeNull<\/span>();<\/span>\r\n        expect<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'btn'<\/span>).<\/span>toString<\/span>()).<\/span>toBe<\/span>(<\/span>\"[object HTMLButtonElement]\"<\/span>);<\/span>\r\n    });<\/span>\r\n\r\n    it<\/span>(<\/span>'\u6d4b\u8bd5\u70b9\u51fb\u4e8b\u4ef6'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n        const<\/span> onclick<\/span> =<\/span> jest<\/span>.<\/span>fn<\/span>();<\/span>\r\n        document<\/span>.<\/span>body<\/span>.<\/span>innerHTML<\/span> =<\/span> `\r\n<\/span>        <div>\r\n<\/span>            <button id='btn'>\u5c0f\u6309\u94ae<\/button>\r\n<\/span>        <\/div> `<\/span>\r\n        const<\/span> btn<\/span> =<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'btn'<\/span>);<\/span>\r\n        expect<\/span>(<\/span>onclick<\/span>).<\/span>not<\/span>.<\/span>toBeCalled<\/span>();<\/span>\r\n        btn<\/span>.<\/span>onclick<\/span> =<\/span> onclick<\/span>;<\/span>\r\n        btn<\/span>.<\/span>click<\/span>();<\/span>\r\n        expect<\/span>(<\/span>onclick<\/span>).<\/span>toBeCalled<\/span>();<\/span>\r\n        expect<\/span>(<\/span>onclick<\/span>).<\/span>toHaveBeenCalledTimes<\/span>(<\/span>1<\/span>);<\/span>\r\n        btn<\/span>.<\/span>click<\/span>();<\/span>\r\n        btn<\/span>.<\/span>click<\/span>();<\/span>\r\n        expect<\/span>(<\/span>onclick<\/span>).<\/span>toHaveBeenCalledTimes<\/span>(<\/span>3<\/span>);<\/span>\r\n    });<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n<\/div>\n
\u4e94\u3001Vue\u6d4b\u8bd5<\/h2>\n
5.1 \u5b89\u88c5unit-jest<\/h2>\n
\u5982\u679c\u4f60\u521b\u5efa\u7684\u9879\u76ee\u6ca1\u6709\u5b89\u88c5unit-jest\u4f9d\u8d56\u5305\uff0c\u53ef\u4ee5\u901a\u8fc7vue add @vue\/unit-jest<\/code>\u547d\u4ee4\u6dfb\u52a0\u3002\u5426\u5219\u901a\u8fc7\u811a\u624b\u67b6\u624b\u52a8\u6a21\u5f0f\u521b\u5efa\u4e00\u4e2a\u5305\u542bunit-jest\u7684\u9879\u76ee\u3002<\/p>\n
5.2 \u57fa\u7840\u77e5\u8bc6<\/h2>\n
mount\u548cshallowMount\u7684\u533a\u522b<\/b>\u00a0– shallowMount\u53ea\u6302\u8f7d\u6307\u5b9a\u7ec4\u4ef6\uff0c\u4e0d\u6302\u8f7d\u5b50\u7ec4\u4ef6 – mount\u6302\u8f7d\u6240\u6709\u7ec4\u4ef6<\/p>\n
Vue\u7684\u6e32\u67d3\u673a\u5236<\/b>\u00a0\u9ed8\u8ba4\u60c5\u51b5\u4e0b Vue \u4f1a\u5f02\u6b65\u5730\u6279\u91cf\u6267\u884c\u66f4\u65b0 (\u5728\u4e0b\u4e00\u8f6e tick)\uff0c\u4ee5\u907f\u514d\u4e0d\u5fc5\u8981\u7684 DOM \u91cd\u7ed8\u6216\u8005\u662f\u89c2\u5bdf\u8005\u8ba1\u7b97<\/p>\n
\u5f02\u6b65\u6d4b\u8bd5\u9700\u8981\u5728nextTick()\u4e4b\u540e\u6267\u884c<\/p><\/blockquote>\n
5.3 hello Jest Vue<\/h2>\n
vue\u7ec4\u4ef6\u6e32\u67d3\u6d4b\u8bd5<\/p>\n
\n
it<\/span>(<\/span>'\u6302\u8f7dcountBtn\u7ec4\u4ef6'<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n        const<\/span> wraper<\/span> =<\/span> shallowMount<\/span>(<\/span>CountBtn<\/span>);<\/span>\r\n        const<\/span> btn<\/span> =<\/span> wraper<\/span>.<\/span>find<\/span>(<\/span>\"button\"<\/span>);<\/span>\r\n        expect<\/span>(<\/span>wraper<\/span>.<\/span>html<\/span>()).<\/span>toBe<\/span>(<\/span>`<button>\u70b9\u51fb\u6b21\u65700<\/button>`<\/span>);<\/span>\r\n    });<\/span>\r\n<\/code><\/pre>\n<\/div>\n
5.4 \u4e8b\u4ef6\u6d4b\u8bd5<\/h2>\n
vue\u7ec4\u4ef6\u70b9\u51fb\u4e8b\u4ef6\u6d4b\u8bd5<\/p>\n
\n
it<\/span>(<\/span>'\u6d4b\u8bd5countBtn\u7ec4\u4ef6\u70b9\u51fb'<\/span>,<\/span> (<\/span>done<\/span>)<\/span> =><\/span> {<\/span>\r\n    const<\/span> wraper<\/span> =<\/span> shallowMount<\/span>(<\/span>CountBtn<\/span>);<\/span>\r\n    const<\/span> btn<\/span> =<\/span> wraper<\/span>.<\/span>find<\/span>(<\/span>\"button\"<\/span>);<\/span>\r\n    expect<\/span>(<\/span>wraper<\/span>.<\/span>html<\/span>()).<\/span>toBe<\/span>(<\/span>`<button>\u70b9\u51fb\u6b21\u65700<\/button>`<\/span>);<\/span>\r\n    btn<\/span>.<\/span>trigger<\/span>(<\/span>'click'<\/span>);<\/span>\r\n    setTimeout<\/span>(()<\/span> =><\/span> {<\/span>\r\n        expect<\/span>(<\/span>wraper<\/span>.<\/span>html<\/span>()).<\/span>toBe<\/span>(<\/span>`<button>\u70b9\u51fb\u6b21\u65701<\/button>`<\/span>);<\/span>\r\n        done<\/span>();<\/span>\r\n    },<\/span> 1000<\/span>);<\/span>\r\n});<\/span>\r\n\r\nit<\/span>(<\/span>'\u4f18\u96c5\u7684\u6d4b\u8bd5\u70b9\u51fb\u4e8b\u4ef6'<\/span>,<\/span> async<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> wraper<\/span> =<\/span> shallowMount<\/span>(<\/span>CountBtn<\/span>);<\/span>\r\n    const<\/span> btn<\/span> =<\/span> wraper<\/span>.<\/span>find<\/span>(<\/span>\"button\"<\/span>);<\/span>\r\n    expect<\/span>(<\/span>wraper<\/span>.<\/span>html<\/span>()).<\/span>toBe<\/span>(<\/span>`<button>\u70b9\u51fb\u6b21\u65700<\/button>`<\/span>);<\/span>\r\n    btn<\/span>.<\/span>trigger<\/span>(<\/span>'click'<\/span>);<\/span>\r\n    await<\/span> wraper<\/span>.<\/span>vm<\/span>.<\/span>$nextTick<\/span>();<\/span>\r\n    expect<\/span>(<\/span>wraper<\/span>.<\/span>html<\/span>()).<\/span>toBe<\/span>(<\/span>`<button>\u70b9\u51fb\u6b21\u65701<\/button>`<\/span>);<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n<\/div>\n
5.5 axios\u5f02\u6b65\u8bf7\u793a\u6d4b\u8bd5<\/h2>\n
\u6a21\u62df\u5f02\u6b65\u8bf7\u793a\uff0c\u6d4b\u8bd5\u6e32\u67d3\u7ed3\u679c\u662f\u5426\u4e00\u81f4<\/p>\n
\n
<!-- User.vue --><\/span>\r\n<<\/span>template<\/span>><\/span>\r\n<<\/span>table<\/span>><\/span>\r\n    <<\/span>tr<\/span> v-for<\/span>=<\/span>\"item in list\"<\/span> :key<\/span>=<\/span>\"item.id\"<\/span>><\/span>\r\n        <<\/span>td<\/span>><\/span>{{item.id}}<\/<\/span>td<\/span>><\/span>\r\n        <<\/span>td<\/span>><\/span>{{item.name}}<\/<\/span>td<\/span>><\/span>\r\n        <<\/span>td<\/span>><\/span>{{item.age}}<\/<\/span>td<\/span>><\/span>\r\n    <\/<\/span>tr<\/span>><\/span>\r\n<\/<\/span>table<\/span>><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\nexport<\/span> default<\/span> {<\/span>\r\n    data<\/span>()<\/span> {<\/span>\r\n        return<\/span> {<\/span>\r\n            list<\/span>:<\/span> []<\/span>\r\n        }<\/span>\r\n    },<\/span>\r\n    created<\/span>()<\/span> {<\/span>\r\n        this<\/span>.<\/span>$http<\/span>.<\/span>get<\/span>(<\/span>'\/user'<\/span>).<\/span>then<\/span>(({<\/span>\r\n            data<\/span>\r\n        })<\/span> =><\/span> {<\/span>\r\n            this<\/span>.<\/span>list<\/span> =<\/span> data<\/span>\r\n        })<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\/\/ User.spec.js\r\nimport { mount } from '@vue\/test-utils';\r\nimport User from '@\/components\/User';\r\n\r\nit('\u6d4b\u8bd5\u7528\u6237\u7ec4\u4ef6', async() => {\r\n    const wrapper = mount(User,{\r\n        mocks:{\r\n            $http:{\r\n                get: url=>Promise.resolve({data:[{id:1,name:'xxxx',age:18},{id:2,name:'yyyy',age:19}]})\r\n            }\r\n        }\r\n    })\r\n    console.log(wrapper.html())\r\n    \/\/ \u6e32\u67d3\u524d\r\n    expect(wrapper.html()).toBe('<<\/span>table<\/span>><\/<\/span>table<\/span>><\/span>');\r\n    await wrapper.vm.$nextTick();\r\n    \/\/ \u6e32\u67d3\u540e\r\n    \/\/ console.log(wrapper.html())\r\n    \/\/ console.log(wrapper.find('tr'))\r\n    expect(wrapper.findAll('tr').length).toBe(2)\r\n    expect(wrapper.findAll('td').at(2).html()).toBe('<<\/span>td<\/span>><\/span>18<\/<\/span>td<\/span>><\/span>')\r\n\r\n});<\/code><\/pre>\n<\/div>\n
\u516d\u3001demo\u6e90\u7801<\/h2>\n
github\u5730\u5740<\/a>\u00a0demo\u4e2d\u8fd8\u5305\u542bexpress+restful<\/code>\u63a5\u53e3\u7684\u6d4b\u8bd5\u7528\u4f8b\uff0c\u4e0d\u60f3\u7528postman<\/code>\u6d4b\u8bd5\u63a5\u53e3\u7684\u540c\u5b66\uff0c\u53ef\u4ee5\u7528jest\u6765\u4ee3\u66ff\u3002<\/p>\n
\u987a\u624b\u70b9\u4e2a\u5c0f\u7231\u5fc3\uff0c\u4ee5\u793a\u9f13\u52b1\u3002<\/p><\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n
\u53d1\u5e03\u4e8e 2020-11-10 11:01<\/div>\n","protected":false},"excerpt":{"rendered":"
\u539f\u6587\u5730\u5740 \u4e00\u3001JEST\u7b80\u4ecb Jest\u662fF<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[24],"tags":[121],"class_list":["post-5836","post","type-post","status-publish","format-standard","hentry","category-value_docs","tag-05-"],"_links":{"self":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts\/5836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/comments?post=5836"}],"version-history":[{"count":0,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts\/5836\/revisions"}],"wp:attachment":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/media?parent=5836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/categories?post=5836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/tags?post=5836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}