{"id":29596,"date":"2023-07-07T14:46:27","date_gmt":"2023-07-07T11:16:27","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/"},"modified":"2023-07-07T14:46:27","modified_gmt":"2023-07-07T11:16:27","slug":"integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/","title":{"rendered":"\u0627\u062f\u063a\u0627\u0645 Jest Testing \u062f\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Vue 3 \u0645\u0648\u062c\u0648\u062f \u0628\u0627 ViteJs"},"content":{"rendered":"<div data-article-id=\"1528825\" id=\"article-body\">\n<p>\u062f\u0631 \u062a\u062c\u0631\u0628\u0647 \u0627\u062e\u06cc\u0631\u0645\u060c \u0628\u0627 \u0686\u0627\u0644\u0634 \u0627\u062f\u063a\u0627\u0645 \u0686\u0627\u0631\u0686\u0648\u0628 \u062a\u0633\u062a Jest \u062f\u0631 \u06cc\u06a9 \u0645\u0648\u062c\u0648\u062f \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u0645 <strong>Vue3 js<\/strong> \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0627 <strong>\u0633\u0631\u06cc\u0639<\/strong>.  \u0645\u0646 \u062f\u0631 \u06cc\u0627\u0641\u062a\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0635\u0628 \u0645\u0641\u06cc\u062f \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627 \u0645\u0634\u06a9\u0644 \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u0645.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u067e\u0633 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u062a\u0644\u0627\u0634 \u0648 \u062a\u0644\u0627\u0634 \u0632\u06cc\u0627\u062f\u060c \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0645.  \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0647\u062f\u0641 \u0645\u0646 \u0627\u0631\u0627\u0626\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0635\u0628 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u062f\u06cc\u06af\u0631\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627 \u0647\u0645\u06cc\u0646 \u0686\u0627\u0644\u0634 \u0645\u0648\u0627\u062c\u0647 \u0634\u0648\u0646\u062f \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n<p><strong>\u062a\u0633\u062a \u0648\u0627\u062d\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f<\/strong> \ud83e\uddea<br \/>Jest \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0641\u06cc\u0633 \u0628\u0648\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0647\u0627\u06cc \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0627\u0646\u0646\u062f React\u060c Vue\u060c \u0648 Angular\u060c \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc Node.js \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc Jest \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0648 \u062c\u0627\u0645\u0639 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u062c\u0645\u0648\u0639\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06af\u0633\u062a\u0631\u062f\u0647 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0641\u0631\u0627\u06af\u06cc\u0631 \u0622\u0646 \u0628\u0647 \u062f\u0633\u062a \u0645\u06cc \u0622\u06cc\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f Jest \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/strong> \ud83d\udccb<br \/>\u0642\u0628\u0644 \u0627\u0632 \u0627\u062f\u0627\u0645\u0647\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<ul>\n<li>\n<p>Node.js (\u0646\u0633\u062e\u0647 14 \u06cc\u0627 \u0628\u0627\u0644\u0627\u062a\u0631) \u0648 npm (Node Package Manager) \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p>\u062f\u0627\u0646\u0634 \u0627\u0648\u0644\u06cc\u0647 Vue.js \u0648 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u062e\u062a Vite.  \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a Vue3js \u0648 Vite \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<\/ul>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_Jest_%D8%B1%D8%A7_%D8%AF%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF_%F0%9F%9A%80\" >\u0645\u0631\u062d\u0644\u0647 1: Jest \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \ud83d\ude80<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Its_%E2%9A%99%EF%B8%8F\" >\u0645\u0631\u062d\u0644\u0647 2: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc It&#8217;s \u2699\ufe0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Babel_Js_%F0%9F%94%A7\" >\u0645\u0631\u062d\u0644\u0647 3: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Babel Js \ud83d\udd27<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_packagejson_%D9%81%D8%A7%DB%8C%D9%84_%F0%9F%93%A6\" >\u0645\u0631\u062d\u0644\u0647 3: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc package.json \u0641\u0627\u06cc\u0644 \ud83d\udce6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D8%AA%D8%B3%D8%AA_%E2%9C%8D%EF%B8%8F\" >\u0645\u0631\u062d\u0644\u0647 4: \u0646\u0648\u0634\u062a\u0646 \u0627\u0648\u0644\u06cc\u0646 \u062a\u0633\u062a \u270d\ufe0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/integrating-jest-testing-into-an-existing-vue-3-project-with-vitejs-3m13\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%AA%D8%B3%D8%AA_%D9%87%D8%A7_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF_%F0%9F%8F%83%E2%80%8D%E2%99%82%EF%B8%8F\" >\u0645\u0631\u062d\u0644\u0647 5: \u062a\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \ud83c\udfc3\u200d\u2642\ufe0f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_Jest_%D8%B1%D8%A7_%D8%AF%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF_%F0%9F%9A%80\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: Jest \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \ud83d\ude80<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0627\u0628\u0637 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f\u060c \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 Vite + Vue 3 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f.  \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc Jest \u0644\u0627\u0632\u0645 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><strong>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u062e<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>yarn add jest jest-environment-jsdom babel-jest @babel\/preset-env @vue\/vue3-jest @vue\/test-utils <span class=\"nt\">-D<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 npm<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> jest jest-environment-jsdom babel-jest @babel\/preset-env @vue\/vue3-jest @vue\/test-utils\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Its_%E2%9A%99%EF%B8%8F\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc It&#8217;s \u2699\ufe0f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0646\u0635\u0628\u060c \u0628\u0627\u06cc\u062f Jest \u0631\u0627 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f <code>jest.config.js<\/code> \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u0635\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627.  \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">testEnvironment<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">jsdom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">transform<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">\"<\/span><span class=\"s2\">^.+<\/span><span class=\"se\">\\\\<\/span><span class=\"s2\">.vue$<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@vue\/vue3-jest<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"dl\">\"<\/span><span class=\"s2\">^.+<\/span><span class=\"se\">\\\\<\/span><span class=\"s2\">js$<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">babel-jest<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">testRegex<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">(\/__tests__\/.*|(<\/span><span class=\"se\">\\\\<\/span><span class=\"s2\">.|\/)(test|spec))<\/span><span class=\"se\">\\\\<\/span><span class=\"s2\">.(js|ts)$<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">moduleFileExtensions<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">vue<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">moduleNameMapper<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">\"<\/span><span class=\"s2\">^@\/(.*)$<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">&lt;rootDir&gt;\/src\/$1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">coveragePathIgnorePatterns<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/node_modules\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/tests\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">coverageReporters<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">json-summary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n    <span class=\"c1\">\/\/ Fix in order for vue-test-utils to work with Jest 29<\/span>\n    <span class=\"c1\">\/\/ https:\/\/test-utils.vuejs.org\/migration\/#test-runners-upgrade-notes<\/span>\n    <span class=\"na\">testEnvironmentOptions<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">customExportConditions<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">node<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">node-addons<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n    <span class=\"p\">},<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06cc\u0627\u0641\u062a\u0647 \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0632 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c<br \/>\u0631\u0627 <strong>\u0645\u062d\u06cc\u0637 \u0622\u0632\u0645\u0627\u06cc\u0634<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u0631\u0648\u06cc &#8220;jsdom&#8221; \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u06a9\u0647 \u0645\u062d\u06cc\u0637 \u062a\u0633\u062a \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u0627\u0632 JSDOM\u060c \u06cc\u06a9 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0632 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627\u0646\u0646\u062f \u0631\u0627 \u062f\u0631 \u0637\u0648\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0631\u0627 <strong>\u062a\u0628\u062f\u06cc\u0644<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u0646\u062d\u0648\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0627\u0646\u0648\u0627\u0639 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0637\u0648\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635\u060c \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u067e\u0633\u0648\u0646\u062f .vue \u062e\u062a\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @vue\/vue3-jest\u060c \u06a9\u0647 \u06cc\u06a9 \u062a\u0631\u0627\u0646\u0633\u0641\u0648\u0631\u0645\u0627\u062a\u0648\u0631 Jest \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc Vue 3 Single File Components (SFCs) \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.  \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (.js) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 babel-jest \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0631\u0627 <strong>testRegex<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0639\u0628\u0627\u0631\u062a \u0645\u0646\u0638\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0628\u0642\u062a \u0628\u0627 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0648\u0627\u0642\u0639 \u062f\u0631 \/ \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u0645\u06cc \u06a9\u0646\u062f<strong>\u062a\u0633\u062a \u0647\u0627<\/strong>\/ \u06cc\u0627 \u0622\u0646\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u067e\u0633\u0648\u0646\u062f .test.js \u06cc\u0627 .spec.js \u0647\u0633\u062a\u0646\u062f.  \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0647 Jest \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0639\u06cc\u0627\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u0646\u062f\u060c \u06a9\u0634\u0641 \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f.<\/p>\n<p>\u0631\u0627 <strong>moduleFile Extensions<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u067e\u0633\u0648\u0646\u062f\u0647\u0627\u06cc \u0641\u0627\u06cc\u0644\u06cc \u0631\u0627 \u06a9\u0647 Jest \u0628\u0627\u06cc\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0645\u0627\u0698\u0648\u0644 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0634\u0627\u0645\u0644 \u0645\u06cc \u0634\u0648\u062f <code>.vue<\/code> \u0648 <code>.js<\/code> \u067e\u0633\u0648\u0646\u062f\u0647\u0627<\/p>\n<p>\u0631\u0627 <strong>moduleNameMapper<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0648\u0627\u0631\u062f\u0627\u062a \u0645\u0627\u0698\u0648\u0644 \u0628\u0627\u06cc\u062f \u062d\u0644 \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u0646\u0627\u0645 \u0645\u0633\u062a\u0639\u0627\u0631 @ \u0631\u0627\u06cc\u062c \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc Vue \u0631\u0627 \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc src \u0646\u06af\u0627\u0634\u062a \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c @\/example \u0628\u0647 \/src\/example \u062d\u0644 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<p>\u0631\u0627 <strong>coveragePathIgnore Patterns<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc\u06cc \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u06cc\u0627 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0647\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0647\u0646\u06af\u0627\u0645 \u0645\u062d\u0627\u0633\u0628\u0647 \u06af\u0632\u0627\u0631\u0634 \u0647\u0627\u06cc \u067e\u0648\u0634\u0634 \u06a9\u062f \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0634\u0648\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0641\u0647\u0631\u0633\u062a\u200c\u0647\u0627\u06cc \/node_modules\/ \u0648 \/tests\/ \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0631\u0627 <strong>\u067e\u0648\u0634\u0634 \u062e\u0628\u0631\u0646\u06af\u0627\u0631\u0627\u0646<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u06af\u0632\u0627\u0631\u0634\u06af\u0631\u0627\u0646\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06af\u0632\u0627\u0631\u0634 \u067e\u0648\u0634\u0634 \u06a9\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u0632 \u06af\u0632\u0627\u0631\u0634\u06af\u0631 \u0645\u062a\u0646\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u067e\u0648\u0634\u0634 \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 \u0648 \u0627\u0632 \u06af\u0632\u0627\u0631\u0634\u06af\u0631 json-summary \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u062e\u0644\u0627\u0635\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628 JSON \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0631\u0627 <strong>testEnvironmentOptions<\/strong> \u06af\u0632\u06cc\u0646\u0647 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0645\u062e\u0635\u0648\u0635 \u0645\u062d\u06cc\u0637 \u062a\u0633\u062a \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 CustomExportConditions \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f [&#8220;node&#8221;, &#8220;node-addons&#8221;]\u060c \u06a9\u0647 \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0646 vue-test-utils \u0628\u0627 Jest 29 \u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Babel_Js_%F0%9F%94%A7\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Babel Js \ud83d\udd27<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Babel JS \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f\u060c \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">env<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">presets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n                <span class=\"p\">[<\/span>\n                    <span class=\"dl\">\"<\/span><span class=\"s2\">@babel\/preset-env<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                    <span class=\"p\">{<\/span>\n                        <span class=\"na\">targets<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n                            <span class=\"na\">node<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">current<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                        <span class=\"p\">},<\/span>\n                    <span class=\"p\">},<\/span>\n                <span class=\"p\">],<\/span>\n            <span class=\"p\">],<\/span>\n        <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u062f\u0641 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062f\u060c \u0635\u0627\u062f\u0631 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0634\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a Babel \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f.  \u0631\u0627 <strong><code>env<\/code><\/strong>  \u0648\u06cc\u0698\u06af\u06cc \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c <strong><code>env.test.presets<\/code><\/strong>  \u0648\u06cc\u0698\u06af\u06cc \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0646\u0638\u06cc\u0645 \u0647\u0627\u06cc Babel \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0639\u0645\u0627\u0644 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u062a\u0633\u062a \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u0634\u200c\u062a\u0646\u0638\u06cc\u0645 \u0634\u0627\u0645\u0644 \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u067e\u0644\u0627\u06af\u06cc\u0646\u200c\u0647\u0627 \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc Babel \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0627\u0635 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647\u200c\u0627\u0646\u062f.  \u0631\u0627 <strong><code>@babel\/preset-env<\/code><\/strong>  \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0646\u0638\u06cc\u0645 \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0647\u0627\u06cc Babel \u0648 polyfill \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u062d\u06cc\u0637 \u0647\u062f\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0645\u062d\u06cc\u0637 \u0647\u062f\u0641 \u0628\u0647 \u0635\u0648\u0631\u062a \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a <code>node: \"current\"<\/code>\u060c \u06a9\u0647 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u062f \u0628\u0647 \u0646\u0633\u062e\u0647 \u0627\u06cc \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 \u0646\u0633\u062e\u0647 \u0641\u0639\u0644\u06cc Node.js \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%D8%B1%D8%B3%D8%A7%D9%86%DB%8C_packagejson_%D9%81%D8%A7%DB%8C%D9%84_%F0%9F%93%A6\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc <code>package.json<\/code> \u0641\u0627\u06cc\u0644 \ud83d\udce6<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc <code>package.json<\/code> \u0641\u0627\u06cc\u0644\u060c \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">scripts<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"p\">...<\/span>\n        <span class=\"p\">...<\/span>\n        <span class=\"dl\">\"<\/span><span class=\"s2\">test:unit<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">jest<\/span><span class=\"dl\">\"<\/span>\n<span class=\"p\">},<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c <code>\"test:unit\"<\/code> \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u062a\u0633\u062a \u0647\u0627\u06cc \u0648\u0627\u062d\u062f \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0633\u062a\u0648\u0631 &#8220;jest&#8221; \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062f\u0633\u062a\u0648\u0631 \u06cc\u0627 \u0628\u0633\u062a\u0647 \u0642\u0627\u0628\u0644 \u0627\u062c\u0631\u0627 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0627\u062c\u0631\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0634\u062e\u0635 \u0645\u06cc \u0634\u0648\u062f.  \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0622\u0646 \u0628\u0631 \u0631\u0648\u06cc <code>\"jest\"<\/code>\u060c \u0627\u0632 \u0686\u0627\u0631\u0686\u0648\u0628 \u062a\u0633\u062a Jest \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D8%AA%D8%B3%D8%AA_%E2%9C%8D%EF%B8%8F\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 4: \u0646\u0648\u0634\u062a\u0646 \u0627\u0648\u0644\u06cc\u0646 \u062a\u0633\u062a \u270d\ufe0f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0632\u0645\u0627\u0646 \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.  \u0645\u0646 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u0645 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062f\u0631 \u0647\u0645\u0627\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0645.  <\/p>\n<p><\/p>\n<p><code>HelloWorld Component code<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"o\">&lt;<\/span><span class=\"nx\">template<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{{<\/span> <span class=\"nx\">msg<\/span> <span class=\"p\">}}<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">...<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/template<\/span><span class=\"err\">&gt;\n<\/span>\n<span class=\"o\">&lt;<\/span><span class=\"nx\">script<\/span> <span class=\"nx\">setup<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"nx\">defineProps<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">msg<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n<span class=\"o\">&lt;<\/span><span class=\"sr\">\/script<\/span><span class=\"err\">&gt;\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><code>HelloWorld Spec Test code<\/code><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">HelloWorld<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/HelloWorld.vue<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">mount<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@vue\/test-utils<\/span><span class=\"dl\">\"<\/span>\n\n<span class=\"nx\">describe<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">HelloWorld<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">renders properly<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">wrapper<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">mount<\/span><span class=\"p\">(<\/span><span class=\"nx\">HelloWorld<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">props<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">msg<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Hello Jest<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span> <span class=\"p\">})<\/span>\n\n        <span class=\"nx\">expect<\/span><span class=\"p\">(<\/span><span class=\"nx\">wrapper<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">()).<\/span><span class=\"nx\">toContain<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Hello Jest<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">})<\/span>\n<span class=\"p\">})<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%AA%D8%B3%D8%AA_%D9%87%D8%A7_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF_%F0%9F%8F%83%E2%80%8D%E2%99%82%EF%B8%8F\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 5: \u062a\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \ud83c\udfc3\u200d\u2642\ufe0f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u062a\u0633\u062a \u0647\u0627 \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\n<p>\u0631\u0627\u0628\u0637 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u0635\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>yarn unit:test\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u062a\u0633\u062a Jest \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u062a\u0633\u062a \u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/\u0627\u062f\u063a\u0627\u0645-Jest-Testing-\u062f\u0631-\u06cc\u06a9-\u067e\u0631\u0648\u0698\u0647-Vue-3-\u0645\u0648\u062c\u0648\u062f-\u0628\u0627.gif\" alt=\"\u0622\u0645\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc Jest Testing\" loading=\"lazy\" width=\"800\" height=\"450\" data-animated=\"true\" title=\"\"><\/p>\n<hr\/>\n<p>\ud83c\udf89 \ud83c\udf89 \u0647\u0648\u0631\u0627\u06cc \u0648 \u062a\u0628\u0631\u06cc\u06a9!  \ud83e\udd73 \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a Jest \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u0648 \u062a\u0633\u062a \u0648\u0627\u062d\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 Vite + Vue 3 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f.  \ud83d\ude80 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0635\u062d\u062a \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u062c\u0632\u0627\u06cc Vue \u062e\u0648\u062f\u060c \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0627\u06cc\u06cc \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u067e\u0630\u06cc\u0631\u0634 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062a\u0648\u0633\u0639\u0647 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634\u060c \u06a9\u06cc\u0641\u06cc\u062a \u06a9\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u06cc\u062f \u0648 \u062f\u0631 \u0627\u0648\u0627\u06cc\u0644 \u0686\u0631\u062e\u0647 \u062a\u0648\u0633\u0639\u0647\u060c \u0628\u0627\u06af\u200c\u0647\u0627 \u0631\u0627 \u062a\u0634\u062e\u06cc\u0635 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f.  \ud83d\udcaa<\/p>\n<p>\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06a9\u06cc\u0633 \u0647\u0627\u06cc \u062a\u0633\u062a \u062c\u0627\u0645\u0639\u06cc \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u0645\u0648\u0627\u0631\u062f \u0644\u0628\u0647 \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0633\u0648\u062f \u0631\u0627 \u0627\u0632 \u062a\u0644\u0627\u0634 \u0647\u0627\u06cc \u062a\u0633\u062a \u0648\u0627\u062d\u062f \u062e\u0648\u062f \u0628\u0647 \u062f\u0633\u062a \u0645\u06cc \u0622\u0648\u0631\u06cc\u062f.  \u062a\u0633\u062a \u0645\u0628\u0627\u0631\u06a9!  \ud83c\udfaf \ud83e\uddea <\/p>\n<p>\u0628\u0647 \u0647\u06a9 \u06a9\u0631\u062f\u0646 \u0627\u062f\u0627\u0645\u0647 \u0628\u062f\u06cc\u062f!!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u062a\u062c\u0631\u0628\u0647 \u0627\u062e\u06cc\u0631\u0645\u060c \u0628\u0627 \u0686\u0627\u0644\u0634 \u0627\u062f\u063a\u0627\u0645 \u0686\u0627\u0631\u0686\u0648\u0628 \u062a\u0633\u062a Jest \u062f\u0631 \u06cc\u06a9 \u0645\u0648\u062c\u0648\u062f \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u0645 Vue3 js \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0627 \u0633\u0631\u06cc\u0639. \u0645\u0646 \u062f\u0631 \u06cc\u0627\u0641\u062a\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0635\u0628 \u0645\u0641\u06cc\u062f \u062f\u0631 \u0648\u0628\u0644\u0627\u06af \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627 \u0645\u0634\u06a9\u0644 \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u0645. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u067e\u0633 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0628\u0627\u0631 \u062a\u0644\u0627\u0634 \u0648 \u062a\u0644\u0627\u0634 \u0632\u06cc\u0627\u062f\u060c \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0645. \u062f\u0631 \u0627\u06cc\u0646 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":29597,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-29596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/29596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=29596"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/29596\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/29597"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=29596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=29596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=29596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}