{"id":281281,"date":"2016-11-21T15:30:04","date_gmt":"2016-11-21T12:30:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=281281"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=281281","title":{"rendered":"\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 React"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/cs4.pikabu.ru\/images\/big_size_comm\/2015-05_4\/14321505443498.jpg\" alt=\"image\"\/><\/p>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 JS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0438 \u0441\u043e\u0436\u0430\u043b\u0435\u0442\u044c, \u0447\u0442\u043e \u043d\u0435 \u0441\u0442\u0430\u043b \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u043d\u044c\u0448\u0435. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043f\u0430\u0440\u0443 \u043b\u0435\u0442 \u0432\u0441\u0435 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 React, Angular \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Vue, \u044d\u0442\u043e \u0434\u0430\u043b\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0442\u043e\u043b\u0447\u043e\u043a \u0434\u043b\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043c\u0430\u043b\u044b \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 React. <a name=\"habracut\"><\/a><\/p>\n<p>  \u0417\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u0438\u043d\u043e\u0448\u0443 \u0438\u0437\u0432\u0438\u043d\u0435\u043d\u0438\u044f \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b. \u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0444\u0440\u0430\u0437, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u0438\u0432\u0435\u043b \u0431\u044b \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044e \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044f \u0443\u0442\u0438\u043b\u0438\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 JS-\u043f\u0440\u043e\u0435\u043a\u0442\u0435:<\/p>\n<ul>\n<li>Test Runner \u2013 \u0443\u0442\u0438\u043b\u0438\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0435\u0440\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0442\u0435\u0441\u0442\u0430\u043c\u0438, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0438\u0445 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0432 \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u2013 Mocha \u0438 Karma.<\/li>\n<li>Assertion library \u2013 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0432\u0430\u0448\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432. Chai \u0438 Expect \u2013 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0437 \u0434\u0430\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438.<\/li>\n<li>Mock library \u2013 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u00ab\u0437\u0430\u0433\u043b\u0443\u0448\u0435\u043a\u00bb (mock) \u043f\u0440\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438. \u0423\u0442\u0438\u043b\u0438\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u00ab\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430\u043c\u0438\u00bb, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u2013 Sinon.<\/li>\n<\/ul>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f React, \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043d\u0435 \u0441\u0442\u0430\u043d\u0443 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u00ab\u0442\u0440\u0430\u043d\u0441\u043f\u0430\u043b\u0438\u043d\u0433\u00bb ES6 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435: \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u00ab\u0425\u0430\u0431\u0440\u0435\u00bb. \u0412 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u043f\u0438\u0448\u0438\u0442\u0435, \u0438 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0447\u044c.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u043d\u0435 \u043f\u043e\u0439\u0434\u0435\u043c \u043f\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0443\u0442\u0438 \u00ab\u0441\u043b\u0435\u043f\u043e\u0433\u043e\u00bb \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u0435\u0434\u0430\u0432\u043d\u043e, \u0438 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u044c, \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u044b \u043b\u0438 \u043e\u043d\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f.<\/p>\n<h3>\u0410\u043a\u0442 1<\/h3>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u2013 \u044d\u0442\u043e TestRunner \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432. \u041a\u0430\u043a \u0438 \u043e\u0431\u0435\u0449\u0430\u043b, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043e\u0431\u0437\u043e\u0440\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Karma \u0438\u043b\u0438 Mocha. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442: Jest \u043e\u0442 Facebook. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Mocha, Jest \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435, \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435\u043d. \u042d\u0442\u043e \u043c\u043e\u043b\u043e\u0434\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0435 \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u0431\u044b\u043b \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u00ab\u043f\u0435\u0447\u0430\u043b\u0435\u043d\u00bb \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438: \u0432 \u043d\u0435\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u043c\u043d\u043e\u0433\u043e\u0435 \u0438\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u0431\u044b\u043b\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438\u043b\u0438 watch-\u0440\u0435\u0436\u0438\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0435\u0434\u0438\u043b \u0431\u044b \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0443\u0436\u0435 \u0438\u0437\u0440\u044f\u0434\u043d\u043e \u00ab\u043f\u043e\u0436\u0438\u0440\u043d\u0435\u043b\u00bb \u0438 \u043c\u043e\u0436\u0435\u0442 \u0442\u044f\u0433\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u043c\u043e\u043d\u0441\u0442\u0440\u0430\u043c\u0438, \u043a\u0430\u043a Mocha \u0438\u043b\u0438 Karma. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u0435\u0439\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0435\u0444\u0435\u043a\u0442\u044b, \u0447\u0435\u0433\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434. \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0443\u043c\u0435\u0435\u0442 Jest:<\/p>\n<ul>\n<li><b>\u0423\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442 \u0432 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/b><br \/>  \u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u043c\u0435\u043b\u043a\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u0442\u0430\u043a \u043a\u0430\u043a Jest \u0443\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435. \u041c\u0435\u043d\u044f \u043f\u043e\u0439\u043c\u0443\u0442 \u0442\u0435, \u043a\u0442\u043e \u0445\u043e\u0442\u044c \u0440\u0430\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u043a\u0443 Karma + Mocha + Sinon \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432,, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043c\u043d\u0435 \u043d\u0430 \u0441\u043b\u043e\u0432\u043e.\n<\/li>\n<li><b>\u0417\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u043e\u0432 \u0438 \u0432\u044b\u0432\u043e\u0434 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/b><br \/>  Jest \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0437\u0430\u0434\u0430\u0447.\n<\/li>\n<li><b>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442 assert-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439<\/b><br \/>  Jest \u0431\u0430\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Jasmine, \u0442\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 \u043d\u0435\u0439, \u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u0430\u043c \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f Jasmine, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043b\u044e\u0431\u0438\u043c\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.\n<\/li>\n<li><b>\u0423\u043c\u0435\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0435\u0441\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435, \u0443\u0441\u043a\u043e\u0440\u044f\u044f \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0442\u0435\u0441\u0442\u043e\u0432<\/b>\n<\/li>\n<li><b>\u0423\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0442\u0430\u0439\u043c\u0435\u0440\u044b<\/b>\n<\/li>\n<li><b>\u0423\u043c\u0435\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u00ab\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438\u00bb \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/b>\n<p>  \u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 killer-\u0444\u0438\u0447 Jest, \u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u0418\u043c\u0435\u043d\u043d\u043e \u0438\u0437-\u0437\u0430 \u043d\u0435\u0435 \u043c\u043d\u043e\u0433\u0438\u0435 \u0432 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Jest, \u0438 \u0432 \u043d\u043e\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u043e\u043d\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/li>\n<li><b>\u0423\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c watch-\u0440\u0435\u0436\u0438\u043c\u0435<\/b>\n<p>  Jest \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043a\u0440\u0443\u0442\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u0430\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u044b \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u043e \u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043c\u0438\u0442\u0430 \u0432 git, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u00ab\u043f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0448\u0438\u0435\u0441\u044f\u00bb \u0442\u0435\u0441\u0442\u044b \u0438\u043b\u0438 \u0436\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u00ab\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u00bb \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u0438\u043c\u0435\u043d\u0438.<\/li>\n<li><b>\u0423\u043c\u0435\u0435\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 (coverage)<\/b>\n<\/li>\n<li><b>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442 jsdom \u0438, \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, \u0443\u043c\u0435\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0431\u0435\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/b>\n<\/li>\n<li><b>\u0423\u043c\u0435\u0435\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043b\u0435\u043f\u043a\u043e\u0432 (snapshot)<\/b><\/li>\n<\/ul>\n<p>  \u042d\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435, \u0447\u0442\u043e \u0443\u043c\u0435\u0435\u0442 Jest. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0443\u0442\u0438\u043b\u0438\u0442\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 \u0438\u0445 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u2014 <a href=\"https:\/\/facebook.github.io\/jest\/\">facebook.github.io\/jest<\/a>. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, Jest \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0438\u043d\u0443\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043e\u0442\u043c\u0435\u0442\u0438\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f:<\/p>\n<ul>\n<li>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Jest \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u00ab\u0441\u043a\u0443\u0434\u043d\u0430\u044f\u00bb, \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043a\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0441\u0430\u043c\u043e\u043c\u0443, \u0440\u043e\u044f\u0441\u044c \u043d\u0430 github \u0438\u043b\u0438 \u043d\u0430 stack overflow.\n<\/li>\n<li>\u041d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445<br \/>  \u0414\u0430, \u0435\u0433\u043e \u043f\u043b\u044e\u0441 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0435\u0433\u043e \u0436\u0435 \u043c\u0438\u043d\u0443\u0441\u043e\u043c. \u041f\u0440\u0430\u0432\u0434\u0430, \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0439 \u043c\u0438\u043d\u0443\u0441, \u0442.\u043a. \u044f \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.\n<\/li>\n<li>\u041c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u0441\u0447\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430. \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0430\u044f Jest \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u043d\u043e\u0441\u0438\u0442 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f, \u0443\u0441\u043a\u043e\u0440\u044f\u044e\u0449\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u043e\u0432. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a \u043d\u0438\u043c \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043b\u0441\u044f Dmitrii Abramov, \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043b\u0430\u0441\u044c, \u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u0442\u044c <a href=\"https:\/\/twitter.com\/abramov_dmitrii\/status\/761434371781824512\/photo\/1?ref_src=twsrc%5Etfw\"> \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 <\/a>. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043f\u043e \u043c\u043e\u0438\u043c \u043b\u0438\u0447\u043d\u044b\u043c \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f\u043c, \u0442\u0435\u0441\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u0438\u0441\u0430\u043b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Karma + Mocha, \u0432\u0441\u0435 \u0436\u0435 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u043b\u0438 \u0438 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0439, \u0447\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Jest. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0440\u0435\u0431\u044f\u0442\u0430 \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u0442 \u0438 \u044d\u0442\u043e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0441\u0443\u043c\u043c\u0443 \u0434\u0432\u0443\u0445 \u0447\u0438\u0441\u0435\u043b:<\/p>\n<pre><code class=\"javascript\">function sum(a, b) {    return a + b; } <\/code><\/pre>\n<p>  \u0422\u0435\u0441\u0442 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \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:<\/p>\n<pre><code class=\"javascript\">describe(\u2018function tests\u2019, () =&gt; {    it(\u2018should return 3 for arguments 1 and 2\u2019, () =&gt; {       expect(sum(1, 2)).toBe(3);    }); }); <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0451 \u0432\u044b\u0437\u043e\u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">function initial() {    return 1; }  function sum(a, b) {    return initial() + a + b; } <\/code><\/pre>\n<p>  \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u0441\u0442 \u0434\u043b\u044f \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 initial \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0435\u0441\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 sum. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u00ab\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443\u00bb \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 initial, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u043e\u0435 \u043d\u0430\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0422\u0435\u0441\u0442 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">describe(\u2018function tests\u2019, () =&gt; {    it(\u2018should return 4 for arguments 1 and 2\u2019, () =&gt; {       initial = jest.fn((cb) =&gt; 1);       expect(sum(1, 2)).toBe(4);    }); });  <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f sum \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439, \u0430 \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<pre><code class=\"javascript\">function initial(salt) {    return 1; }  function sum(a, b) {    return new Promise((resolve, reject) =&gt; {       setTimeout(function(){           resolve({              value: initial(1) + a + b,              param1: a,              param2: b,           });       }, 100);    }); } <\/code><\/pre>\n<p>  \u0414\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0442\u0435\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u043b \u043d\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">describe(\u2018function tests\u2019, () =&gt; {    beforeAll(() =&gt; {       jest.useFakeTimers();    });     afterAll(() =&gt; {       jest.useRealTimers();    });     it(\u2018should return 4 for arguments 1 and 2\u2019, () =&gt; {       initial = jest.fn((cb) =&gt; 1);       const result = sum(1, 2);        result.then((result) =&gt; {          expect(result).not.toEqual({             value: 3,             param1: 1,             param2: 2,          });           expect(initial).toHaveBeCalledWith(1);       });        jest.runTimersToTime(100);        return result;    }) }); <\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0442\u0435\u0441\u0442\u0435 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Jest:<\/p>\n<ul>\n<li>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c fake-\u0442\u0430\u0439\u043c\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u0441\u0430\u043c\u0438 \u043c\u043e\u0433\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c<\/li>\n<li>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/li>\n<li>\u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0440\u0438\u0446\u0430\u043d\u0438\u044f \u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0442\u0435\u0441\u0442\u043e\u0432<\/li>\n<li>\u0412-\u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0445, \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u0448\u0430 mock-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0438 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438<\/li>\n<\/ul>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0436\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0438 \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043a\u043b\u0438\u043a \u043f\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c\u0443 \u0442\u0435\u043a\u0441\u0442\u0443:<\/p>\n<pre><code class=\"javascript\">export default class Wellcome extends React.Component {    onClick() {       this.props.someFunction(this.props.username);    }     render() {       return (          &lt;div&gt;             &lt;span onClick={this.onClick.bind(this)}&gt;Wellcome {this.props.username}&lt;\/span&gt;          &lt;\/div&gt;       );    } } <\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0433\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">import React from 'react'; import TestUtils from 'react-addons-test-utils' import Wellcome from '.\/welcome.jsx';  describe(\u2018&lt;Welcome \/&gt;\u2019, () =&gt; {    it(\u2018Renders wellcome message to user\u2019, () =&gt; {       const onClickSpy = jest.fn();       const username = 'Alice';        const component = ReactTestUtils.renderIntoDocument(          &lt;Wellcome username= {username} someFunction={onClickSpy} \/&gt;       );       const span = TestUtils.findRenderedDOMComponentWithTag(          component, 'span'       );        TestUtils.Simulate.click(span);        expect(span.textContent).toBe(\u2018Wellcome Alice\u2019);       expect(onClickSpy).toBeCalledWith(username);    }); }); <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c React Test Utils \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u043e\u0438\u0441\u043a\u0430 Dom-\u0443\u0437\u043b\u043e\u0432. \u0412 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c, \u0442\u0435\u0441\u0442 \u043d\u0438\u0447\u0435\u043c \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430 \u043d\u0430 Jest.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Jest \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u043e\u0432, \u043d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u043e\u0439\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0435\u0449\u0435 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0435\u0433\u043e \u0444\u0438\u0447\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u2013 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043b\u0435\u043f\u043a\u043e\u0432 (snapshot). Snapshot-\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u2013 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043b\u0435\u043f\u043e\u043a React-\u0434\u0435\u0440\u0435\u0432\u0430 \u0432 \u0432\u0438\u0434\u0435 JSON-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0445 \u0442\u0435\u0441\u0442\u0430 \u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439.<\/p>\n<p>  \u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0442\u0435\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u0435\u043f\u043e\u043a, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0435 \u0435\u0433\u043e \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442\u0435 \u0435\u0433\u043e \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043a\u043e\u0434\u0430. \u0418 \u2013 \u0432\u0443\u0430\u043b\u044f \u2013 \u0432\u0441\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0438 \u0442\u0435\u0441\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0448 \u0441\u043b\u0435\u043f\u043e\u043a \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n<p>  \u042d\u0442\u0430 \u0444\u0438\u0447\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432 Jest \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e, \u043b\u0438\u0447\u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u044b\u0437\u0432\u0430\u043b\u043e \u0441\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0430. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u044f \u043d\u0430\u0448\u0435\u043b \u0435\u0439 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u2013 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0435\u0441\u0442\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u043b\u0438 \u043f\u0440\u043e\u0449\u0435 (\u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043d\u0443\u0436\u043d\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443), \u043c\u043d\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u043d\u0430\u0434\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0432 \u0442\u0435\u0441\u0442\u0430\u0445. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u044f \u0443\u0432\u0438\u0434\u0435\u043b \u0438 \u043c\u0438\u043d\u0443\u0441: \u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u2013 \u044d\u0442\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043c\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043b\u0435\u043f\u043a\u043e\u0432, \u043f\u043e \u0441\u0443\u0442\u0438, \u0434\u0430\u0435\u0442 \u043c\u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u00ab\u0441\u0445\u0430\u043b\u044f\u0432\u0438\u0442\u044c\u00bb \u0438, \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u044f\u0441\u044c \u043e\u0431 assert-\u0430\u0445, \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0434\u0432\u0430 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043b\u0438\u0448\u0430\u0435\u0442 \u043c\u0435\u043d\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e TDD, \u043a\u043e\u0433\u0434\u0430 \u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0438\u0448\u0443 \u0442\u0435\u0441\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0438\u0448\u0443 \u0441\u0430\u043c \u043a\u043e\u0434. \u041d\u043e \u044f \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u043d\u0430\u0439\u0434\u0435\u0442 \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a\u043e\u0432.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">import React from 'react'; import renderer from 'react-test-renderer'; import Wellcome from '.\/welcome.jsx';  describe('&lt;Welcome \/&gt;', () =&gt; {    it('Renders wellcome message to user', () =&gt; {       const onClickSpy = jest.fn();       const username = 'Alice';        const component = renderer.create(          &lt;Wellcome username={username} someFunction={onClickSpy} \/&gt;       );       const json = component.toJSON();        expect(json).toMatchSnapshot();       expect(onClickSpy).toHaveBeCalledWith(username);    }); }); <\/code><\/pre>\n<p>  \u041e\u0442\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043d\u0430\u0448 \u0442\u0435\u0441\u0442 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0441\u044f \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e (\u043e\u043d \u0443 \u043d\u0430\u0441 \u0438 \u0442\u0430\u043a \u0431\u044b\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0439). \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u044a\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0435\u0441\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448 \u0442\u0435\u0441\u0442 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/eVK17NdsuiYX0KBmlyIK94RX61pQyaFquOffzs_3dFNSZ-AXME3LyJkc5gK8cWjuJxqpHWe1w9dbpag=w1440-h750\" alt=\"image\"\/><\/p>\n<p>  \u0418\u0442\u0430\u043a, jest \u0441\u043e\u0437\u0434\u0430\u043b \u0434\u043b\u044f \u043d\u0430\u0441 \u0441\u043b\u0435\u043f\u043e\u043a. \u0412\u043e\u0442 \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043b\u0435\u043f\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">exports[&lt;Welcome \/&gt; Renders wellcome message to user 1] = `    &lt;div&gt;       &lt;span          onClick={[Function]}&gt;             Wellcome             Alice       &lt;\/span&gt;    &lt;\/div&gt; `; <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u043f\u043e\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 html-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0443\u0434\u043e\u0431\u0435\u043d \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u00ab\u043d\u0430 \u0433\u043b\u0430\u0437\u00bb.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u043c\u0438\u043d\u0443\u0441\u043e\u0432, \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043b\u0435\u043f\u043a\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 HOC-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, redux-form), \u0441\u043b\u0435\u043f\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0432\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043e\u0442 redux-form. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0435\u0433\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 redux-form. <\/p>\n<p>  \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 HOC-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443 \u0432\u0430\u0441 \u043e\u0434\u0438\u043d. \u041d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043c\u0435\u043d\u044f \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0442\u0440\u0438: \u043e\u0434\u0438\u043d \u2013 \u043e\u0442 react-redux, \u0432\u0442\u043e\u0440\u043e\u0439 \u2013 \u043e\u0442 redux-from \u0438 \u0442\u0440\u0435\u0442\u0438\u0439 \u2013 \u043e\u0442 react-intl. \u0421 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c, \u043a\u0441\u0442\u0430\u0442\u0438, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0440\u0443\u0434\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043b\u043e\u0436\u0438\u0442\u044c \u00ab\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430\u043c\u0438\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0447\u0435\u0441\u0442\u043d\u044b\u0439 API \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u2013 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c <a href=\"https:\/\/github.com\/yahoo\/react-intl\/wiki\/Testing-with-React-Intl#jest\">\u0442\u0443\u0442<\/a>.<\/p>\n<p>  \u041f\u043e\u0434\u0432\u0435\u0434\u0435\u043c \u0438\u0442\u043e\u0433. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u043d\u0430\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0435 \u0440\u0430\u0437 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b.<\/p>\n<h3>\u0410\u043a\u0442 2<\/h3>\n<p>  \u0412\u043f\u0435\u0440\u0432\u044b\u0435 \u0437\u0430\u0434\u0443\u043c\u0430\u0432\u0448\u0438\u0441\u044c \u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React \u0438 \u043d\u0430\u0447\u0430\u0432 \u0438\u0441\u043a\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0432\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0430\u0442\u043a\u043d\u0435\u0442\u0435\u0441\u044c \u043d\u0430 \u043f\u0430\u043a\u0435\u0442 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442 React Test Utilites. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 Facebook \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 DOM<\/li>\n<li>\u0421\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u00abMock-\u0438\u043d\u0433\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u041f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 DOM<\/li>\n<li>\u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0439 (shallow) \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<\/ul>\n<p>  \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043d\u0430\u0431\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0448\u0438\u0440\u043e\u043a\u0438\u0439, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0431\u044b \u043d\u0430\u0448 \u0442\u0435\u0441\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c React Test Utilites, \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435:<\/p>\n<pre><code class=\"javascript\">import React from 'react'; import TestUtils from 'react-addons-test-utils' import Wellcome from '.\/welcome.jsx';  describe(\u2018&lt;Welcome \/&gt;\u2019, () =&gt; {    it(\u2018Renders wellcome message to user\u2019, () =&gt; {       const onClickSpy = jest.fn();       const username = 'Alice';        const component = ReactTestUtils.renderIntoDocument(          &lt;Wellcome username= {username} someFunction={onClickSpy} \/&gt;       );       const span = TestUtils.findRenderedDOMComponentWithTag(          component, 'span'       );        TestUtils.Simulate.click(span);        expect(span.textContent).toBe(\u2018Wellcome Alice\u2019);       expect(onClickSpy).toBeCalledWith(username);    }); }); <\/code><\/pre>\n<p>  \u041d\u043e \u043c\u044b \u043d\u0435 \u043f\u043e\u0439\u0434\u0435\u043c \u00ab\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043f\u0443\u0442\u0435\u043c\u00bb \u0438 \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 React Test Utilites \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0443 \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0441\u043a\u0443\u0434\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u0439, \u043d\u043e\u0432\u0438\u0447\u043a\u0443 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0432 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0441\u0430\u043c\u0430\u044f \u00ab\u0432\u043a\u0443\u0441\u043d\u0430\u044f\u00bb \u0434\u043b\u044f \u043d\u0430\u0441 \u0444\u0438\u0447\u0430 shallow \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0434\u0438\u0438 \u0438 \u043d\u0438\u043a\u0430\u043a \u0438\u0437 \u043d\u0435\u0435 \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 Enzyme, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u044b\u043b\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 Arbnb \u0438 \u0443\u0436\u0435 \u0441\u0442\u0430\u043b\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u043f\u0440\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e \u0441\u0443\u0442\u0438, Enzyme \u2013 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u043d\u0430\u0434 \u0442\u0440\u0435\u043c\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438: React TestUtils, JSDOM \u0438 CheerIO:<\/p>\n<ul>\n<li>TestUtils \u2013 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f Facebook \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>JSDOM \u2013 \u044d\u0442\u043e JS-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f DOM. \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u044d\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440<\/li>\n<li>CheerIO \u2013 \u0430\u043d\u0430\u043b\u043e\u0433 Jquery \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/li>\n<\/ul>\n<p>  \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0432 \u0432\u0441\u0451 \u0432\u043c\u0435\u0441\u0442\u0435 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0432, Enzyme \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438, \u043a\u0440\u043e\u043c\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 Test Utilites, \u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c:<\/p>\n<ul>\n<li>\u0422\u0440\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: shallow, mount \u0438 render<\/li>\n<li>Jquery-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u043e\u0438\u0441\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u041f\u043e\u0438\u0441\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0438\u043c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0434\u0430\u043b\u0438 \u044d\u0442\u043e \u0438\u043c\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 DisplayName)<\/li>\n<li>\u041f\u043e\u0438\u0441\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 (props)<\/li>\n<\/ul>\n<p>  \u0414\u0430, Enzyme \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 TestRunner, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u00ab\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438\u00bb \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c Jest.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0440\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u044d\u0442\u043e \u0434\u0430\u0435\u0442. \u0418\u0442\u0430\u043a, \u0432 Enzyme \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u0441\u0442\u0438\u043b\u0435 Jquery:<\/p>\n<ul>\n<li>\u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0439 (shallow) \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u2013 Enzyme \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>Full Dom Rendering \u2013 \u043f\u043e\u043b\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u0441\u0435\u0445 \u0435\u0433\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>Static \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u2013 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 HTML \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<\/ul>\n<p>  \u042f \u043d\u0435 \u0441\u0442\u0430\u043d\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c Enzyme, \u0441\u043a\u0430\u0436\u0443 \u043b\u0438\u0448\u044c, \u0447\u0442\u043e \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435:<\/p>\n<ul>\n<li>\u041d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043b\u0438 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/li>\n<li>\u0421\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 JSX-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439<\/li>\n<li>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<li>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<li>\u042d\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/li>\n<\/ul>\n<p>  \u042d\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Enzyme. \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430 \u043c\u044b \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u043b\u0438\u0447\u0438\u044f\u0445 \u043c\u0435\u0436\u0434\u0443 \u0442\u0440\u0435\u043c\u044f \u0432\u0438\u0434\u0430\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. <\/p>\n<p>  \u0427\u0442\u043e \u0436\u0435 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c shallow-\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u0432 \u0447\u0435\u043c \u0435\u0433\u043e \u043f\u0440\u0435\u043b\u0435\u0441\u0442\u0438? \u0410 \u0434\u0430\u0435\u0442 \u043e\u043d \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438 \u043d\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u041d\u0430\u043c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435\u0432\u0430\u0436\u043d\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0432\u044b\u0434\u0430\u0432\u0430\u0435\u043c\u0430\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438: \u044d\u0442\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u043d\u0430\u043c \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041d\u0435\u0442, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432 \u0442\u0435\u0441\u0442\u0430\u0445, \u0447\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043b\u044e\u0441 \u0442\u0430\u043a\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0432\u044b\u0448\u0435, \u0447\u0435\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Full Dom-\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f DOM. \u041d\u043e \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0443\u0441\u0442\u044c \u043a\u0440\u043e\u043c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043d\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Wellcome \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Home \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<pre><code class=\"javascript\">import React, { PropTypes, Component } from 'react' import Wellcome from '.\/Wellcome'  class Home extends Component {    onChangeUsername(e) {       this.props.changeUsername(e.target.value);    }     render() {       return (          &lt;section className='home'&gt;             &lt;h1&gt;Home&lt;\/h1&gt;             &lt;Wellcome username={this.props.username} \/&gt;             &lt;input                type=&quot;text&quot;                name=&quot;username&quot;                value={this.props.username}                onChange={this.onChangeUsername.bind(this)}             \/&gt;          &lt;\/section&gt;       )    } }  Home.propTypes = {    changeUsername: PropTypes.func.isRequired }  export default Home <\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0435\u0441\u0442 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { shallow } from 'enzyme' import Home from '.\/Home' import Wellcome from '.\/Wellcome';  describe('&lt;Home \/&gt;', () =&gt; {    it('should render self and Wellcome', () =&gt; {       const renderedComponent = shallow(          &lt;Home username={'Alice'} changeUsername={jest.fn()} \/&gt;       );        \/\/ \u0412\u044b\u0432\u0435\u0434\u0435\u043c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442       console.log(renderedComponent.debug());        expect(renderedComponent.find('section').hasClass('home')).toBe(true);       expect(renderedComponent.find('h1').text()).toBe('Home');       expect(renderedComponent.find('input').length).toBe(1);        expect(renderedComponent.find(Wellcome).props().username).toBeDefined();       expect(renderedComponent.contains(&lt;Wellcome username={'Alice'} \/&gt;)).toBe(true);    });     it('should call changeUsername on input changes', () =&gt; {       const changeUsernameSpy = jest.fn();        const renderedComponent = shallow(          &lt;Home username={'Alice'} changeUsername={changeUsernameSpy}       );        renderedComponent.find('input').simulate('change', { target: { value: 'Test' } });       expect(changeUsernameSpy).toBeCalledWith('Test');    }); }); <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0432 Enzyme \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 shallow-\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 debug \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434.<\/p>\n<pre><code class=\"javascript\">&lt;section className=&quot;home&quot;&gt;    &lt;h1&gt;       Home    &lt;\/h1&gt;    &lt;Wellcome username=&quot;Alice&quot; \/&gt;    &lt;input type=&quot;text&quot; name=&quot;username&quot; value=&quot;Alice&quot; onChange={[Function]} \/&gt; &lt;\/section&gt; <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, Enzyme \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u043e \u043d\u0435 \u0441\u0442\u0430\u043b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043e\u043d \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043d\u0438\u0445 \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0447\u0435\u0440\u0435\u0437 \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 mount. \u0410 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043d\u0430\u043c, \u0435\u0441\u043b\u0438:<\/p>\n<ul>\n<li>\u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 Lifecycle-\u043c\u0435\u0442\u043e\u0434\u0430\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u0438\u0445, \u043a\u0430\u043a componentWillMount \u0438 componentDidMount. \u041c\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043d\u043e \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431; <\/li>\n<li>\u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 DOM. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 JSDOM \u0438 \u0432\u0441\u0451 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 DOM \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c; <\/li>\n<li>\u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u2013 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f ToDo \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 ToDo \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/li>\n<\/ul>\n<p>  \u0412 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c mount \u0432\u043c\u0435\u0441\u0442\u043e shallow, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u043c\u0443 \u0443\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b DOM \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Jsdom. \u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433:<\/p>\n<pre><code class=\"javascript\">import React, { PropTypes, Component } from 'react' import Wellcome from '.\/Wellcome'  class Home extends Component {    componentWillMount() {       this.props.fetchUsername();    }     onChangeUsername(e) {       this.props.changeUsername(e.target.value);    }     render() {       return (          &lt;section className='home'&gt;             &lt;h1&gt;Home&lt;\/h1&gt;             &lt;Wellcome username={this.props.username} \/&gt;             &lt;input                type=&quot;text&quot;                name=&quot;username&quot;                value={this.props.username}                onChange={this.onChangeUsername.bind(this)}             \/&gt;          &lt;\/section&gt;       );    } }  Home.propTypes = {    changeUsername: PropTypes.func.isRequired,    fetchUsername: PropTypes.func, };  export default Home; <\/code><\/pre>\n<p>  \u0418 \u043d\u0430\u0448 \u0442\u0435\u0441\u0442:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { mount } from 'enzyme' import Home from '.\/Home' import Wellcome from '.\/Wellcome';  describe('&lt;Home \/&gt;', () =&gt; {    it('should fetch username on mount', () =&gt; {       const fetchUsernameSpy = jest.fn(cb =&gt; 'Ali\u0441e');       const renderedComponent = mount(          &lt;Home             username={'Ali\u0441e'}             changeUsername={jest.fn()}          \/&gt;       );        \/\/ \u0412\u044b\u0432\u0435\u0434\u0435\u043c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043e\u043d\u0435\u043d\u0442       console.log(renderedComponent.debug());        expect(fetchUsernameSpy).toBeCalled();    }) }) <\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u0432\u0435\u0440\u043d\u0443\u043b \u0432\u044b\u0437\u043e\u0432 debug:<\/p>\n<pre><code class=\"javascript\">&lt;Home username=&quot;Alise&quot; changeUsername={[Function]} fetchUsername={[Function]}&gt;    &lt;section className=&quot;home&quot;&gt;       &lt;h1&gt;          Home       &lt;\/h1&gt;       &lt;Wellcome username=&quot;Ali\u0441e&quot;&gt;          &lt;div&gt;             &lt;span onClick={[Function]}&gt;                Wellcome                Alise             &lt;\/span&gt;          &lt;\/div&gt;       &lt;\/Wellcome&gt;       &lt;input type=&quot;text&quot; name=&quot;username&quot; value=&quot;Ali\u0441e&quot; onChange={[Function]} \/&gt;    &lt;\/section&gt; &lt;\/Home&gt; <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 Enzyme \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u0435\u0449\u0435 \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b LifeCycle-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u041d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0442\u0438\u043f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0441\u0442\u044c \u0432 Enzyme: static-\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433. \u041e\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 HTML-\u0441\u0442\u0440\u043e\u043a\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Cherio, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0442\u043e\u0442, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0442\u0434\u0430\u044e\u0442 shallow \u0438 mount-\u043c\u0435\u0442\u043e\u0434\u044b. \u0422\u0435\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u043d\u043e\u0439 \u0432\u044b\u0437\u043e\u0432\u0430 mount \u043d\u0430 render, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e, \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043c\u0438. <\/p>\n<p>  \u042f \u0432\u0438\u0436\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0443, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e HTML-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u0430\u0436\u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0435\u0441\u0442\u0430. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u0441\u0442 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0414\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0442\u0438\u043f\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b.<\/p>\n<h3>\u0410\u043d\u0442\u0440\u0430\u043a\u0442<\/h3>\n<p>  \u0418\u0442\u0430\u043a, \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u00ab\u043f\u043e\u0449\u0443\u043f\u0430\u043b\u0438\u00bb \u043d\u043e\u0432\u044b\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u00ab\u043a\u043e\u043c\u0431\u0430\u0439\u043d\u00bb \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430, \u0442\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0435 redux, redux-saga, react-intl, \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043e\u0448\u043a\u0438 \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u044e\u0449\u0438\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. <\/p>\n<p>  \u0417\u0435\u043b\u0435\u043d\u044b\u0445 \u0432\u0430\u043c \u0442\u0435\u0441\u0442\u043e\u0432 \u0438 \u043f\u043e\u043f\u0443\u0442\u043d\u043e\u0433\u043e 100%-\u0433\u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f!<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:\/\/habrahabr.ru\/post\/315760\/\"> https:\/\/habrahabr.ru\/post\/315760\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/cs4.pikabu.ru\/images\/big_size_comm\/2015-05_4\/14321505443498.jpg\" alt=\"image\"\/><\/p>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 JS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0438 \u0441\u043e\u0436\u0430\u043b\u0435\u0442\u044c, \u0447\u0442\u043e \u043d\u0435 \u0441\u0442\u0430\u043b \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u043d\u044c\u0448\u0435. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043f\u0430\u0440\u0443 \u043b\u0435\u0442 \u0432\u0441\u0435 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 React, Angular \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Vue, \u044d\u0442\u043e \u0434\u0430\u043b\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0442\u043e\u043b\u0447\u043e\u043a \u0434\u043b\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043c\u0430\u043b\u044b \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 React. <\/p>\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-281281","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281281","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=281281"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281281\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=281281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=281281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=281281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}