{"id":343011,"date":"2022-12-22T15:01:41","date_gmt":"2022-12-22T15:01:41","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=343011"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2022-12-22T15:01:41","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=343011","title":{"rendered":"<span>\u041a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8ba\/084\/065\/8ba084065b40f1e1dacd3acca194aba4.png\" width=\"1560\" height=\"880\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8ba\/084\/065\/8ba084065b40f1e1dacd3acca194aba4.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0411\u044b\u0432\u0430\u043b\u043e, \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0448\u044c \u0432 \u043a\u043e\u0434\u0435 \u00ab\u043d\u0435\u0445\u043e\u0440\u043e\u0448\u0438\u0439\u00bb \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0442\u0443\u0442 \u0436\u0435 \u0442\u044f\u043d\u0443\u0442\u0441\u044f \u0440\u0443\u043a\u0438 \u0438\u0445 \u043e\u0442\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c. \u041d\u043e \u043a\u0430\u043a \u043f\u043e\u0442\u043e\u043c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d? \u042d\u0442\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u044b.\u00a0<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440 \u041c\u043e\u0440\u0433\u0443\u043d\u043e\u0432, \u044f \u0442\u0435\u0445\u043b\u0438\u0434 \u0432 \u0421\u0430\u043c\u043e\u043a\u0430\u0442\u0435. \u041f\u0438\u0448\u0443 \u043d\u0430 TypeScript, React, ReactNative. \u0412 \u0440\u0430\u0437\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0438\u0441\u0430\u043b \u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438 \u043c\u043e\u0431\u0438\u043b\u043e\u043a. \u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b.\u00a0<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043f\u043e\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u0441\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432. \u0410 \u0431\u044d\u043a\u0435\u043d\u0434\u0435\u0440\u044b \u0441\u043c\u043e\u0433\u0443\u0442 \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0445\u043e\u0436\u0435\u0441\u0442\u044c \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u043b\u044f \u0431\u044d\u043a\u0430 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n<hr\/>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u043d\u0435 \u043f\u0438\u0448\u0443\u0442 \u0442\u0435\u0441\u0442\u044b? <\/h2>\n<p>\u0417\u0434\u0435\u0441\u044c \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a.\u00a0<\/p>\n<p><strong>\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430<\/strong> \u2014 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u044b \u0442\u0435\u0441\u0442\u043e\u0432. \u0414\u0443\u043c\u0430\u044e \u043a\u0430\u0436\u0434\u044b\u0439, \u043a\u0442\u043e \u043a\u043e\u0433\u0434\u0430-\u043b\u0438\u0431\u043e \u043f\u0438\u0441\u0430\u043b \u0438\u0445, \u043f\u043e\u043f\u0430\u0434\u0430\u043b \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u0442\u0435\u0440\u044f\u043b\u043e\u0441\u044c \u0441\u0430\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d \u0442\u0435\u0441\u0442. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043c\u0430\u043b\u043e\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430<\/strong> \u2013 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u043f\u0435\u0440\u0435\u0441\u0438\u043b\u0438\u043b \u0441\u0435\u0431\u044f \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0442\u0435\u0441\u0442\u044b, \u0442\u043e \u0435\u0433\u043e \u0436\u0434\u0451\u0442 \u0432\u0442\u043e\u0440\u043e\u0439 \u0431\u0430\u0440\u044c\u0435\u0440 \u0432 \u0432\u0438\u0434\u0435 \u0447\u0430\u0441\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0438 \u0434\u043e\u043b\u0433\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430, \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043a\u0430\u043a \u0436\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043f\u0440\u0430\u0432\u0434\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043d\u0435 \u043f\u0430\u0434\u0430\u0442\u044c. <\/p>\n<p><strong>\u0422\u0440\u0435\u0442\u044c\u0435\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439<\/strong> \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<p><strong>\u0427\u0435\u0442\u0432\u0451\u0440\u0442\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043b\u044e\u0431\u044f\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b (\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0438 \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u044b, \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b) \u2014 \u00ab\u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043d\u0430 \u0442\u0435\u0441\u0442\u044b \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043c\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f\u00bb.<\/p>\n<p>\u041f\u0440\u043e\u0442\u0438\u0432 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043f\u0440\u0430\u0432\u0434\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<p><strong>\u041f\u0435\u0440\u0432\u044b\u0439<\/strong> \u2013 \u043c\u044b \u0443\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430 \u043d\u0430\u0448\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u043c\u0430\u043d\u0430 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.\u00a0<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u043e\u0439<\/strong> \u2013 \u043f\u0440\u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445 \u0444\u0438\u0447, \u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435, \u043c\u044b \u0443\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0437\u043b\u043e\u043c\u0430\u043b\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u0434\u0430. \u0412 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0441 legacy-\u043a\u043e\u0434\u043e\u043c \u043b\u0438\u0431\u043e \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043f\u043e \u0442\u0435\u0441\u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0435 \u043a\u0435\u0439\u0441\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0438\u0441\u044c \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.\u00a0<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0442\u0435\u0441\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043d\u0430\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0443\u0442\u044c \u0434\u0430\u043b\u0435\u0435.<\/p>\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/h2>\n<p>\u0417\u0434\u0435\u0441\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043a\u0440\u0430\u0442\u043a\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0415\u0451 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0432\u043d\u043e, \u0435\u0449\u0451 \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430, \u0438 \u043e\u043d\u0430 \u0434\u0435\u043b\u0438\u0442 \u0432\u0441\u0451 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0438\u043f\u044b.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0442 \u0442\u0440\u0438 \u0442\u0438\u043f\u0430:\u00a0<\/p>\n<ul>\n<li>\n<p><strong>\u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b <\/strong>\u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043e\u0442 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b <\/strong>\u2013 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u044e\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0448\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438;\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>end-to-end \u0442\u0435\u0441\u0442\u044b <\/strong>\u2013 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 \u0435\u0451 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0443\u044e \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u0438 \u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438. \u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e, \u0430 end-to-end \u2013 \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e. <\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/13a\/3df\/e48\/13a3dfe48bfdb229bbedcb6a1a42dbd7.png\" alt=\"\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" title=\"\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" width=\"1600\" height=\"1000\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/13a\/3df\/e48\/13a3dfe48bfdb229bbedcb6a1a42dbd7.png\"\/><figcaption>\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/figcaption><\/figure>\n<p>\u0427\u0435\u043c \u043d\u0438\u0436\u0435 \u043a \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u0441\u0442\u044b, \u0442\u0435\u043c \u043e\u043d\u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u0442\u0435\u043c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0435\u0435 \u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f. \u041d\u043e \u0447\u0435\u043c \u0432\u044b\u0448\u0435 \u0442\u0435\u0441\u0442\u044b \u043a \u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u044b, \u0442\u0435\u043c \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0430\u0441\u0447\u0451\u0442 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435. \u0412\u043e\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e \u043f\u0438\u0448\u0435\u0442 \u043a\u0440\u0443\u0442\u043e\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440 \u041a\u0435\u043d\u0442 \u0421\u0438 \u0414\u043e\u0434\u0434\u0441:<\/p>\n<blockquote>\n<p>\u0427\u0435\u043c \u0432\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u0438 \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043e\u043d\u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u043d\u0435\u0441\u0443\u0442.<\/p>\n<\/blockquote>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u041a\u0435\u043d\u0442 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u0432\u0451\u043b \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439<a href=\"https:\/\/kentcdodds.com\/blog\/the-testing-trophy-and-testing-classifications\"> \u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/86b\/10c\/2de\/86b10c2de499d33f17612131ec1e2ac6.png\" alt=\"\u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" title=\"\u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" width=\"1600\" height=\"1000\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/86b\/10c\/2de\/86b10c2de499d33f17612131ec1e2ac6.png\"\/><figcaption>\u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/figcaption><\/figure>\n<p>\u0412 \u0442\u0440\u043e\u0444\u0435\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0432 \u0441\u0430\u043c\u043e\u043c \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u2013 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0441\u0442\u044b. \u041e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u0442\u0438\u043f\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u0437\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432, Web IDE \u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, TypeScript. \u041e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0438\u0437 \u0436\u0438\u0437\u043d\u0438.<\/p>\n<h2>\u0412\u0440\u0435\u043c\u044f \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0440\u0438\u0439<\/h2>\n<p>\u041a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0438\u0436\u0435, \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u0430\u0440\u0443 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e Access Token, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<pre><code class=\"typescript\">refreshAccessToken() {    try {        \/* ... *\/    } catch (error) {         const isNotInternetNetworkError = error.status;         if (isNotInternetNetworkError) {            this.data = undefined;        }         this.deps.softAppRestart();    } }<\/code><\/pre>\n<p>\u0412 \u043d\u0451\u043c \u043d\u0435 \u0442\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0442\u043e\u043a\u0435\u043d, \u043d\u0435\u0436\u0435\u043b\u0438 \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0435\u0441\u043b\u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u043c, \u0442\u043e \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 this.data \u043c\u044b \u043f\u0440\u0438\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043a undefined. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043c\u044b \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0442\u0430\u043a\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0434\u0435\u0442 \u0432 \u043c\u0435\u0442\u0440\u043e \u0438\u043b\u0438 \u043b\u0438\u0444\u0442\u0435, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c Access Token. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d\u0430?<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0432\u0441\u044f \u044d\u0442\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u043d\u0430\u0441 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0434\u0434\u043e\u0441\u0438\u043b\u0438, \u043b\u043e\u043c\u0430\u043b\u0438\u0441\u044c \u0431\u044d\u043a\u0435\u043d\u0434\u044b, \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 Refresh Tokens, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f Access Tokens.<\/p>\n<p>\u042d\u0442\u043e \u0431\u044b \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u043b\u043e. \u041d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u043e \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.\u00a0<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u0441\u0435 Refresh Tokens \u0431\u044b\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0443 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0438 \u043e\u043d\u0438 \u0441\u0442\u0430\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u044d\u043a\u0440\u0430\u043d \u0441 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u043e\u0439. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ed3\/9d2\/61b\/ed39d261b8e85c924d59bbed12f6d905.png\" width=\"800\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ed3\/9d2\/61b\/ed39d261b8e85c924d59bbed12f6d905.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c Access Token, \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Refresh Token \u0443\u0436\u0435 \u0432 \u0431\u0430\u0437\u0435 \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f, \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u0442\u044c, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0442\u0430\u043a \u043f\u043e \u043a\u0440\u0443\u0433\u0443.<\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043a\u0440\u044b\u043b\u0430\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u0448 \u043e\u0431\u044a\u0435\u043a\u0442 Error, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u043b\u0441\u044f \u0432 \u0431\u043b\u043e\u043a\u0435 Catch, \u0431\u044b\u043b \u0442\u0438\u043f\u0430 Any, \u0438\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, TypeScript \u043d\u0435\u044f\u0432\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b \u0435\u0433\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u0442\u0438\u043f\u0443.\u00a0<\/p>\n<p>\u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0438 \u0441\u0442\u0440\u043e\u0433\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 TypeScript \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 Error \u043a \u0442\u0438\u043f\u0443 Any, \u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a Unknown, \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0436\u0435 \u0441\u0430\u043c\u0438\u043c \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u0442\u0438\u043f. \u041d\u043e \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u043b\u0430.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0438 \u0441\u0443\u0437\u0438\u043b\u0438 Error \u0434\u043e \u043d\u0443\u0436\u043d\u043e\u0439 \u043d\u0430\u043c \u043e\u0448\u0438\u0431\u043a\u0438, Axios Error, Axios (\u041d\u0422\u0422\u0420-\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438), \u0442\u043e \u043d\u0430\u043c TypeScript \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u043b \u043e\u0448\u0438\u0431\u043a\u0443 \u0438 \u0443\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 Error \u043d\u0435\u0442 \u043f\u043e\u043b\u044f status. <\/p>\n<pre><code class=\"typescript\">catch (error) {    if (isApiError(error)) { \/\/ error: AxiosError         const isNetworkError = !error.status;        \/\/                      ^^^^^        \/\/ Property 'status' does not        \/\/ exist on type 'AxiosError&lt;any>'         if (!isNetworkError) {            this.data = undefined;        }    }    this.deps.softAppRestart(); } <\/code><\/pre>\n<p>\u0417\u0430\u0439\u0434\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 Axios, \u043c\u044b \u0431\u044b \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u0435 Status \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0437\u044f\u0442\u044c \u0438\u0437 error.response.status. \u0412\u043e\u0442 \u0442\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f \u0438\u0437-\u0437\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u0433\u043b\u0443\u043f\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438.\u00a0<\/p>\n<pre><code class=\"typescript\">catch (error) {    if (isApiError(error)) { \/\/ error: AxiosError         const isNetworkError = !error.response.status; \/\/ ?         if (!isNetworkError) {            this.data = undefined;        }    }    this.deps.softAppRestart(); }<\/code><\/pre>\n<p>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u043f\u0440\u0438\u0447\u0451\u043c \u0442\u0443\u0442 \u0442\u0435\u0441\u0442\u044b? \u0410 \u043f\u0440\u0438\u0442\u043e\u043c, \u0447\u0442\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u043d\u0430 \u044d\u0442\u043e \u0432\u0441\u0435 \u043f\u0438\u0441\u0430\u043b\u0438 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043a\u0435\u0439\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435. \u041d\u0438\u0436\u043d\u0438\u0439 \u0441\u043b\u043e\u0439 \u0432 \u0442\u0440\u043e\u0444\u0435\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0435\u0448\u0430\u0442\u044c \u0438 \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a08\/05c\/bb6\/a0805cbb655f41076af62a7e0c82ec5e.png\" width=\"800\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a08\/05c\/bb6\/a0805cbb655f41076af62a7e0c82ec5e.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0435\u0441\u0442\u0430<\/h2>\n<p>\u0424\u0430\u0439\u043b \u0441 \u0442\u0435\u0441\u0442\u043e\u043c \u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u043b\u0438\u0431\u043e \u0440\u044f\u0434\u043e\u043c \u0441 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u0435\u043c, \u043b\u0438\u0431\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e Tests, \u043a\u0443\u0434\u0430 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0432\u0441\u0435 \u0442\u0435\u0441\u0442\u044b.<\/p>\n<p>\u0422\u0435\u0441\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2013 \u0431\u043b\u043e\u043a\u043e\u0432 Describe \u0438 It. \u0414\u0435\u0441\u043a\u0440\u0430\u0439\u0431\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438, \u043e\u043d\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043b\u0438\u0431\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u044b.\u00a0<\/p>\n<p>\u0410 \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 It \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u043c \u0442\u0435\u0441\u0442. \u042f \u043b\u044e\u0431\u043b\u044e \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0435\u0441\u043a\u0440\u0430\u0439\u0431\u044b \u0438 \u0438\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f refreshAccessToken \u0438\u0437 service\/Auth \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.\u00a0<\/p>\n<pre><code class=\"typescript\">describe('service\/Auth', () => {    describe('refreshAccessToken', () => {        it('\u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u043e\u0442\u0447\u0438\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u044e\u0437\u0435\u0440\u0430', () => {        \/\/ \u0422\u0435\u043b\u043e \u0442\u0435\u0441\u0442\u0430    });    }); }); <\/code><\/pre>\n<p>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 Triple A, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0435\u043b\u043e \u0442\u0435\u0441\u0442\u0430 \u0432 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438.\u00a0<\/p>\n<pre><code class=\"typescript\">it('\u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u043e\u0442\u0447\u0438\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u044e\u0437\u0435\u0440\u0430', async () => {     const authService = new AuthService({...});  \/\/ \u043c\u043e\u043a \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430      await authService.refreshAccessToken();      expect(authService.data).toEqual(undefined); }); <\/code><\/pre>\n<ul>\n<li>\n<p>\u0412 Arrange \u043c\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u043e\u043a\u0438.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 Act \u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u0435\u0442\u043e\u0434.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 Expect \u0438\u043b\u0438 Assert \u2013 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e, \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c. <\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u043e\u0439 \u0442\u0435\u0441\u0442 \u043f\u0438\u0441\u0430\u0442\u044c<\/h2>\n<h3>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b<\/h3>\n<p>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 NodeJS. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c, \u0441\u043b\u0435\u0434\u0443\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 Test Driven Development, \u043a\u043e\u0433\u0434\u0430 \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u044b, \u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c \u043a\u043e\u0434.\u00a0<\/p>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043b\u0438\u0431\u043e \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u0447\u0442\u043e\u0431\u044b \u043e \u043d\u0438\u0445 \u043f\u043e\u0442\u043e\u043c \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c.<\/p>\n<p>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u043a\u0430\u043a \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u2014 \u043a\u0430\u043a\u0438\u043c\u0438-\u0442\u043e \u0432\u0435\u0442\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439.\u00a0<\/p>\n<p>\u041d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043c\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 25 \u0442\u044b\u0441\u044f\u0447 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432, \u0438 90% \u0438\u0437 \u043d\u0438\u0445 \u0431\u044b\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0434\u0438 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0448\u0451\u043b \u0447\u0435\u043a \u0432 GitHub \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0443. \u041f\u043e \u0441\u0443\u0442\u0438 \u0442\u0435\u0441\u0442\u044b \u0431\u044b\u043b\u0438 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435, \u043d\u0430 \u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0438\u0441\u0430\u043b\u043e\u0441\u044c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0431\u044b \u043d\u0438 \u0431\u044b\u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u0438 \u0438 \u043f\u0440\u043e\u0441\u0442\u044b \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b, \u043a\u0430\u043a \u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c, \u043e\u043d\u0438 \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u044e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u044e\u0442 \u043d\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6ee\/c91\/f98\/6eec91f982c612ee39d0ef8f4abda0b1.png\" width=\"800\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ee\/c91\/f98\/6eec91f982c612ee39d0ef8f4abda0b1.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b.<\/p>\n<p>\u0412 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0421\u0430\u043c\u043e\u043a\u0430\u0442\u0430 \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00ab\u0411\u044b\u0441\u0442\u0440\u043e\u00bb \u0438\u043b\u0438 \u00ab\u0411\u044c\u044e\u0442\u0438\u00bb, \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 SLA \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438. \u041e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u0434 \u0432\u0438\u0442\u0440\u0438\u043d\u043e\u0439, \u0432 \u043a\u0430\u043f\u0441\u0443\u043b\u0435 \u0441 \u043a\u043e\u0440\u0437\u0438\u043d\u043e\u0439 \u0438 \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u043f\u0440\u0438 \u0437\u0430\u043a\u0430\u0437\u0435. <\/p>\n<pre><code class=\"typescript\">const getRoundMinutes = (value: number, options: Options) => {  if (value > options.roundTo30.from) {    const accuracy = 30;    const mod = value % accuracy;     if (mod &lt; options.roundTo30.roundUpFromMod) {      return Math.floor(value \/ accuracy) * accuracy;    } else {      return Math.ceil(value \/ accuracy) * accuracy;    }  } else if (value >= options.roundTo10.from) {    const accuracy = 10;    const mod = value % accuracy;     if (mod &lt; options.roundTo10.roundUpFromMod) {      return Math.floor(value \/ accuracy) * accuracy;    } else {      return Math.ceil(value \/ accuracy) * accuracy;    }  } else if (value >= options.roundTo5.from) {  \/\/ ...<\/code><\/pre>\n<p>\u0412\u044b\u0448\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043c\u0435\u0442\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u043c \u043d\u0430\u043c \u043e\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u0438 \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0438\u043d\u0443\u0442, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0448 SLA, \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u0443. \u0421\u0440\u0430\u0437\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b.\u00a0<\/p>\n<p>\u041c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043a\u0440\u044b\u043b\u0438 \u0435\u0433\u043e \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u0438\u0431\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u043b\u043e\u043c\u0430\u0442\u044c.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0441\u0435\u0431\u044f \u0436\u0435 \u044f \u0432\u044b\u0432\u0435\u043b \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u0435\u0441\u043b\u0438 \u044f \u043f\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0443 \u043a\u043e\u0434\u0430 \u043d\u0435 \u043c\u043e\u0433\u0443 \u0437\u0430 1-2 \u043c\u0438\u043d\u0443\u0442\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0443\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0438\u0437-\u0437\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043b\u0438\u0431\u043e \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0430\u043b\u0433\u0435\u0431\u0440\u044b, \u0442\u043e \u043d\u0430\u0434\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b. <\/p>\n<h3>\u04152\u0415-\u0442\u0435\u0441\u0442\u044b<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u041a\u0435\u043d\u0442 \u0421\u0438 \u0414\u043e\u0434\u0434\u0441 \u0441\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0431\u044b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u044b \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0438 \u04152\u0415-\u0442\u0435\u0441\u0442\u044b.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u04152\u0415-\u0442\u0435\u0441\u0442\u044b \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 (\u0442\u0430\u043c \u0442\u0435\u0441\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f) \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 API \u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0443 \u043d\u0430\u0441 \u0442\u0435\u0441\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0442\u0443\u0434\u0430 \u0445\u043e\u0434\u0438\u043b.\u00a0<\/p>\n<p>\u0418\u0437 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u0442\u0435\u0441\u0442\u044b \u0442\u044f\u0436\u0435\u043b\u043e \u043f\u0438\u0441\u0430\u0442\u044c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043a\u0435\u0439\u0441, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e. \u041c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438\u043b\u0438 \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u0438 \u0442\u0435\u0441\u0442\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043a\u0430\u043a-\u0442\u043e \u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0431\u0430\u0437\u0443. \u0422\u0435\u0441\u0442\u043e\u0432\u044b\u0435 API \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0430\u0434\u0430\u0442\u044c, \u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0438 \u0442\u0435\u0441\u0442\u044b.\u00a0<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u04152\u0415-\u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u044e\u043d\u0438\u0442\u043e\u0432, \u0438 \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0430\u043c\u044b\u0445 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432. \u0423\u0441\u043b\u043e\u0432\u043d\u043e, \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f, \u043e\u043f\u043b\u0430\u0442\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.\u00a0<\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0448\u043b\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u0423 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 3000 \u04152\u0415-\u0442\u0435\u0441\u0442\u043e\u0432 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f \u044d\u0442\u043e\u0442 \u043f\u0430\u043a \u043f\u043e\u0440\u044f\u0434\u043a\u0430 3-4 \u0447\u0430\u0441\u043e\u0432. \u041d\u043e \u0441\u0430\u043c\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0441 \u0441\u0430\u043c\u0438\u043c\u0438 \u0442\u0435\u0441\u0442\u0430\u043c\u0438, \u0430 \u0441 \u043f\u0430\u0434\u0435\u043d\u0438\u044f\u043c\u0438. \u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0433\u043e\u043d\u0435 \u043f\u0430\u0434\u0430\u043b\u043e \u043e\u043a\u043e\u043b\u043e 0,5% \u0442\u0435\u0441\u0442\u043e\u0432. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u0446\u0435\u043b\u044b\u0445 150 \u0442\u0435\u0441\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u0420\u0435\u043b\u0438\u0437\u043d\u044b\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043c\u043e\u0433 \u0446\u0435\u043b\u044b\u0439 \u0434\u0435\u043d\u044c \u0441\u0438\u0434\u0435\u0442\u044c \u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u044d\u0442\u0438 150 \u0442\u0435\u0441\u0442\u043e\u0432 \u0443\u043f\u0430\u043b\u0438. \u0427\u0430\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u043e\u0432 \u043f\u0430\u0434\u0430\u043b\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0433 \u043b\u0430\u0433\u0430\u043d\u0443\u0442\u044c, \u0447\u0430\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u043e\u0432 \u2013 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e API \u0431\u044b\u043b \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0434\u043e\u043b\u044f \u043c\u043e\u0433\u043b\u0430 \u0443\u043f\u0430\u0441\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438 \u043f\u0440\u0430\u0432\u0434\u0430 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u041a\u043e \u0432\u0441\u0435\u043c\u0443 \u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u043b\u0438\u0437\u044b \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0438 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0435, \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043c\u043e\u0433 \u043f\u0440\u043e\u0441\u0442\u043e 40 \u0447\u0430\u0441\u043e\u0432 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0443\u043f\u0430\u0432\u0448\u0438\u0435 \u0442\u0435\u0441\u0442\u044b. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e \u0436\u0443\u0442\u043a\u0430\u044f \u0431\u043e\u043b\u044c. <\/p>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b<\/h3>\n<p>\u0420\u0430\u043d\u0435\u0435 \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u0442\u0440\u043e\u0444\u0435\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0443\u0434\u0435\u043b\u0435\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c \u0442\u0435\u0441\u0442\u0430\u043c, \u0438 \u044d\u0442\u043e \u043d\u0435\u0441\u043f\u0440\u043e\u0441\u0442\u0430. \u0427\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435?<\/p>\n<p>\u042d\u0442\u043e \u0442\u0435\u0441\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0440\u0435\u0434\u0435 NodeJS, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438. \u0415\u0441\u043b\u0438 \u043c\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u0432\u0430-\u0442\u0440\u0438 \u043c\u043e\u0434\u0443\u043b\u044f, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u0445, \u0430 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435, \u0432\u043d\u0435\u0448\u043d\u0438\u0435 API, \u043c\u044b \u043b\u0438\u0431\u043e \u043c\u043e\u043a\u0430\u0435\u043c, \u043b\u0438\u0431\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u043d\u0438\u0445 \u0441\u0442\u0430\u0431\u044b, \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c.\u00a0<\/p>\n<p>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b, \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u043b\u0438\u0431\u043e \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u043a\u0430\u043a \u0438 \u04152\u0415-\u0442\u0435\u0441\u0442\u044b. \u0414\u043b\u044f \u043d\u0438\u0445 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432, \u043e\u043d\u0438 \u043d\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u044e\u0442 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u0441 \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u0441\u0442\u043e\u0440\u043e\u043d, \u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u044e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u0446\u0435\u043b\u043e\u043c. <\/p>\n<p>\u042f \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0432\u043e\u0434\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443 \u043f\u043e \u0442\u0438\u043f\u0430\u043c \u0442\u0435\u0441\u0442\u043e\u0432 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c. \u0416\u0438\u0440\u043d\u044b\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442 \u0442\u0435\u0441\u0442 \u043d\u0430 \u0444\u043e\u043d\u0435 \u0434\u0440\u0443\u0433\u0438\u0445. \u0414\u0430\u0436\u0435 \u043f\u043e \u044d\u0442\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u044e\u0442 \u0443 \u0442\u0435\u0445 \u0436\u0435 \u044e\u043d\u0438\u0442\u043e\u0432 \u0438 \u04152\u0415-\u0442\u0435\u0441\u0442\u043e\u0432.\u00a0<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"190\" width=\"190\">\n<p align=\"left\">\n<\/td>\n<td>\n<p align=\"left\">unit<\/p>\n<\/td>\n<td data-colwidth=\"192\" width=\"192\">\n<p align=\"left\">integration<\/p>\n<\/td>\n<td>\n<p align=\"left\">e2e<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"190\" width=\"190\">\n<p align=\"left\">\u0413\u0434\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>NodeJS<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"192\" width=\"192\">\n<p align=\"left\"><strong>NodeJS<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">NodeJS + Browser<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"190\" width=\"190\">\n<p align=\"left\">\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0432\u0435\u0442\u0432\u0438\u0441\u0442\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430<\/p>\n<\/td>\n<td data-colwidth=\"192\" width=\"192\">\n<p align=\"left\">\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"190\" width=\"190\">\n<p align=\"left\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"192\" width=\"192\">\n<p align=\"left\"><strong>\u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u043d\u0443\u0436\u043d\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 API \u0441\u0442\u0435\u043d\u0434\u044b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"190\" width=\"190\">\n<p align=\"left\">\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0431\u044b\u0441\u0442\u0440\u044b\u0435<\/strong><\/p>\n<\/td>\n<td data-colwidth=\"192\" width=\"192\">\n<p align=\"left\"><strong>\u0431\u044b\u0441\u0442\u0440\u044b\u0435<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\">\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"190\" width=\"190\">\n<p align=\"left\">\u0411\u0438\u0437\u043d\u0435\u0441 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f<\/p>\n<\/td>\n<td data-colwidth=\"192\" width=\"192\">\n<p align=\"left\"><strong>\u0441\u0440\u0435\u0434\u043d\u044f\u044f<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0432\u044b\u0441\u043e\u043a\u0430\u044f<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e Black Box. \u042d\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c \u043b\u0438\u0431\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u2013 \u043d\u0430\u043c \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0434\u0430\u0451\u043c \u043d\u0430 \u0432\u0445\u043e\u0434 \u0438 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ff3\/3a1\/72f\/ff33a172f2b091c902aeda8ef8008226.jpg\" width=\"705\" height=\"401\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff3\/3a1\/72f\/ff33a172f2b091c902aeda8ef8008226.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u041d\u0430 \u0432\u0445\u043e\u0434 \u043c\u044b \u043f\u043e\u0434\u0430\u0451\u043c \u043c\u0430\u0441\u0441\u0438\u0432, \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0443\u043c\u043c\u0443. \u0418 \u043d\u0430\u043c \u043d\u0435\u0432\u0430\u0436\u043d\u043e, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438, \u0431\u0443\u0434\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0431\u043e\u0440 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430\u043a\u043a\u0443\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043b\u0438\u0431\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a\u043e\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0432\u0435\u0431-\u0432\u043e\u0440\u043a\u0435\u0440\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432 \u0431\u044c\u0451\u043c \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c\u0441\u044f. \u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u044d\u0442\u043e \u043d\u0435\u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>\u041f\u043e\u0447\u0442\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0435\u0441\u0442\u0430\u0445 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 White Box, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u043c\u044b \u043a\u0430\u043a-\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 API \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 API. <\/p>\n<h2>\u0421\u0442\u0435\u043a \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432<\/h2>\n<h3>Jest<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Jest. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0438 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u0430 \u0441 \u043a\u0443\u0447\u0435\u0439 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0445\u0435\u043b\u043f\u0435\u0440\u043e\u0432 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0442\u0435\u0441\u0442\u0430\u043c\u0438.\u00a0<\/p>\n<p>\u042f \u043d\u0435 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0441 Jest \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c (\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e), \u043d\u043e \u043f\u043e\u0447\u0442\u0438 \u043d\u0430 \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u044b \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 Stack Overflow \u043b\u0438\u0431\u043e GitHub Issues \u2013 \u0432\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043a\u0430\u043b\u0438. \u041d\u0430 Jest \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b, \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b \u0438 \u0434\u0430\u0436\u0435 \u04152\u0415-\u0442\u0435\u0441\u0442\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bb5\/3a1\/f32\/bb53a1f32c50cf6b6c9943a8dd9800a8.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441 NPM Stats. \u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0435\u0449\u0451 \u0442\u0440\u0438 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 Jest \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u043b\u0441\u044f \u043d\u0430 \u0444\u043e\u043d\u0435 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0440\u0430\u0437\u0430 \u0432 3-4 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0435\u0435 \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0439 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c\u0438. \" title=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441 NPM Stats. \u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0435\u0449\u0451 \u0442\u0440\u0438 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 Jest \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u043b\u0441\u044f \u043d\u0430 \u0444\u043e\u043d\u0435 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0440\u0430\u0437\u0430 \u0432 3-4 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0435\u0435 \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0439 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c\u0438. \" width=\"960\" height=\"429\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bb5\/3a1\/f32\/bb53a1f32c50cf6b6c9943a8dd9800a8.png\"\/><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441 NPM Stats. \u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0435\u0449\u0451 \u0442\u0440\u0438 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 Jest \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u043b\u0441\u044f \u043d\u0430 \u0444\u043e\u043d\u0435 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0440\u0430\u0437\u0430 \u0432 3-4 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0435\u0435 \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0439 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c\u0438. <\/figcaption><\/figure>\n<h3>testing-library<\/h3>\n<p>\u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d \u0435\u0451 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442. \u041e\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0443 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c. \u041e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 Black Box, \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445, \u0431\u0443\u0434\u044c \u044d\u0442\u043e Vue, React, Svetle, \u043b\u0438\u0431\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u0430\u0448 \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a. \u0422\u0430\u043a\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e testing-library \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041e\u043d\u0430 \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0439 API \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. <\/p>\n<pre><code class=\"typescript\">describe('&lt;Foo \/>', () => {    async it('should display baz', () => {        render(&lt;Foo bar=\"baz\" \/>);           fireEvent.click(screen.getByText('Change to foo'))         await waitFor(() => screen.getByRole('heading'))           expect(screen.getByRole('heading')).toHaveTextContent('foo')    }); });<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0435\u0441\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e testing-library. \u041c\u044b \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0434\u0430\u043b\u0435\u0435 \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0436\u0434\u0451\u043c, \u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0432 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442.\u00a0<\/p>\n<p>\u042d\u0442\u043e \u0443\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0430\u0436\u0435 \u043d\u0435 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u0430, \u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e UI-\u0442\u0435\u0441\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e \u0448\u0430\u0433\u0430\u043c \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0438 \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c.\u00a0<\/p>\n<p>Testing-library \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 NodeJS (\u0442.\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435) \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u00ab\u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c\u00bb \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <strong>jsdom<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 NodeJS-\u0441\u0440\u0435\u0434\u0435.\u00a0<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0432 NodeJS \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 Document, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0442\u0430\u043c \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e HTML, \u043b\u0438\u0431\u043e \u0437\u0430\u0433\u0438\u0434\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c (\u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043d\u043e\u0434\u044b, \u0438\u0441\u043a\u0430\u0442\u044c \u043d\u043e\u0434\u044b \u0438 \u0442\u0434).\u00a0<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u0430\u0445 \u0438 \u0432 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043c\u043e\u043a\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>mock service worker<\/strong> \u043b\u0438\u0431\u043e <strong>nock<\/strong>.<\/p>\n<p>\u0414\u043b\u044f \u04152\u0415-\u0442\u0435\u0441\u0442\u043e\u0432, \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0435\u0448\u0438\u0442\u0435 \u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u0438\u043b\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f, \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <strong>cypress<\/strong>, \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u0445 \u0444\u0438\u043a\u0441\u0442\u0443\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0431\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0438\u0445 \u043a\u0430\u0440\u0442, \u0435\u043c\u0435\u0439\u043b\u043e\u0432 \u2014 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 <strong>faker<\/strong>.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u043e\u0442\u0447\u0451\u0442, \u0442\u043e \u0435\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <strong>jest-allure<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0442\u0435\u0441\u0442\u043e\u0432 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u0441 \u0438\u0445 \u043f\u0440\u043e\u0433\u043e\u043d\u043e\u043c. <\/p>\n<h2>\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0430\u043c\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435, \u043a\u0430\u043a \u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 React. \u041f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0443\u044e \u0433\u0438\u0444\u043a\u0443 \u0441 \u043a\u043e\u0442\u0438\u043a\u043e\u043c. \u042f \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438\u0434\u0451\u0442 \u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043a\u043e\u0442\u0438\u043a\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043c \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0431\u0430\u0433, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u0448\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442 \u0438 \u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u0438\u043c \u043d\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4d7\/f22\/bf1\/4d7f22bf1ebd0d1881392aaf588de31b.gif\" width=\"800\" height=\"549\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4d7\/f22\/bf1\/4d7f22bf1ebd0d1881392aaf588de31b.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0448\u0430\u0433\u0438 \u0432 \u043d\u0451\u043c \u0431\u0443\u0434\u0443\u0442. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0411\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043d\u043e\u043f\u043a\u0430.\u00a0<\/p>\n<p>\u0412\u0442\u043e\u0440\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u2013 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0442\u0440\u0435\u0442\u044c\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u2013 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c loader \u0438 \u0436\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0443 \u043d\u0430\u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u0442\u0438\u043a, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c source \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/518\/86a\/17a\/51886a17ad8ebe37759a278dd53253ec.png\" width=\"1551\" height=\"676\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/518\/86a\/17a\/51886a17ad8ebe37759a278dd53253ec.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438. \u0413\u0434\u0435-\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u0448\u0430\u0433\u0430\u043c\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 API.\u00a0<\/p>\n<p>\u0421\u0430\u043c \u0442\u0435\u0441\u0442 \u043c\u043e\u0436\u043d\u043e \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c  \u043f\u043e \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0445\u0435\u043c\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0434\u0435\u0441\u043a\u0440\u0430\u0439\u0431\u043e\u0432 \u0438 \u0438\u0442\u043e\u0432. \u041d\u043e \u0432 \u0442\u0435\u043b\u043e \u0442\u0435\u0441\u0442\u0430 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u0445\u0435\u043b\u043f\u0435\u0440 step, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0432\u0441\u0435 \u044d\u0442\u0438 \u0448\u0430\u0433\u0438 \u043a\u0430\u043a-\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435 \u043e\u0431\u0449\u0435\u0439 \u043a\u0430\u0448\u0435\u0439, \u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c. <\/p>\n<p>\u0417\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">describe('feature\/\u0421at', () => {    it('\u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u0442\u0430, async () => {         await step('1. \u041c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442', () => {});         await step('2. \u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \"Give me a cat\"', () => {});         await step('3. \u0416\u0434\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438', () => {});         await step('4. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0438\u0444\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435', () => {});    }); });<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0435\u043b\u043f\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u043e\u043c \u044d\u0442\u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u0448\u0430\u0433\u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0447\u0451\u0442, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0448\u0430\u0433\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.\u00a0<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0441\u0430\u043c\u0438\u0445 \u044d\u0442\u0438\u0445 \u0448\u0430\u0433\u043e\u0432, \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u0430\u0440\u043e\u0447\u043a\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f Jest \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432, \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438, \u0441\u0432\u043e\u0435\u0439 \u043c\u0430\u0441\u043a\u043e\u0439 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. <\/p>\n<pre><code class=\"typescript\">\/\/ jest.config.js  if (process.env.INTEGRATION_MODE) {    module.exports.testMatch = ['**\/*.intergration.spec.tsx'];    module.exports.setupFiles.push('&lt;rootDir>\/tests\/global.ts');     \/\/ ... } <\/code><\/pre>\n<p>\u0412 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043a\u0435\u0439\u0441\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u0436\u0435 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u0412\u044b\u0448\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0441\u0432\u043e\u044f \u043c\u0430\u0441\u043a\u0430 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u0430, .integration.spec.tsx, \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044f\u0442\u044c \u043e\u0442 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u042d\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043b\u0438\u0431\u043e \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0434\u043e\u043c-\u0443\u0437\u043b\u0430\u043c\u0438 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u041f\u043e\u043a\u0430\u0436\u0443 \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435. <\/p>\n<pre><code class=\"typescript\">const datePickerPO = {    selector: '.date-picker',    open: () => {\/*...*\/},    setDay: (day: number) => {\/*...*\/},    close: () => {\/*...*\/}, }  \/\/ ...  datePickerPO.open(); datePickerPO.setDay(5); datePickerPO.close();<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Datepicker, \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, DatePickerPO, \u0432 \u043d\u0451\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c selector, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043d\u0430\u0439\u0442\u0438 Datepicker, \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u043f\u043e\u043f\u0430\u043f\u0430, \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0434\u043d\u044f \u0438 \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f. \u041f\u043e\u0442\u043e\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u0442\u0435\u0441\u0442\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u0436\u0435 \u043d\u0430\u0448 Page Object. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0438 \u043a\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. <\/p>\n<pre><code class=\"typescript\">class LoginPagePO extends PagePO {    get username () { return $('#username') }    get password () { return $('#password') }    get submitBtn () { return $('form button[type=\"submit\"]') }    get flash () { return $('#flash') }    get headerLinks () { return $$('#header a') }     async open () {}     async submit () {} }<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0432\u0441\u0451 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Page Object \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0438 \u0442\u0430\u043c \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0444\u043e\u0440\u043c\u0435.\u00a0<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0436\u0435 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u0436\u0435\u0442 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u0442\u0438\u043a\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.\u00a0<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435, \u043c\u0435\u0442\u043e\u0434 GetLoader, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0448 Loader \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e, \u0438 \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 Loader \u0441\u043a\u0440\u043e\u0435\u0442\u0441\u044f, \u0443\u0439\u0434\u0451\u0442 \u0438\u0437 Dom. <\/p>\n<p><code>fireEvent, getByTestId, queryByTestId, waitForElementToBeRemoved<\/code> \u2014 \u043c\u0435\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 testing-library \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0430\u0448\u0438\u043c \u0434\u043e\u043c\u043e\u043c.\u00a0<\/p>\n<pre><code class=\"typescript\">export const awesomeCatPO = {     clickToButton() {         fireEvent.click(getByTestId(document.body, 'button'));     },     getLoader() {         return queryByTestId(document.body, \"loader\");     },     async waitForLoaderHide() {          await waitForElementToBeRemoved(() => {               return this.getLoader()          })     },     \/\/ ... }<\/code><\/pre>\n<p>\u041a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 Button Page Object, \u0442\u043e \u0435\u0441\u0442\u044c, \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435, \u0438 \u0432 \u0438\u0434\u0435\u0430\u043b\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0441\u0432\u043e\u0439 Page Object.<\/p>\n<pre><code class=\"typescript\">export const awesomeCatPO = {     clickToButton() {         fireEvent.click(getByTestId(document.body, 'button'));         buttonPO.click();     },     getLoader() {         return queryByTestId(document.body, \"loader\");     },     async waitForLoaderHide() {          await waitForElementToBeRemoved(() => {               return this.getLoader()          })     },     \/\/ ... } <\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d Helper \u0434\u043b\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 Dom. \u041e\u0431\u044b\u0447\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043e\u0442 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u0431\u044b \u043d\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u043d\u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 Helper, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Store), \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u0432 \u0442\u0435\u0441\u0442\u0430\u0445.<\/p>\n<pre><code class=\"typescript\">function mountComponent&lt;P>({ Component, props, state }) {    const store = mockStore();     return {        component: render(            &lt;Provider store={store}>                &lt;Component props={props} \/>            &lt;\/Provider>,        ),        store,    }; }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 testing-library \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0438\u0441\u043a\u0430\u0442\u044c dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e CSS-\u043a\u043b\u0430\u0441\u0441\u0443 \u043b\u0438\u0431\u043e \u043f\u043e \u0438\u043d\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443. \u041f\u043e \u043c\u043d\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 testing-library, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0438\u0449\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e CSS-\u043a\u043b\u0430\u0441\u0441\u0443, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0449\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u0430\u043c, \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430\u0445 \u0438 \u0432 \u0442\u0435\u0441\u0442\u0430\u0445 \u043d\u0443\u0436\u043d\u043e \u044d\u0442\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0434\u0430, \u043d\u043e \u0441 \u0434\u0440\u0443\u0433\u043e\u0439, \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443\/\u043b\u0435\u0439\u0431\u043b\u0443\/\u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u0443 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043a\u0435\u0439\u0441\u0430\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c date-testid \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0442\u0435\u0441\u0442\u0430\u0445. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0437\u0430\u0434\u0430\u0451\u043c date-testid \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043b\u043e\u0430\u0434\u0435\u0440\u0430, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e79\/383\/8f1\/e793838f1d9cc881292f1dce08b60566.png\" width=\"630\" height=\"403\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e79\/383\/8f1\/e793838f1d9cc881292f1dce08b60566.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043a\u043e\u0434\u0435 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a. <\/p>\n<pre><code class=\"typescript\"> return (     &lt;div data-tid=\"awesome-cat\">        &lt;img data-tid=\"image\" src={catImageUrl} \/>     &lt;\/div>  ); <\/code><\/pre>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0441\u043e\u0440\u044f\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u0434 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443 \u043d\u0430\u0441 \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u0442\u0435\u0441\u0442\u044b. \u0415\u0441\u043b\u0438 \u043c\u044b \u0447\u0442\u043e-\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u043c, \u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0438 \u0442\u0435\u0441\u0442. \u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u043b\u044e\u0441 \u2014 \u043c\u044b \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 UI \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u0432\u0451\u0440\u0441\u0442\u043a\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0441\u043c\u0435\u043d\u044b \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0442\u0435\u0441\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.\u00a0<\/p>\n<p>\u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u0432\u0441\u0451 \u043d\u0443\u0436\u043d\u043e\u0435 \u0438 \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0435. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438, \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0432\u043d\u0435\u0448\u043d\u0438\u0435 API-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0432\u0441\u0451 \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438. \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0432\u0441\u0451 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 Jest. <\/p>\n<p>\u041f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c:\u00a0<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Jest,\u00a0<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u2013 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0442\u0435\u0441\u0442 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438, \u0442\u043e \u0438 Page Object \u043f\u0438\u0448\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438\u00a0<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Helper \u0434\u043b\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0438\u0442\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e)\u00a0<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c date-testid \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b (\u0438\u0442\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e),\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u0432\u0441\u0451 \u043d\u0443\u0436\u043d\u043e\u0435 \u0438 \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0435,<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u043e\u0442\u0447\u0451\u0442\u0430 (\u043f\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u044e). <\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0451, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0448\u0430\u0433\u0430\u043c. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0443\u0436\u0435 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 Helper Mount Component, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.\u00a0<\/p>\n<pre><code class=\"typescript\">     await step('1. \u041c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442', () => {        mountComponent({          Component: AwesomeCat,          state: {\/* ... *\/},        });      });<\/code><\/pre>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0448\u0430\u0433. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 Page Object, \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 Click to Button, \u0442\u043e \u0435\u0441\u0442\u044c \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435.\u00a0<\/p>\n<pre><code class=\"typescript\"> await step('2. \u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \"Give me a cat\"', () => {      PO.clickToButton();  });<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043c\u043e\u043a\u0430\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0430\u0436\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 Jest. \u041d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u0438\u043a\u0441\u0442\u0443\u0440\u0443 \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API.<\/p>\n<pre><code class=\"typescript\">jest.mock('axios');  function mockGiphyRequst() {    axios.get.mockResolvedValue({\/* ... *\/}); }<\/code><\/pre>\n<p>\u0422\u0440\u0435\u0442\u0438\u0439 \u0448\u0430\u0433. \u041c\u044b \u0436\u0434\u0451\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043d\u043e \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e Loader \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0448 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Page Object \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Matcher toBeInTheDocument, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Jest, \u0438 \u0438\u0437 \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0436\u0434\u0451\u043c, \u043f\u043e\u043a\u0430 \u0441\u043f\u0438\u043d\u043d\u0435\u0440 \u043d\u0435 \u0441\u043a\u0440\u043e\u0435\u0442\u0441\u044f.<\/p>\n<pre><code class=\"typescript\">await step('3. \u0416\u0434\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438', async () => {     expect(PO.getLoader()).toBeInTheDocument();          await PO.waitForLoaderHide(); });<\/code><\/pre>\n<p>\u041d\u0430 \u0447\u0435\u0442\u0432\u0451\u0440\u0442\u043e\u043c \u0448\u0430\u0433\u0435 \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u043b\u0435 Source \u2013 \u0442\u0430\u043c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u0442 \u043f\u0443\u0442\u044c \u0434\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0437\u0430\u043c\u043e\u043a\u0430\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435. \u0412\u0441\u0451, \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442 \u0441 \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0441 date-testid \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438.<\/p>\n<pre><code class=\"typescript\">await step('4. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0438\u0444\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435', () => {    expect(PO.getImage()).toBeInTheDocument();     expect(PO.getImage()).toHaveAttribute('src', 'mocked.gif'); });<\/code><\/pre>\n<p>\u041a\u0430\u043a\u0438\u0435 \u043c\u044b \u0435\u0449\u0451 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u043e\u043d\u0443\u0441\u044b \u043e\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432? \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u04152\u0415-\u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u2014 \u043e\u0447\u0435\u043d\u044c \u0434\u0435\u0448\u0451\u0432\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432.\u00a0<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0438 \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0442\u0435\u0441\u0442\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u0432\u0441\u0451 \u043f\u043e\u0434\u0440\u044f\u0434 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0447\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u2013 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443 \u043d\u0430\u0441 \u0441 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u043c\u043e\u0434\u0443\u043b\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0442\u043e\u0438\u0442 \u043e\u0431 \u044d\u0442\u043e\u043c \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f.\u00a0<\/p>\n<p>\u0418 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0431\u043e\u043d\u0443\u0441 \u2013 \u043a\u0430\u043a \u0438 \u0432 \u04152\u0415-\u0442\u0435\u0441\u0442\u0430\u0445, \u0448\u0430\u0433\u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c QA-\u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b. \u0412 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0445\u0435\u043c\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u0439\u0442\u0438 \u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0443, \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u043e\u0432, \u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0422\u0438\u043c\u043b\u0438\u0434 \u0438\u043b\u0438 \u0431\u0438\u0437\u043d\u0435\u0441 \u0441\u0442\u0430\u0432\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0443, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442. \u0412 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043f\u0438\u0448\u0435\u0442 \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432, \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u043a\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u043e \u044d\u0442\u0438\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u043a\u0435\u0439\u0441\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432<\/h2>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u2013 \u044d\u0442\u043e <strong>\u043c\u043e\u043a\u0438 \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/strong>. \u041d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u0430\u0445 \u0443 \u043d\u0430\u0441 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441, \u0430 2-4 \u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u043c\u043e\u043a\u0430\u0442\u044c, \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0444\u0438\u043a\u0441\u0442\u0443\u0440\u044b \u2013 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u044f\u0436\u0435\u043b\u043e.\u00a0<\/p>\n<p>\u041f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u043e\u043f\u044b\u0442\u0443 \u043c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0444\u0430\u0431\u0440\u0438\u043a\u0443 \u043b\u0438\u0431\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0444\u0438\u043a\u0441\u0442\u0443\u0440, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u044d\u0442\u043e \u0432\u0441\u0451 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0442\u0435\u0441\u0442\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043c \u0442\u0435\u0441\u0442.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 json-\u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u0438\u043a\u0441\u0442\u0443\u0440\u044b. \u0414\u0430, \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 API \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c, \u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438.\u00a0<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u2014 <strong>\u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0431\u0430\u0433\u0430<\/strong>. \u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0442\u0435\u0441\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 NodeJS, \u0442\u043e \u043f\u0440\u0438 \u043f\u0430\u0434\u0435\u043d\u0438\u0438 \u0442\u0435\u0441\u0442\u0430 \u043d\u0430\u043c testing-library \u043b\u044e\u0431\u0435\u0437\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442 HTML \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435. \u041d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0447\u0435\u043c-\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u043c, \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043b\u043e\u0436\u043d\u044b\u0435, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u043f\u043e\u0440\u0442\u044f\u043d\u043a\u0443 \u043a\u043e\u0434\u0430 \u0438 \u043e\u0448\u0438\u0431\u043e\u0447\u043a\u0443(\u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u043d\u0430\u0436\u0430\u043b\u0430\u0441\u044c \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f), \u0432 \u044d\u0442\u043e\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f2a\/f7f\/dd4\/f2af7fdd43dfc00aa13138d6148694ee.png\" width=\"1191\" height=\"849\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f2a\/f7f\/dd4\/f2af7fdd43dfc00aa13138d6148694ee.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 jest-preview, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043f\u0440\u043e\u0433\u043d\u0430\u0442\u044c \u043d\u0430\u0448 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442 \u043f\u0440\u044f\u043c\u043e \u0442\u0430\u043c. \u041d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043c\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441 CSS \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u043d\u043e \u044d\u0442\u043e \u0442\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/04e\/4bb\/a24\/04e4bba24494eaffd6a096690d71740f.gif\" width=\"1000\" height=\"562\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/04e\/4bb\/a24\/04e4bba24494eaffd6a096690d71740f.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 \u2013 \u044d\u0442\u043e <strong>\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/strong>. \u041d\u0430 NodeJS, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u043e\u0440\u043c\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u044b\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u0430 \u043e\u0431\u044b\u0447\u043d\u044b\u043c CSS, \u043b\u0438\u0431\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c \u0431\u043b\u043e\u043a\u043e\u043c.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0432\u043e\u0434\u044f\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2013 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u00ab\u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b\u00bb. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432 headless browser, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0438 \u043f\u043e\u0442\u043e\u043c \u044d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u043c\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/27c\/fd8\/4e2\/27cfd84e282236c7736829809b429b33.png\" alt=\"\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" title=\"\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" width=\"1600\" height=\"1000\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/27c\/fd8\/4e2\/27cfd84e282236c7736829809b429b33.png\"\/><figcaption>\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/figcaption><\/figure>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u0434\u043b\u044f UIKit \u0438 \u0434\u043b\u044f \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u0445 \u0444\u0438\u0448\u043a\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043d\u0430\u0441 \u0445\u0435\u043b\u043f\u0435\u0440\u044b, date-testid \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438\u0437 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432. <\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Matcher \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442.\u00a0<\/p>\n<pre><code class=\"typescript\">describe('feature\/\u0421at', () => {    it('\u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438', async () => {        mountComponent({ Component: AwesomeCat });         expect(await page.screenshot()).toMatchImageSnapshot();    }); });<\/code><\/pre>\n<h2>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u043f\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u0447\u0430\u0441\u0442\u0438 \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/h2>\n<p>\u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u0432\u0438\u0434\u0435\u043e \u043f\u043e \u0442\u0435\u043c\u0435.\u00a0<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/testing-library.com\/docs\"><u>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f testing-library<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0432 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c\u0435:<a href=\"https:\/\/t.me\/amorgunov\/79\"> <u>RTL<\/u><\/a> \u0438<a href=\"https:\/\/t.me\/amorgunov\/97\"> <u>\u041a\u0430\u043a \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=e9DRhxRwsfU\"><u>\u0414\u043e\u043a\u043b\u0430\u0434 \u0441 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u201c\u041f\u043e\u0434\u043b\u043e\u0434\u043a\u0430<\/u><\/a>\u201d \u043f\u0440\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=GIMs2bZ0yww&amp;t=290s\"><u>\u0414\u043e\u043a\u043b\u0430\u0434 \u043f\u0440\u043e testing-library<\/u><\/a> \u043e\u0442 \u043c\u043e\u0435\u0433\u043e \u0431\u044b\u0432\u0448\u0435\u0433\u043e \u043a\u043e\u043b\u043b\u0435\u0433\u0438 \u0412\u0430\u0441\u0438\u043b\u0438\u044f \u041a\u0443\u0437\u0435\u043d\u043a\u043e\u0432\u0430.\u00a0<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=ULwdj_Vr_WA\"><u>\u0414\u043e\u043a\u043b\u0430\u0434 \u0441 HolyJS<\/u><\/a> \u043f\u0440\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u0432 \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u0435 \u2013 \u044f \u0432\u044b\u043b\u043e\u0436\u0438\u043b \u043d\u0430<a href=\"https:\/\/github.com\/noveogroup-amorgunov\/frontend-testing\"> <u>GitHub<\/u><\/a>, \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0439\u0442\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0430 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0435 \u043f\u0438\u0448\u0435\u0442\u0435 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b, \u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c. \u042f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043a\u043e\u0434\u0430, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043b\u0438\u0431\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0442\u0430\u043c \u0441\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0431\u0430\u0433\u0438. \u042f \u0434\u0443\u043c\u0430\u044e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u0442\u0435 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b, \u0442\u043e \u0432\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u0430.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442. \u041f\u043e \u0441\u0435\u043a\u0440\u0435\u0442\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0439\u0434\u0436-\u043e\u0431\u044a\u0435\u043a\u0442\u044b, date-testid \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435; \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c testing-library \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 UIKit, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b.<\/p>\n<p>\u041a\u0430\u043a \u043f\u0438\u0441\u0430\u043b \u041a\u0435\u043d\u0442 \u0421\u0438 \u0414\u043e\u0434\u0434\u0441: \u00ab\u041f\u0438\u0448\u0438\u0442\u0435 \u0442\u0435\u0441\u0442\u044b, \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e, \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445\u00bb. \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/samokat_tech\/blog\/704342\/\"> https:\/\/habr.com\/ru\/company\/samokat_tech\/blog\/704342\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0411\u044b\u0432\u0430\u043b\u043e, \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0448\u044c \u0432 \u043a\u043e\u0434\u0435 \u00ab\u043d\u0435\u0445\u043e\u0440\u043e\u0448\u0438\u0439\u00bb \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0442\u0443\u0442 \u0436\u0435 \u0442\u044f\u043d\u0443\u0442\u0441\u044f \u0440\u0443\u043a\u0438 \u0438\u0445 \u043e\u0442\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c. \u041d\u043e \u043a\u0430\u043a \u043f\u043e\u0442\u043e\u043c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d? \u042d\u0442\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u044b.\u00a0<\/p>\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440 \u041c\u043e\u0440\u0433\u0443\u043d\u043e\u0432, \u044f \u0442\u0435\u0445\u043b\u0438\u0434 \u0432 \u0421\u0430\u043c\u043e\u043a\u0430\u0442\u0435. \u041f\u0438\u0448\u0443 \u043d\u0430 TypeScript, React, ReactNative. \u0412 \u0440\u0430\u0437\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0438\u0441\u0430\u043b \u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u0438 \u043c\u043e\u0431\u0438\u043b\u043e\u043a. \u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b.\u00a0<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043f\u043e\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u0441\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432. \u0410 \u0431\u044d\u043a\u0435\u043d\u0434\u0435\u0440\u044b \u0441\u043c\u043e\u0433\u0443\u0442 \u043b\u0438\u0448\u043d\u0438\u0439 \u0440\u0430\u0437 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0445\u043e\u0436\u0435\u0441\u0442\u044c \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u043b\u044f \u0431\u044d\u043a\u0430 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n<hr\/>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u043d\u0435 \u043f\u0438\u0448\u0443\u0442 \u0442\u0435\u0441\u0442\u044b? <\/h2>\n<p>\u0417\u0434\u0435\u0441\u044c \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a.\u00a0<\/p>\n<p><strong>\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430<\/strong> \u2014 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u044b \u0442\u0435\u0441\u0442\u043e\u0432. \u0414\u0443\u043c\u0430\u044e \u043a\u0430\u0436\u0434\u044b\u0439, \u043a\u0442\u043e \u043a\u043e\u0433\u0434\u0430-\u043b\u0438\u0431\u043e \u043f\u0438\u0441\u0430\u043b \u0438\u0445, \u043f\u043e\u043f\u0430\u0434\u0430\u043b \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u0442\u0435\u0440\u044f\u043b\u043e\u0441\u044c \u0441\u0430\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d \u0442\u0435\u0441\u0442. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043c\u0430\u043b\u043e\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430<\/strong> \u2013 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u043f\u0435\u0440\u0435\u0441\u0438\u043b\u0438\u043b \u0441\u0435\u0431\u044f \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0442\u0435\u0441\u0442\u044b, \u0442\u043e \u0435\u0433\u043e \u0436\u0434\u0451\u0442 \u0432\u0442\u043e\u0440\u043e\u0439 \u0431\u0430\u0440\u044c\u0435\u0440 \u0432 \u0432\u0438\u0434\u0435 \u0447\u0430\u0441\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0438 \u0434\u043e\u043b\u0433\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430, \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043a\u0430\u043a \u0436\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043f\u0440\u0430\u0432\u0434\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043d\u0435 \u043f\u0430\u0434\u0430\u0442\u044c. <\/p>\n<p><strong>\u0422\u0440\u0435\u0442\u044c\u0435\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439<\/strong> \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<p><strong>\u0427\u0435\u0442\u0432\u0451\u0440\u0442\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043b\u044e\u0431\u044f\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b (\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0438 \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u044b, \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b) \u2014 \u00ab\u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043d\u0430 \u0442\u0435\u0441\u0442\u044b \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043c\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f\u00bb.<\/p>\n<p>\u041f\u0440\u043e\u0442\u0438\u0432 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043f\u0440\u0430\u0432\u0434\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0435\u0441\u0442\u043e\u0432.<\/p>\n<p><strong>\u041f\u0435\u0440\u0432\u044b\u0439<\/strong> \u2013 \u043c\u044b \u0443\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430 \u043d\u0430\u0448\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u043c\u0430\u043d\u0430 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.\u00a0<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u043e\u0439<\/strong> \u2013 \u043f\u0440\u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445 \u0444\u0438\u0447, \u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435, \u043c\u044b \u0443\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0437\u043b\u043e\u043c\u0430\u043b\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u0434\u0430. \u0412 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0441 legacy-\u043a\u043e\u0434\u043e\u043c \u043b\u0438\u0431\u043e \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043f\u043e \u0442\u0435\u0441\u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0435 \u043a\u0435\u0439\u0441\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u0438\u0441\u044c \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.\u00a0<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0442\u0435\u0441\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043d\u0430\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0443\u0442\u044c \u0434\u0430\u043b\u0435\u0435.<\/p>\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/h2>\n<p>\u0417\u0434\u0435\u0441\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043a\u0440\u0430\u0442\u043a\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0415\u0451 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0432\u043d\u043e, \u0435\u0449\u0451 \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0430, \u0438 \u043e\u043d\u0430 \u0434\u0435\u043b\u0438\u0442 \u0432\u0441\u0451 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0438\u043f\u044b.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0442 \u0442\u0440\u0438 \u0442\u0438\u043f\u0430:\u00a0<\/p>\n<ul>\n<li>\n<p><strong>\u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b <\/strong>\u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043e\u0442 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b <\/strong>\u2013 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u044e\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0448\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438;\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>end-to-end \u0442\u0435\u0441\u0442\u044b <\/strong>\u2013 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 \u0435\u0451 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0443\u044e \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u0438 \u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438. \u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e, \u0430 end-to-end \u2013 \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e. <\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>\u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/figcaption><\/figure>\n<p>\u0427\u0435\u043c \u043d\u0438\u0436\u0435 \u043a \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u0441\u0442\u044b, \u0442\u0435\u043c \u043e\u043d\u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u0442\u0435\u043c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0435\u0435 \u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f. \u041d\u043e \u0447\u0435\u043c \u0432\u044b\u0448\u0435 \u0442\u0435\u0441\u0442\u044b \u043a \u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u044b, \u0442\u0435\u043c \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0430\u0441\u0447\u0451\u0442 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435. \u0412\u043e\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e \u043f\u0438\u0448\u0435\u0442 \u043a\u0440\u0443\u0442\u043e\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440 \u041a\u0435\u043d\u0442 \u0421\u0438 \u0414\u043e\u0434\u0434\u0441:<\/p>\n<blockquote>\n<p>\u0427\u0435\u043c \u0432\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u0438 \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043e\u043d\u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u043d\u0435\u0441\u0443\u0442.<\/p>\n<\/blockquote>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u041a\u0435\u043d\u0442 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u0432\u0451\u043b \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439<a href=\"https:\/\/kentcdodds.com\/blog\/the-testing-trophy-and-testing-classifications\"> \u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a>.<\/p>\n<figure class=\"full-width\"><figcaption>\u0442\u0440\u043e\u0444\u0435\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/figcaption><\/figure>\n<p>\u0412 \u0442\u0440\u043e\u0444\u0435\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0432 \u0441\u0430\u043c\u043e\u043c \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u2013 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0441\u0442\u044b. \u041e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u0442\u0438\u043f\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u0437\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432, Web IDE \u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, TypeScript. \u041e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0438\u0437 \u0436\u0438\u0437\u043d\u0438.<\/p>\n<h2>\u0412\u0440\u0435\u043c\u044f \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0440\u0438\u0439<\/h2>\n<p>\u041a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0438\u0436\u0435, \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u0430\u0440\u0443 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e Access Token, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<pre><code class=\"typescript\">refreshAccessToken() {    try {        \/* ... *\/    } catch (error) {         const isNotInternetNetworkError = error.status;         if (isNotInternetNetworkError) {            this.data = undefined;        }         this.deps.softAppRestart();    } }<\/code><\/pre>\n<p>\u0412 \u043d\u0451\u043c \u043d\u0435 \u0442\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0442\u043e\u043a\u0435\u043d, \u043d\u0435\u0436\u0435\u043b\u0438 \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0435\u0441\u043b\u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u043c, \u0442\u043e \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 this.data \u043c\u044b \u043f\u0440\u0438\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043a undefined. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043c\u044b \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0442\u0430\u043a\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0434\u0435\u0442 \u0432 \u043c\u0435\u0442\u0440\u043e \u0438\u043b\u0438 \u043b\u0438\u0444\u0442\u0435, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c Access Token. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d\u0430?<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0432\u0441\u044f \u044d\u0442\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u043d\u0430\u0441 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0434\u0434\u043e\u0441\u0438\u043b\u0438, \u043b\u043e\u043c\u0430\u043b\u0438\u0441\u044c \u0431\u044d\u043a\u0435\u043d\u0434\u044b, \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 Refresh Tokens, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f Access Tokens.<\/p>\n<p>\u042d\u0442\u043e \u0431\u044b \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u043b\u043e. \u041d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u043e \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.\u00a0<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u0441\u0435 Refresh Tokens \u0431\u044b\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0443 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0438 \u043e\u043d\u0438 \u0441\u0442\u0430\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u044d\u043a\u0440\u0430\u043d \u0441 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u043e\u0439. <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c Access Token, \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Refresh Token \u0443\u0436\u0435 \u0432 \u0431\u0430\u0437\u0435 \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f, \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u0442\u044c, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0442\u0430\u043a \u043f\u043e \u043a\u0440\u0443\u0433\u0443.<\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043a\u0440\u044b\u043b\u0430\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u0448 \u043e\u0431\u044a\u0435\u043a\u0442 Error, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u043b\u0441\u044f \u0432 \u0431\u043b\u043e\u043a\u0435 Catch, \u0431\u044b\u043b \u0442\u0438\u043f\u0430 Any, \u0438\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, TypeScript \u043d\u0435\u044f\u0432\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b \u0435\u0433\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u0442\u0438\u043f\u0443.\u00a0<\/p>\n<p>\u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0438 \u0441\u0442\u0440\u043e\u0433\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 TypeScript \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 Error \u043a \u0442\u0438\u043f\u0443 Any, \u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a Unknown, \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0436\u0435 \u0441\u0430\u043c\u0438\u043c \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u0442\u0438\u043f. \u041d\u043e \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0442\u0430 \u0432\u0435\u0440\u0441\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u043b\u0430.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0438 \u0441\u0443\u0437\u0438\u043b\u0438 Error \u0434\u043e \u043d\u0443\u0436\u043d\u043e\u0439 \u043d\u0430\u043c \u043e\u0448\u0438\u0431\u043a\u0438, Axios Error, Axios (\u041d\u0422\u0422\u0420-\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438), \u0442\u043e \u043d\u0430\u043c TypeScript \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u043b \u043e\u0448\u0438\u0431\u043a\u0443 \u0438 \u0443\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 Error \u043d\u0435\u0442 \u043f\u043e\u043b\u044f status. <\/p>\n<pre><code class=\"typescript\">catch (error) {    if (isApiError(error)) { \/\/ error: AxiosError         const isNetworkError = !error.status;        \/\/                      ^^^^^        \/\/ Property 'status' does not        \/\/ exist on type 'AxiosError&lt;any>'         if (!isNetworkError) {            this.data = undefined;        }    }    this.deps.softAppRestart(); } <\/code><\/pre>\n<p>\u0417\u0430\u0439\u0434\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 Axios, \u043c\u044b \u0431\u044b \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u0435 Status \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0437\u044f\u0442\u044c \u0438\u0437 error.response.status. \u0412\u043e\u0442 \u0442\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f \u0438\u0437-\u0437\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u0433\u043b\u0443\u043f\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438.\u00a0<\/p>\n<pre><code class=\"typescript\">catch (error) {    if (isApiError(error)) { \/\/ error: AxiosError         const isNetworkError = !error.response.status; \/\/ ?         if (!isNetworkError) {            this.data = undefined;        }    }    this.deps.softAppRestart(); }<\/code><\/pre>\n<p>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u043f\u0440\u0438\u0447\u0451\u043c \u0442\u0443\u0442 \u0442\u0435\u0441\u0442\u044b? \u0410 \u043f\u0440\u0438\u0442\u043e\u043c, \u0447\u0442\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u043d\u0430 \u044d\u0442\u043e \u0432\u0441\u0435 \u043f\u0438\u0441\u0430\u043b\u0438 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043a\u0435\u0439\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435. \u041d\u0438\u0436\u043d\u0438\u0439 \u0441\u043b\u043e\u0439 \u0432 \u0442\u0440\u043e\u0444\u0435\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0435\u0448\u0430\u0442\u044c \u0438 \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0435\u0441\u0442\u0430<\/h2>\n<p>\u0424\u0430\u0439\u043b \u0441 \u0442\u0435\u0441\u0442\u043e\u043c \u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u043b\u0438\u0431\u043e \u0440\u044f\u0434\u043e\u043c \u0441 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u0435\u043c, \u043b\u0438\u0431\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e Tests, \u043a\u0443\u0434\u0430 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0432\u0441\u0435 \u0442\u0435\u0441\u0442\u044b.<\/p>\n<p>\u0422\u0435\u0441\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2013 \u0431\u043b\u043e\u043a\u043e\u0432 Describe \u0438 It. \u0414\u0435\u0441\u043a\u0440\u0430\u0439\u0431\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438, \u043e\u043d\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043b\u0438\u0431\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u044b.\u00a0<\/p>\n<p>\u0410 \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 It \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u043c \u0442\u0435\u0441\u0442. \u042f \u043b\u044e\u0431\u043b\u044e \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0435\u0441\u043a\u0440\u0430\u0439\u0431\u044b \u0438 \u0438\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f refreshAccessToken \u0438\u0437 service\/Auth \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.\u00a0<\/p>\n<pre><code class=\"typescript\">describe('service\/Auth', () => {    describe('refreshAccessToken', () => {        it('\u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u043e\u0442\u0447\u0438\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u044e\u0437\u0435\u0440\u0430', () => {        \/\/ \u0422\u0435\u043b\u043e \u0442\u0435\u0441\u0442\u0430    });    }); }); <\/code><\/pre>\n<p>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 Triple A, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0435\u043b\u043e \u0442\u0435\u0441\u0442\u0430 \u0432 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438.\u00a0<\/p>\n<pre><code class=\"typescript\">it('\u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435 \u043e\u0442\u0447\u0438\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u044e\u0437\u0435\u0440\u0430', async () => {     const authService = new AuthService({...});  \/\/ \u043c\u043e\u043a \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430      await authService.refreshAccessToken();      expect(authService.data).toEqual(undefined); }); <\/code><\/pre>\n<ul>\n<li>\n<p>\u0412 Arrange \u043c\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u043e\u043a\u0438.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 Act \u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u0435\u0442\u043e\u0434.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 Expect \u0438\u043b\u0438 Assert \u2013 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e, \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c. <\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u043e\u0439 \u0442\u0435\u0441\u0442 \u043f\u0438\u0441\u0430\u0442\u044c<\/h2>\n<h3>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b<\/h3>\n<p>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 NodeJS. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c, \u0441\u043b\u0435\u0434\u0443\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 Test Driven Development, \u043a\u043e\u0433\u0434\u0430 \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u044b, \u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c \u043a\u043e\u0434.\u00a0<\/p>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043b\u0438\u0431\u043e \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u0447\u0442\u043e\u0431\u044b \u043e \u043d\u0438\u0445 \u043f\u043e\u0442\u043e\u043c \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c.<\/p>\n<p>\u042e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u043a\u0430\u043a \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u2014 \u043a\u0430\u043a\u0438\u043c\u0438-\u0442\u043e \u0432\u0435\u0442\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439.\u00a0<\/p>\n<p>\u041d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043c\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 25 \u0442\u044b\u0441\u044f\u0447 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432, \u0438 90% \u0438\u0437 \u043d\u0438\u0445 \u0431\u044b\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0434\u0438 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0448\u0451\u043b \u0447\u0435\u043a \u0432 GitHub \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0443. \u041f\u043e \u0441\u0443\u0442\u0438 \u0442\u0435\u0441\u0442\u044b \u0431\u044b\u043b\u0438 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435, \u043d\u0430 \u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0438\u0441\u0430\u043b\u043e\u0441\u044c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0431\u044b \u043d\u0438 \u0431\u044b\u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u0438 \u0438 \u043f\u0440\u043e\u0441\u0442\u044b \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b, \u043a\u0430\u043a \u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c, \u043e\u043d\u0438 \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u044e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u044e\u0442 \u043d\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b.<\/p>\n<p>\u0412<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-343011","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/343011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=343011"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/343011\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=343011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=343011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=343011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}