{"id":1499,"date":"2020-09-07T15:06:06","date_gmt":"2020-09-07T15:06:06","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1499"},"modified":"2020-09-07T15:06:06","modified_gmt":"2020-09-07T15:06:06","slug":"%d0%bf%d0%be%d0%b2%d0%bd%d0%b8%d0%b9-%d0%bf%d0%be%d1%81%d1%96%d0%b1%d0%bd%d0%b8%d0%ba-%d0%b7-%d1%82%d0%b5%d1%81%d1%82%d1%83%d0%b2%d0%b0%d0%bd%d0%bd%d1%8f-%d0%b7%d0%b0%d1%81%d1%82%d0%be%d1%81%d1%83","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1499","title":{"rendered":"\u041f\u043e\u0432\u043d\u0438\u0439 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a \u0437 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432 \u043d\u0430 React"},"content":{"rendered":"\n<p>\u0421\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0437\u0430\u043f\u0438\u0442\u0430\u0442\u0438 \u0443 \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432 \u043f\u0440\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0456 \u043f\u0435\u0440\u0435\u0432\u0430\u0433\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f. \u0406\u043c\u043e\u0432\u0456\u0440\u043d\u043e, \u0432\u0438 \u043f\u043e\u0447\u0443\u0454\u0442\u0435 \u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0456 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0438:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul><li>\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u0430\u0454 \u0432\u043f\u0435\u0432\u043d\u0435\u043d\u0456\u0441\u0442\u044c \u0432 \u0442\u043e\u043c\u0443, \u0449\u043e \u043d\u0430\u0432\u0456\u0442\u044c \u043e\u0434\u0438\u043d \u0437\u043c\u0456\u043d\u0435\u043d\u0438\u0439 \u0440\u044f\u0434\u043e\u043a \u043a\u043e\u0434\u0443 \u043d\u0435 \u0437\u043b\u0430\u043c\u0430\u0454 \u0432\u0435\u0441\u044c \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a;<\/li><li>\u0437\u0430\u043c\u0456\u043d\u044e\u0454 \u0440\u0443\u0447\u043d\u0435 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f, \u044f\u043a\u0435 \u0437 \u0447\u0430\u0441\u043e\u043c \u0441\u0442\u0430\u0454 \u043e\u0431\u0442\u044f\u0436\u043b\u0438\u0432\u0438\u043c;<\/li><li>\u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443\u0432\u0430\u0442\u0438 \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0456 \u0432\u0438\u043f\u0430\u0434\u043a\u0438;<\/li><li>\u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0438-\u043d\u043e\u0432\u0430\u0447\u043a\u0438, \u044f\u043a\u0456 \u043c\u0430\u044e\u0442\u044c \u0434\u043e\u0441\u0432\u0456\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f \u0442\u0435\u0441\u0442\u0456\u0432, \u0447\u0430\u0441\u0442\u043e&nbsp;<a href=\"https:\/\/jkettmann.com\/number-1-tip-for-outstanding-portfolio-projects\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u043e\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c \u043f\u0435\u0440\u0435\u0432\u0430\u0433\u0443<\/a>&nbsp;\u043d\u0430\u0434 \u0456\u043d\u0448\u0438\u043c\u0438 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430\u043c\u0438.<\/li><\/ul>\n\n\n\n<p>\u0414\u043b\u044f \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432-\u043d\u043e\u0432\u0430\u0447\u043a\u0456\u0432 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u043e\u0436\u0435 \u0437\u0434\u0430\u0442\u0438\u0441\u044c \u043d\u0435\u043b\u0435\u0433\u043a\u043e\u044e \u0441\u043f\u0440\u0430\u0432\u043e\u044e. \u0426\u0435 \u0449\u043e\u0441\u044c \u0441\u0445\u043e\u0436\u0435 \u043d\u0430 \u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0443 \u0432 \u0437\u043e\u0432\u0441\u0456\u043c \u043d\u043e\u0432\u043e\u043c\u0443 \u0441\u0435\u0440\u0435\u0434\u043e\u0432\u0438\u0449\u0456. \u0412\u0438 \u0432\u0436\u0435 \u0437\u0432\u0438\u043a\u043b\u0438 \u0434\u043e \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0456\u0432 \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456, \u0430 \u0442\u0443\u0442 \u0432\u043e\u043d\u0438 \u0437\u043e\u0432\u0441\u0456\u043c \u0456\u043d\u0448\u0456. \u0414\u043e \u0442\u043e\u0433\u043e \u0436 \u0432\u0438, \u043c\u043e\u0436\u0435, \u0439 \u043d\u0435 \u0437\u043d\u0430\u0454\u0442\u0435, \u0449\u043e \u0441\u0430\u043c\u0435 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438.<\/p>\n\n\n\n<p>\u041d\u0430\u0441\u043f\u0440\u0430\u0432\u0434\u0456 \u0446\u0435 \u043d\u0435 \u0442\u0430\u043a \u0432\u0436\u0435 \u0439 \u0441\u043a\u043b\u0430\u0434\u043d\u043e. \u0417 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0438\u043c \u043f\u0456\u0434\u0445\u043e\u0434\u043e\u043c \u0432\u0438 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0447\u043d\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438, \u043d\u0430\u0432\u0456\u0442\u044c \u0431\u0435\u0437 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u0433\u043e \u0434\u043e\u0441\u0432\u0456\u0434\u0443. \u0421\u043f\u043e\u0434\u0456\u0432\u0430\u0454\u043c\u043e\u0441\u044c, \u0432 \u0446\u044c\u043e\u043c\u0443 \u0432\u0430\u043c \u0442\u0430\u043a\u043e\u0436 \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435 \u0446\u0435\u0439 \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b. \u0414\u043b\u044f \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0443 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u0438\u0439 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0456 \u043f\u043e\u0442\u0435\u0441\u0442\u0443\u0454\u043c\u043e \u0439\u043e\u0433\u043e \u0437 \u0443\u0441\u0456\u0445 \u0431\u043e\u043a\u0456\u0432. \u041e\u0431\u0433\u043e\u0432\u043e\u0440\u0438\u043c\u043e, \u0449\u043e \u0442\u0430 \u0447\u043e\u043c\u0443 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u0432 \u043d\u044c\u043e\u043c\u0443 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438, \u043e\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u0440\u0456\u0437\u043d\u0456 \u0441\u043f\u043e\u0441\u043e\u0431\u0438, \u044f\u043a\u0456 \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0443\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438 \u0432\u043f\u0435\u0432\u043d\u0435\u043d\u0456\u0448\u0435.<\/p>\n\n\n\n<p><em>\u0414\u043b\u044f \u0442\u0438\u0445, \u0445\u0442\u043e \u043d\u0435 \u043b\u044e\u0431\u0438\u0442\u044c \u0434\u043e\u0432\u0433\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b\u0456\u0432, \u0430\u0432\u0442\u043e\u0440 \u0441\u0442\u0430\u0442\u0442\u0456 \u043f\u0456\u0434\u0433\u043e\u0442\u0443\u0432\u0430\u0432&nbsp;<a href=\"https:\/\/jkettmann.com\/beginners-guide-to-testing-react\/#post-subscribe\" target=\"_blank\" rel=\"noreferrer noopener\">\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443<\/a>&nbsp;\u0437 \u043f\u043e\u0440\u0430\u0434\u0430\u043c\u0438 \u043f\u0440\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0442\u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u0440\u0438\u0441\u043d\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u0456\u0432.<\/em><\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0448 \u043d\u0456\u0436 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c\u043e \u043f\u0440\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432 \u043d\u0430 React \u0437\u0430\u0433\u0430\u043b\u043e\u043c.<\/p>\n\n\n\n<h2 id=\"\u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438-\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f-react-\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432\"><strong>\u041f\u0440\u0438\u043d\u0446\u0438\u043f\u0438 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f React-\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432<\/strong><\/h2>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u043a\u043e\u043b\u0438\u0441\u044c \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043b\u0438 \u043d\u0430\u0434 \u0432\u0435\u043b\u0438\u043a\u0438\u043c \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u043e\u043c, \u0432\u0430\u043c, \u043c\u0430\u0431\u0443\u0442\u044c, \u0431\u0443\u043b\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e \u0447\u0456\u043f\u0430\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u043d\u0438, \u044f\u043a\u0456 \u0441\u0442\u043e\u0441\u0443\u044e\u0442\u044c\u0441\u044f \u0432\u0430\u0436\u043b\u0438\u0432\u0438\u0445 \u0444\u0456\u0447. \u041a\u043e\u0436\u043d\u0430 \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u0430 \u0437\u043c\u0456\u043d\u0430 \u043c\u043e\u0433\u043b\u0430 \u043f\u0440\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0434\u043e \u0431\u0430\u0433\u0456\u0432. \u0417\u043d\u0438\u0437\u0438\u0442\u0438 \u0440\u0438\u0437\u0438\u043a \u0442\u0430\u043a\u0438\u0445 \u043d\u0435\u043f\u0440\u0438\u0454\u043c\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u044e\u0442\u044c \u0442\u0435\u0441\u0442\u0438.<\/p>\n\n\n\n<p><strong>\u041c\u0435\u0442\u0430 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u2014 \u043f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0442\u0438\u0441\u044f, \u0449\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043f\u0440\u0430\u0446\u044e\u0454 \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u043e.<\/strong>&nbsp;\u042f\u043a\u0449\u043e \u0432\u0441\u0456 \u0432\u0430\u0436\u043b\u0438\u0432\u0456 \u0447\u0430\u0441\u0442\u0438\u043d\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b\u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 \u043c\u0430\u044e\u0442\u044c \u0442\u0435\u0441\u0442\u0438, \u0432\u0438 \u043e\u0434\u0440\u0430\u0437\u0443 \u0434\u0456\u0437\u043d\u0430\u0454\u0442\u0435\u0441\u044c, \u043a\u043e\u043b\u0438 \u0449\u043e\u0441\u044c \u0437\u043b\u0430\u043c\u0430\u043b\u043e\u0441\u044c.<\/p>\n\n\n\n<p>\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u0438\u043c\u0438 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432 \u043d\u0430 React \u0454 Jest \u0443 \u043f\u043e\u0454\u0434\u043d\u0430\u043d\u043d\u0456 \u0437 @testing-library\/react (\u0430\u0431\u043e Testing Library). \u0406\u0441\u043d\u0443\u044e\u0442\u044c \u0456 \u0457\u0445\u043d\u0456 \u0430\u043d\u0430\u043b\u043e\u0433\u0438. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0430\u043d\u0430\u043b\u043e\u0433\u0430\u043c\u0438 Jest \u0454 Mocha, Jasmine \u0442\u0430 AVA. Testing Library \u2014 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0434\u043b\u044f Enzyme, \u044f\u043a\u0443 \u0431\u0430\u0433\u0430\u0442\u043e \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432 \u0434\u043e\u0441\u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c.<\/p>\n\n\n\n<p>Testing Library \u0440\u043e\u0437\u0433\u043b\u044f\u0434\u0430\u0454 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 \u0437 \u043f\u043e\u0433\u043b\u044f\u0434\u0443 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430. \u041d\u0430\u0441\u043b\u0456\u0434\u043a\u043e\u043c \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0456\u0434\u0445\u043e\u0434\u0443 \u0441\u0442\u0430\u0454 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f&nbsp;<a href=\"https:\/\/kentcdodds.com\/blog\/write-tests\" target=\"_blank\" rel=\"noreferrer noopener\">\u0456\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0456\u0439\u043d\u0438\u0445 \u0442\u0435\u0441\u0442\u0456\u0432<\/a>, \u0434\u0435 \u043a\u0456\u043b\u044c\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0438 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044e\u0442\u044c \u043c\u0456\u0436 \u0441\u043e\u0431\u043e\u044e.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0443 \u0443\u044f\u0432\u0456\u043c\u043e \u043a\u043d\u043e\u043f\u043a\u0443. \u0417 Testing Library \u0432\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0442\u0438, \u0447\u0438 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u043b\u0430\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>onClick<\/code>&nbsp;\u043f\u0440\u0438 \u043a\u043b\u0456\u0446\u0456 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0406\u043c\u043e\u0432\u0456\u0440\u043d\u0456\u0448\u0435, \u0449\u043e \u0432\u0438 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u0435, \u0447\u0438 \u043f\u0440\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043b\u0456\u043a \u043d\u0430 \u043f\u0435\u0432\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043e \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044c\u043e\u0433\u043e \u0435\u0444\u0435\u043a\u0442\u0443. \u0421\u043a\u0430\u0436\u0456\u043c\u043e, \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u0438\u0434\u0430\u043b\u0435\u043d\u043d\u044f \u0432\u0456\u0434\u043a\u0440\u0438\u0432\u0430\u0454 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u0435 \u0432\u0456\u043a\u043d\u043e.<\/p>\n\n\n\n<h2 id=\"\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a-\u0434\u043b\u044f-\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f\"><strong>\u0417\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/m2zgnvpP\/react-testing-intro-2.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0438\u043c \u043f\u0440\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 \u0454 \u043f\u043e\u0448\u0443\u043a \u043d\u0430\u0439\u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0456\u0448\u0438\u0445 \u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0446\u0456\u0439 \u0437 Reddit. \u0421\u0430\u043c \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0434\u043e\u0441\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0438\u0439, \u0432 \u043d\u044c\u043e\u043c\u0443 \u0454 \u043b\u0438\u0448\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0437 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u043e\u043c\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c\u0438 \u0442\u0430 \u0444\u043e\u0440\u043c\u0430. \u041e\u0434\u043d\u0430\u043a \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043d\u044c\u043e, \u0430\u0431\u0438 \u043f\u043e\u0447\u0430\u0442\u0438 \u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438.<\/p>\n\n\n\n<p>\u041f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u044c \u043d\u0430 \u0456\u043d\u0448\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438, \u0432\u043c\u0456\u0441\u0442 \u044f\u043a\u0438\u0445 \u043d\u0435 \u0432\u0430\u0436\u043b\u0438\u0432\u0438\u0439 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0442\u0435\u0441\u0442\u0456\u0432. \u0423 \u0444\u043e\u0440\u043c\u0456 \u043f\u043e\u0448\u0443\u043a\u0443 \u0454 \u043e\u0434\u043d\u0435 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0443, \u0434\u0435 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u043c\u043e\u0436\u0435 \u0432\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0456\u044e \u0434\u043b\u044f \u043f\u043e\u0448\u0443\u043a\u0443. \u041a\u043b\u0456\u043a\u043e\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 submit \u043c\u0438 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0454\u043c\u043e \u0437\u0430\u043f\u0438\u0442 \u043d\u0430 Redit API. \u041f\u043e\u043a\u0438 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043e\u0447\u0456\u043a\u0443\u0454 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0456, \u043f\u043e\u043a\u0430\u0437\u0443\u0454\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u043d \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f. \u0429\u043e\u0439\u043d\u043e \u0434\u0430\u043d\u0456 \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u0456, \u043f\u043e\u043a\u0430\u0437\u0443\u0454\u043c\u043e \u0457\u0445 (\u0432 \u043d\u0430\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u2014 \u0446\u0435 \u043a\u0456\u043b\u044c\u043a\u0456\u0441\u0442\u044c \u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0446\u0456\u0439).<\/p>\n\n\n\n<p>\u041e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u043f\u043e\u0432\u043d\u0438\u0439 \u043a\u043e\u0434 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u0457&nbsp;<a href=\"https:\/\/github.com\/jkettmann\/beginners-guide-to-testing-react\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a>.<\/p>\n\n\n\n<h2 id=\"\u0449\u043e-\u0442\u0440\u0435\u0431\u0430-\u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438\"><strong>\u0429\u043e \u0442\u0440\u0435\u0431\u0430 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438<\/strong><\/h2>\n\n\n\n<p>\u0426\u0435 \u043f\u0435\u0440\u0448\u0435 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u044f\u043a\u0435 \u0432\u0438\u043d\u0438\u043a\u0430\u0454 \u0443 \u043f\u043e\u0447\u0430\u0442\u043a\u0456\u0432\u0446\u044f. \u0414\u043b\u044f \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0443 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u0444\u043e\u0440\u043c\u0443. \u0422\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Form({ onSearch }) {\n  const &#91;subreddit, setSubreddit] = useState('javascript');\n\n  const onSubmit = (event) => {\n    event.preventDefault();\n    onSearch(subreddit);\n  };\n\n  return (\n    &lt;FormContainer onSubmit={onSubmit}>\n      &lt;Label>\n        r \/\n        &lt;Input\n          type=\"text\"\n          name=\"subreddit\"\n          value={subreddit}\n          onChange={(event) => setSubreddit(event.target.value)}\n        \/>\n      &lt;\/Label>\n\n      &lt;Button type=\"submit\">\n        Search\n      &lt;\/Button>\n    &lt;\/FormContainer>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u0424\u043e\u0440\u043c\u0430 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u0441\u0442\u0430\u043d \u0443 \u0437\u043c\u0456\u043d\u043d\u0456\u0439 \u0442\u0430 \u043a\u0435\u0440\u0443\u0454 \u043d\u0438\u043c. \u041f\u0456\u0441\u043b\u044f \u043a\u043b\u0456\u043a\u0443 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 submit \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u043c\u0435\u0442\u043e\u0434&nbsp;<code>onSearch<\/code>, \u044f\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0432\u0456\u0434 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u0412\u0430\u043c \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0446\u0456\u043a\u0430\u0432\u043e, \u044f\u043a \u0441\u0430\u043c\u0435 \u0431\u0443\u043b\u043e \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u043e \u0434\u0430\u043d\u0456. \u041b\u043e\u0433\u0456\u043a\u0430 \u0437\u0430\u043f\u0438\u0442\u0443 \u0440\u043e\u0437\u043c\u0456\u0449\u0435\u043d\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 \u0434\u043e\u043c\u0430\u0448\u043d\u044c\u043e\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438, \u044f\u043a\u0438\u0439 \u0454 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u0438\u043c \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Home() {\n  const &#91;posts, setPosts] = useState(&#91;]);\n  const &#91;status, setStatus] = useState('idle')\n\n  const onSearch = async (subreddit) => {\n    setStatus('loading');\n    const url = `https:\/\/www.reddit.com\/r\/${subreddit}\/top.json`;\n    const response = await fetch(url);\n    const { data } = await response.json();\n    setPosts(data.children);\n    setStatus('resolved');\n  };\n\n  return (\n    &lt;Container>\n      &lt;Section>\n        &lt;Headline>\n          Find the best time for a subreddit\n        &lt;\/Headline>\n\n        &lt;Form onSearch={onSearch} \/>\n      &lt;\/Section>\n\n      {\n        status === 'loading' &amp;&amp; (\n          &lt;Status>\n            Is loading\n          &lt;\/Status>\n        )\n      }\n      {\n        status === 'resolved' &amp;&amp; (\n          &lt;TopPosts>\n            Number of top posts: {posts.length}\n          &lt;\/TopPosts>\n        )\n      }\n    &lt;\/Container>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u043e\u043b\u043e\u0432\u043d\u043e\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c API \u0443 \u0437\u043c\u0456\u043d\u043d\u0456\u0439 \u0441\u0442\u0430\u043d\u0443, \u0430 \u0442\u0430\u043a\u043e\u0436 \u0437\u0430\u0439\u043c\u0430\u0454\u0442\u044c\u0441\u044f \u043e\u0431\u0440\u043e\u0431\u043a\u043e\u044e \u0441\u0442\u0430\u043d\u0443 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f. \u041a\u043e\u043b\u0438 \u0444\u043e\u0440\u043c\u0430 \u0456\u043d\u0456\u0446\u0456\u044e\u0454 \u043f\u043e\u0448\u0443\u043a, \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0454\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0438\u0442 \u043d\u0430 Reddit API. \u041e\u0434\u0440\u0430\u0437\u0443 \u044f\u043a \u0434\u0430\u043d\u0456 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442\u044c, \u043e\u0431\u0438\u0434\u0432\u0456 \u0437\u043c\u0456\u043d\u043d\u0456 \u0441\u0442\u0430\u043d\u0443 \u043e\u043d\u043e\u0432\u043b\u044e\u044e\u0442\u044c\u0441\u044f, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u043a\u0430\u0437\u0443\u0454\u0442\u044c\u0441\u044f \u043f\u0456\u0434 \u0444\u043e\u0440\u043c\u043e\u044e.<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0443\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0456 \u0447\u0430\u0441\u0442\u0438\u043d\u0438 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443. \u041f\u0435\u0440\u0448 \u043d\u0456\u0436 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u0430\u043b\u0456, \u0441\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u0435\u0431\u0435:&nbsp;<strong>\u044f\u043a \u0431\u0438 \u0432\u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043b\u0438 \u0446\u0456 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438?<\/strong><\/p>\n\n\n\n<p>\u0417\u0432\u0430\u0436\u0430\u044e\u0447\u0438 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432, \u0441\u043f\u0430\u0434\u0430\u0454 \u043d\u0430 \u0434\u0443\u043c\u043a\u0443 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438, \u0447\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0454\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u043d, \u044f\u043a\u0449\u043e \u043f\u0440\u043e\u043f&nbsp;<code>onSearch<\/code>&nbsp;\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430&nbsp;<code>Form<\/code>&nbsp;\u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \u043f\u043e\u0442\u043e\u0447\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f\u043c. \u0411\u0456\u043b\u044c\u0448\u0456\u0441\u0442\u044c \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432 \u0437\u0432\u0438\u043a\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0430\u043a\u0456 \u0442\u0435\u0441\u0442\u0438 \u043d\u0430 Enzyme.<\/p>\n\n\n\n<p>\u0410\u043b\u0435 \u0437 Testing Library \u0443 \u043d\u0430\u0441 \u043d\u0435\u043c\u0430\u0454 \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u0441\u0442\u0430\u043d\u0443. \u041c\u0438 \u0434\u043e\u0441\u0456 \u043c\u043e\u0436\u0435\u043c\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u043f\u0441\u0438, \u0430\u043b\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c\u043e \u0434\u0456\u0437\u043d\u0430\u0442\u0438\u0441\u044f, \u044f\u043a\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u0437\u043c\u0456\u043d\u043d\u0430 \u0441\u0442\u0430\u043d\u0443.<\/p>\n\n\n\n<p>\u041c\u043e\u0436\u043d\u0430 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u0438, \u0449\u043e \u0446\u0435 \u043d\u0435\u0434\u043e\u043b\u0456\u043a, \u043e\u0434\u043d\u0430\u043a \u043d\u0430\u0441\u043f\u0440\u0430\u0432\u0434\u0456 \u0446\u0435 \u043f\u0435\u0440\u0435\u0432\u0430\u0433\u0430. \u041b\u043e\u0433\u0456\u043a\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0456\u043d\u043d\u044f \u0441\u0442\u0430\u043d\u043e\u043c \u0440\u043e\u0437\u043a\u0440\u0438\u0432\u0430\u0454 \u0432\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u044e \u0440\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u043f\u0435\u0440\u0435\u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u0441\u0442\u0430\u043d \u0444\u043e\u0440\u043c\u0438 \u0434\u043e \u0457\u0457 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u0456 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438\u043c\u0435 \u0442\u0430\u043a \u0441\u0430\u043c\u043e.<\/p>\n\n\n\n<p>\u0412\u0437\u0430\u0433\u0430\u043b\u0456,&nbsp;<a href=\"https:\/\/kentcdodds.com\/blog\/react-is-an-implementation-detail\" target=\"_blank\" rel=\"noreferrer noopener\">React \u0441\u0430\u043c \u043f\u043e \u0441\u043e\u0431\u0456 \u2014 \u0446\u0435 \u0434\u0435\u0442\u0430\u043b\u044c \u0440\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457<\/a>. \u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u0438 \u0432\u0435\u0441\u044c \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043d\u0430 Vue.js \u0456 \u0434\u0430\u043b\u0456 \u043c\u0430\u0442\u0438 \u0442\u043e\u0439 \u0441\u0430\u043c\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b.<\/p>\n\n\n\n<p>\u0417\u0430\u043c\u0456\u0441\u0442\u044c \u0444\u043e\u043a\u0443\u0441\u0443\u0432\u0430\u0442\u0438\u0441\u044c \u043d\u0430 \u043a\u043e\u0434\u0456 \u0456 \u0442\u043e\u043c\u0443, \u044f\u043a \u0432\u0456\u043d \u043f\u0440\u0430\u0446\u044e\u0454,&nbsp;<strong>\u043c\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u0439\u043c\u0430\u0454\u043c\u043e \u043f\u043e\u0437\u0438\u0446\u0456\u044e \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430. \u0422\u0430\u043a \u043c\u0438 \u0432\u0438\u043c\u0443\u0448\u0435\u043d\u0456 \u0437\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u0442\u0438\u0441\u044c \u043d\u0430 \u0432\u0430\u0436\u043b\u0438\u0432\u0438\u0445 \u0447\u0430\u0441\u0442\u0438\u043d\u0430\u0445 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443.<\/strong><\/p>\n\n\n\n<p>\u0429\u043e\u0439\u043d\u043e \u0432\u0438 \u043e\u0441\u044f\u0433\u043d\u0435\u0442\u0435 \u0442\u0430\u043a\u0443 \u0444\u0456\u043b\u043e\u0441\u043e\u0444\u0456\u044e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f, \u0432\u043e\u043d\u043e \u0432\u0436\u0435 \u043d\u0435 \u0437\u0434\u0430\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f \u0432\u0430\u043c \u0442\u0430\u0454\u043c\u043d\u0438\u0447\u0438\u043c \u0442\u0430 \u043b\u044f\u0447\u043d\u0438\u043c.<\/p>\n\n\n\n<p><em>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443: \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0443 \u043d\u0430\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u2014 \u0446\u0435 \u043d\u0435 \u043b\u0438\u0448\u0435 \u043a\u0456\u043d\u0446\u0435\u0432\u0438\u0439 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443, \u0430 \u0439 \u0456\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a, \u044f\u043a\u0438\u0439 \u043f\u043e\u0441\u043b\u0443\u0433\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0430\u0448\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u041f\u0440\u0438\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u0432\u0438 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u0442\u0435 \u0433\u0430\u043b\u0435\u0440\u0435\u044e \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c, \u044f\u043a\u0430 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0430 \u0439 \u0456\u043d\u0448\u0438\u043c \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0430\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0456. \u0412\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438, \u0447\u0438 \u0432\u043e\u043d\u0430 \u043f\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u043e, \u044f\u043a\u0449\u043e, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0437\u043c\u0456\u043d\u0438\u043b\u0438\u0441\u044c \u043f\u0435\u0432\u043d\u0456 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456.<\/em><\/p>\n\n\n\n<p>\u0422\u043e\u0436 \u0437\u0430\u0431\u0443\u0434\u0435\u043c\u043e \u043d\u0430 \u0434\u0435\u044f\u043a\u0438\u0439 \u0447\u0430\u0441 \u043f\u0440\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0430 \u0443\u044f\u0432\u0456\u043c\u043e \u0441\u0435\u0431\u0435 \u0439\u043e\u0433\u043e \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0435\u043c. \u042f\u043a\u0438\u0439 \u0442\u043e\u0434\u0456 \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b \u0441\u0442\u0430\u043d\u0435 \u0434\u043b\u044f \u043d\u0430\u0441 \u0432\u0430\u0436\u043b\u0438\u0432\u0438\u043c?<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/WbrbVM77\/react-testing-intro-form.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0420\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u043f\u0440\u043e\u0441\u0442\u0438\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0439 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0457 \u0456\u0437 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u043e\u043c:<\/p>\n\n\n\n<ol><li>\u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432 \u043f\u043e\u043b\u0435 \u0444\u043e\u0440\u043c\u0438 \u0442\u0430 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0454 \u0439\u043e\u0433\u043e.<\/li><li>\u0417\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043f\u043e\u043a\u0430\u0437\u0443\u0454 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f, \u0434\u043e\u043a\u0438 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u044e\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u0456.<\/li><li>\u041a\u043e\u043b\u0438 \u043c\u0435\u0440\u0435\u0436\u0435\u0432\u0430 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c, \u0434\u0430\u043d\u0456 \u043f\u043e\u043a\u0430\u0437\u0443\u044e\u0442\u044c\u0441\u044f.<\/li><\/ol>\n\n\n\n<p>\u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0443 \u043d\u0435 \u0432\u0430\u0436\u043b\u0438\u0432\u043e, \u0449\u043e \u0441\u0430\u043c\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454 \u0437\u0430 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432\u0432\u043e\u0434\u0443 \u2014 \u0433\u043e\u043b\u043e\u0432\u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430 \u0447\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u0438. \u041d\u0435\u043c\u0430\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u044e\u0442\u044c\u0441\u044f \u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0446\u0456\u0457 \u0432 \u0437\u043c\u0456\u043d\u043d\u0456\u0439 \u0441\u0442\u0430\u043d\u0443 \u0447\u0438 \u043d\u0456, \u044f\u043a\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u0438\u0445 \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f. \u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430 \u0442\u0443\u0440\u0431\u0443\u044e\u0442\u044c \u043b\u0438\u0448\u0435 \u043f\u0443\u043d\u043a\u0442\u0438, \u044f\u043a\u0456 \u043c\u0438 \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0432\u0438\u0449\u0435.<\/p>\n\n\n\n<p>\u0417\u0432\u0438\u0447\u0430\u0439\u043d\u043e, \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u0442\u0430\u043a\u043e\u0436 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443. \u041d\u0435\u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0435 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043c\u043e\u0436\u0435 \u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0438\u0442\u044c \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u0456 \u043d\u0430\u0441\u043b\u0456\u0434\u043a\u0438 \u0434\u043b\u044f \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0433\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443.<\/p>\n\n\n\n<p><em>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443: \u0437\u0430\u0437\u0432\u0438\u0447\u0430\u0439 \u0443 \u0444\u043e\u0440\u043c\u0430\u0445 \u0432\u0430\u0440\u0442\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438 \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0456 \u0432\u0438\u043f\u0430\u0434\u043a\u0438 \u0442\u0430 \u043e\u0431\u0440\u043e\u0431\u043a\u0443 \u043f\u043e\u043c\u0438\u043b\u043e\u043a. \u041e\u0434\u043d\u0430\u043a \u0446\u044f \u0442\u0435\u043c\u0430 \u0437\u0430\u043b\u0438\u0448\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043c\u0430\u0439\u0431\u0443\u0442\u043d\u0456\u0445 \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b\u0456\u0432.<\/em><\/p>\n\n\n\n<h2 id=\"\u043f\u0438\u0448\u0435\u043c\u043e-\u0442\u0435\u0441\u0442\u0438\"><strong>\u041f\u0438\u0448\u0435\u043c\u043e \u0442\u0435\u0441\u0442\u0438<\/strong><\/h2>\n\n\n\n<p>\u041f\u0440\u0438\u0433\u0430\u0434\u0430\u0439\u043c\u043e \u0442\u0440\u043e\u0445\u0438 \u043d\u0430\u0448\u0456 \u0432\u0438\u0441\u043d\u043e\u0432\u043a\u0438 \u0437 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u0457 \u0447\u0430\u0441\u0442\u0438\u043d\u0438 \u0439 \u043f\u0435\u0440\u0435\u043a\u043b\u0430\u0434\u0435\u043c\u043e \u0457\u0445 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u044e \u043c\u043e\u0432\u043e\u044e.<\/p>\n\n\n\n<p>\u041c\u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c\u043e \u0434\u0432\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0445 \u0432\u0438\u043f\u0430\u0434\u043a\u0438. \u041e\u0434\u0438\u043d \u2014 \u0434\u043b\u044f \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u044c \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443, \u0430 \u0456\u043d\u0448\u0438\u0439 \u2014 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438. \u0412 \u043f\u0435\u0440\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438, \u0447\u0438 \u0432\u043a\u0430\u0437\u0443\u044e\u0442\u044c \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438. \u0423 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u0437 \u0444\u043e\u0440\u043c\u043e\u044e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0454\u043c\u043e \u043f\u0440\u043e\u0446\u0435\u0441 \u0457\u0457 \u0437\u043c\u0456\u043d\u0438 \u0442\u0430 \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u043f\u043e\u044f\u0432\u0438 \u0441\u0442\u0430\u043d\u0443 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0442\u0430 \u0432\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443.<\/p>\n\n\n\n<p>\u041f\u043e\u0447\u043d\u0435\u043c\u043e \u0437 \u043f\u0435\u0440\u0448\u043e\u0433\u043e \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u0443. \u0412\u0456\u0434\u043a\u0440\u0438\u0439\u043c\u043e \u0444\u0430\u0439\u043b&nbsp;<code>src\/App.test.js<\/code>&nbsp;\u0442\u0430 \u0432\u0438\u0434\u0430\u043b\u0438\u043c\u043e \u043d\u0430\u044f\u0432\u043d\u0438\u0439 \u0432\u043c\u0456\u0441\u0442. \u0422\u0435\u043f\u0435\u0440 \u043e\u043f\u0438\u0448\u0435\u043c\u043e \u043d\u0430\u0448 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0439 \u0432\u0438\u043f\u0430\u0434\u043e\u043a \u0443 \u0431\u043b\u043e\u0446\u0456&nbsp;<code>describe()<\/code>&nbsp;Jest.<\/p>\n\n\n\n<p><em>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443: \u043e\u0433\u043e\u0440\u0442\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438 \u0443&nbsp;<code>describe<\/code>&nbsp;\u043d\u0435 \u043e\u0431\u043e\u0432&#8217;\u044f\u0437\u043a\u043e\u0432\u043e, \u043e\u0434\u043d\u0430\u043a \u0446\u0435 \u0434\u0430\u0454 \u0437\u043c\u043e\u0433\u0443 \u0437\u0433\u0440\u0443\u043f\u0443\u0432\u0430\u0442\u0438 \u0457\u0445 \u0437\u0430 \u043f\u0440\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f\u043c. \u041d\u0430 \u0434\u0443\u043c\u043a\u0443 \u0430\u0432\u0442\u043e\u0440\u0430, \u0446\u0435 \u0440\u043e\u0431\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0456\u043b\u044c\u0448 \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0430\u043d\u0438\u043c \u0442\u0430 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0438\u043c, \u0437\u0430\u043f\u043e\u0431\u0456\u0433\u0430\u0454 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u043d\u044e \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0445 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u044c, \u0434\u0430\u0454 \u0437\u043c\u043e\u0433\u0443 \u043f\u0440\u0438\u0445\u043e\u0432\u0430\u0442\u0438 \u0437\u0433\u0440\u0443\u043f\u043e\u0432\u043d\u0438\u0439 \u0431\u043b\u043e\u043a \u0442\u0435\u0441\u0442\u0456\u0432 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0456 \u043a\u043e\u0434\u0443.<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>describe('Header', () => {\n\n});\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u0441\u0442\u043e\u0432\u0456 \u043a\u0435\u0439\u0441\u0438 \u043e\u0433\u043e\u043b\u043e\u0448\u0443\u044e\u0442\u044c\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0454\u044e&nbsp;<code>test()<\/code>. \u042f\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438&nbsp;<code>it()<\/code>. \u041e\u0431\u0438\u0434\u0432\u0456 \u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u044e\u0442\u044c\u0441\u044f \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u043e\u044e Jest.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>describe('Header', () => {\n  test('\"How it works\" link points to the correct page', () => {\n\n  });\n});\n<\/code><\/pre>\n\n\n\n<p>\u041d\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0430 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438&nbsp;<code>Header<\/code>&nbsp;\u0432 \u0456\u0437\u043e\u043b\u044f\u0446\u0456\u0457. \u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u0439\u043e\u0433\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0456 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443. \u0422\u043e\u043c\u0443 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0443 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&nbsp;<code>App<\/code>. \u0412\u0456\u043d \u0440\u0435\u0430\u043b\u0456\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u0442\u0430\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { Switch, Route } from 'react-router-dom';\nimport GlobalStyle from '.\/GlobalStyle';\nimport Header from '.\/components\/Header';\nimport Home from '.\/pages\/Home';\n\nfunction App() {\n  return (\n    &lt;>\n      &lt;GlobalStyle \/>\n      &lt;Header \/>\n\n      &lt;main>\n        &lt;Switch>\n          &lt;Route path=\"\/how-it-works\">\n            &lt;h1>How it works&lt;\/h1>\n          &lt;\/Route>\n          &lt;Route path=\"\/about\">\n            &lt;h1>About&lt;\/h1>\n          &lt;\/Route>\n          &lt;Route path=\"\/\">\n            &lt;Home \/>\n          &lt;\/Route>\n        &lt;\/Switch>\n      &lt;\/main>\n    &lt;\/>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u042f\u043a \u0456 \u0431\u0456\u043b\u044c\u0448\u0456\u0441\u0442\u044c \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d-\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 App \u043c\u0438 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0454\u043c\u043e \u0437 React Router. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0442\u0430 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u0440\u043e\u0443\u0442\u0456\u0432, \u043e\u0434\u0438\u043d \u0437 \u044f\u043a\u0438\u0445 \u2014 \u0433\u043e\u043b\u043e\u0432\u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430.<\/p>\n\n\n\n<p>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443, \u0449\u043e \u0432 \u043a\u043e\u0434\u0456 \u043d\u0435\u043c\u0430\u0454 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430&nbsp;<code>Router<\/code>. \u0414\u043b\u044f \u0446\u0456\u043b\u0435\u0439 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u0438\u043d\u043e\u0441\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0432&nbsp;<code>index.js<\/code>, \u0430&nbsp;<a href=\"https:\/\/reacttraining.com\/react-router\/web\/guides\/testing\" target=\"_blank\" rel=\"noreferrer noopener\">\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&nbsp;<code>App<\/code>&nbsp;\u043e\u0433\u043e\u0440\u0442\u0430\u0454\u043c\u043e \u0432&nbsp;<code>MemoryRouter<\/code><\/a>.<\/p>\n\n\n\n<p>\u0412 \u043f\u0435\u0440\u0448\u0443 \u0447\u0435\u0440\u0433\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&nbsp;<code>App<\/code>. \u0423 Testing Library \u0454 \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>render<\/code>, \u044f\u043a\u0430 \u0444\u043e\u0440\u043c\u0443\u0454 DOM \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { render } from '@testing-library\/react';\nimport App from '.\/App';\n\ndescribe('Header', () => {\n  test('\"How it works\" link points to the correct page', () => {\n    render(\n      &lt;MemoryRouter>\n        &lt;App \/>\n      &lt;\/MemoryRouter>\n    );\n  });\n});\n<\/code><\/pre>\n\n\n\n<p>\u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0432\u0441\u044f \u0437&nbsp;<code>create-react-app<\/code>, \u0432\u0441\u0435 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0435 \u0434\u043b\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f Testing Library \u0432\u0436\u0435 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e.<\/p>\n\n\n\n<h2 id=\"\u043d\u0435-\u043f\u043e\u0447\u0438\u043d\u0430\u0439\u0442\u0435-\u0431\u0456\u0439-\u0443-\u0442\u0435\u043c\u0440\u044f\u0432\u0456\"><strong>\u041d\u0435 \u043f\u043e\u0447\u0438\u043d\u0430\u0439\u0442\u0435 \u0431\u0456\u0439 \u0443 \u0442\u0435\u043c\u0440\u044f\u0432\u0456<\/strong><\/h2>\n\n\n\n<p>\u041a\u043e\u043b\u0438 \u0432\u0438 \u043b\u0438\u0448\u0435 \u043f\u043e\u0447\u0438\u043d\u0430\u0454\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438, \u0442\u043e \u0456\u043d\u043e\u0434\u0456 \u0437\u0434\u0430\u0454\u0442\u044c\u0441\u044f, \u043d\u0430\u0447\u0435 \u0432\u0438 \u043f\u0440\u0430\u0446\u044e\u0454\u0442\u0435 \u0437 \u0447\u043e\u0440\u043d\u0438\u043c \u044f\u0449\u0438\u043a\u043e\u043c: \u043d\u0435 \u0434\u0443\u0436\u0435 \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u043b\u043e, \u0449\u043e \u0436 \u0432\u0456\u0434\u0431\u0443\u0432\u0430\u0454\u0442\u044c\u0441\u044f. \u0412\u0438 \u0436 \u0431\u043e \u0437\u0432\u0438\u043a\u043b\u0438 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u0434\u0435 \u043c\u043e\u0436\u043d\u0430 \u0432\u0456\u0434\u043a\u0440\u0438\u0442\u0438 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0438 \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0430 \u0439 \u0434\u043e\u0441\u043b\u0456\u0434\u0438\u0442\u0438 \u0434\u0435\u0440\u0435\u0432\u043e DOM.<\/p>\n\n\n\n<p>\u041a\u043e\u043b\u0438 \u0432\u0438 \u043f\u0438\u0448\u0435\u0442\u0435 \u0442\u0435\u0441\u0442\u0438, \u0442\u043e \u043c\u0430\u0454\u0442\u0435 \u0437\u0432\u0438\u043a\u0430\u0442\u0438 \u0434\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u0435\u0440\u0435\u0434\u043e\u0432\u0438\u0449\u0430. \u041f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0447\u0430\u0441, \u0430\u0431\u0438 \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438, \u0449\u043e \u0434\u043e \u0447\u043e\u0433\u043e. \u0429\u043e \u0440\u043e\u0431\u0438\u0442\u0438, \u044f\u043a\u0449\u043e \u0440\u0430\u043f\u0442\u043e\u043c \u0442\u0435\u0441\u0442 \u043f\u0440\u043e\u0432\u0430\u043b\u044e\u0454\u0442\u044c\u0441\u044f, \u0442\u043e\u043c\u0443 \u0449\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0437\u043d\u0430\u0439\u0434\u0435\u043d\u043e?<\/p>\n\n\n\n<p>\u0422\u043e\u0434\u0456 \u043d\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>debug<\/code>, \u044f\u043a\u0430 \u0432 \u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435 \u0432\u0438\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u0442\u043e\u0447\u043d\u0435 DOM-\u0434\u0435\u0440\u0435\u0432\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443. \u0417\u0432\u0456\u0441\u043d\u043e, \u0446\u0435 \u043d\u0435 \u0442\u0430\u043a \u0437\u0440\u0443\u0447\u043d\u043e, \u044f\u043a \u0440\u043e\u0431\u043e\u0442\u0430 \u0437 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0430\u043b\u0435 \u0446\u0435 \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435 \u0437&#8217;\u044f\u0441\u0443\u0432\u0430\u0442\u0438, \u0449\u043e \u0432\u0456\u0434\u0431\u0443\u0432\u0430\u0454\u0442\u044c\u0441\u044f.<\/p>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0442\u0456\u043b\u044c\u043a\u0438 \u043f\u043e\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438, \u043d\u0435 \u0432\u0430\u0440\u0442\u043e \u043f\u043e\u043a\u043b\u0430\u0434\u0430\u0442\u0438\u0441\u044c \u043d\u0430 \u043c\u0435\u0442\u043e\u0434 \u0441\u043f\u0440\u043e\u0431 \u0456 \u043f\u043e\u043c\u0438\u043b\u043e\u043a. \u041a\u0440\u0430\u0449\u0435 \u0432\u0438\u0442\u0440\u0430\u0442\u044c\u0442\u0435 \u0442\u0440\u043e\u0445\u0438 \u0431\u0456\u043b\u044c\u0448\u0435 \u0447\u0430\u0441\u0443, \u0449\u043e\u0431 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438&nbsp;<code>debug<\/code>&nbsp;\u043f\u0456\u0441\u043b\u044f \u043a\u043e\u0436\u043d\u043e\u0433\u043e \u043a\u0440\u043e\u043a\u0443, \u0446\u0435 \u0434\u0430\u0441\u0442\u044c \u043a\u0440\u0430\u0449\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u0443.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { render, screen } from '@testing-library\/react';\n\ndescribe('Header', () => {\n  test('\"How it works\" link points to the correct page', () => {\n    render(\n      &lt;MemoryRouter>\n        &lt;App \/>\n      &lt;\/MemoryRouter>\n    );\n    screen.debug();\n  });\n});\n<\/code><\/pre>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0438 \u0442\u0435\u0441\u0442 \u0437&nbsp;<code>yarn test<\/code>, \u043f\u043e\u0431\u0430\u0447\u0438\u043c\u043e \u0442\u0430\u043a\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/HxJYSyQ8\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0422\u0443\u0442 \u0454 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u044f\u043a\u0438\u0439 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u044c, \u0441\u0435\u0440\u0435\u0434 \u044f\u043a\u0438\u0445 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u00abHow it works\u00bb, \u044f\u043a\u0435 \u043c\u0438 \u0445\u043e\u0447\u0435\u043c\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438.<\/p>\n\n\n\n<h2 id=\"\u044f\u043a-\u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438-\u0434\u043e\u0441\u0442\u0443\u043f-\u0434\u043e-\u0434\u0435\u0440\u0435\u0432\u0430-dom-\u0443-\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443\"><strong>\u042f\u043a \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u0434\u0435\u0440\u0435\u0432\u0430 DOM \u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443<\/strong><\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u0432\u0456\u0434\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u0438\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043e\u0431&#8217;\u0454\u043a\u0442&nbsp;<code>screen<\/code>, \u044f\u043a\u0438\u0439 \u0435\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u0454\u0442\u044c\u0441\u044f \u0437 Testing Library.<\/p>\n\n\n\n<p>\u0426\u0435\u0439 \u043e\u0431&#8217;\u0454\u043a\u0442 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u0439 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 DOM. \u0421\u0435\u0440\u0435\u0434 \u043d\u0438\u0445:<\/p>\n\n\n\n<ul><li><code>getBy<\/code>: \u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a&nbsp;<code>getByTestId<\/code>,&nbsp;<code>getByText<\/code>&nbsp;\u0430\u0431\u043e&nbsp;<code>getByRole<\/code>. \u0412\u043e\u043d\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0456, \u0430 \u0457\u0445\u043d\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0430 \u043c\u0435\u0442\u0430 \u2014 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438, \u0447\u0438 \u043c\u0456\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 DOM. \u042f\u043a\u0449\u043e \u043d\u0456, \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454\u0442\u044c\u0441\u044f \u043f\u043e\u043c\u0438\u043b\u043a\u0430.<\/li><li><code>findBy<\/code>: \u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a&nbsp;<code>findByText<\/code>. \u0412\u043e\u043d\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0456, \u0442\u043e\u043c\u0443 \u0447\u0435\u043a\u0430\u044e\u0442\u044c \u0434\u0435\u044f\u043a\u0438\u0439 \u0447\u0430\u0441 (\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e 5 \u0441\u0435\u043a\u0443\u043d\u0434), \u0434\u043e\u043a\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0437&#8217;\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0432 DOM. \u042f\u043a\u0449\u043e \u043d\u0456, \u0442\u0430\u043a\u043e\u0436 \u0431\u0443\u0434\u0435 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u043d\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443.<\/li><li><code>queryBy<\/code>&nbsp;\u0444\u0443\u043d\u043a\u0446\u0456\u0457, \u043a\u043e\u0442\u0440\u0456 \u043d\u0430\u043b\u0435\u0436\u0430\u0442\u044c \u0434\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0438\u0445, \u044f\u043a \u0456&nbsp;<code>getBy<\/code>, \u0430\u043b\u0435 \u0432\u043e\u043d\u0438 \u043d\u0435 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u044e\u0442\u044c \u043f\u043e\u043c\u0438\u043b\u043a\u0443, \u044f\u043a\u0449\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435\u043c\u0430\u0454, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u044e\u0442\u044c&nbsp;<code>null<\/code>.<\/li><\/ul>\n\n\n\n<p>\u041c\u0438 \u0432\u0436\u0435 \u043f\u0435\u0440\u0435\u0440\u0430\u0445\u0443\u0432\u0430\u043b\u0438 \u0431\u0430\u0433\u0430\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u0439 \u0434\u043b\u044f \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0457 \u0437 DOM, \u0442\u0430 \u043d\u0430 \u0446\u044c\u043e\u043c\u0443&nbsp;<a href=\"https:\/\/testing-library.com\/docs\/dom-testing-library\/api-queries\" target=\"_blank\" rel=\"noreferrer noopener\">\u043f\u0435\u0440\u0435\u043b\u0456\u043a \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0443\u0454\u0442\u044c\u0441\u044f<\/a>.<\/p>\n\n\n\n<p>\u042f\u043a \u0431\u0430\u0447\u0438\u043c\u043e, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0437\u0430\u0432\u0436\u0434\u0438 \u0440\u043e\u0437\u0442\u0430\u0448\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456. \u041d\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0430 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u0442\u0438, \u043a\u043e\u043b\u0438 \u0432\u0456\u043d \u0437&#8217;\u044f\u0432\u0438\u0442\u044c\u0441\u044f. \u0422\u043e\u043c\u0443 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0447\u0443\u0434\u043e\u0432\u043e \u043f\u0456\u0434\u0456\u0439\u0434\u0443\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0456\u0457&nbsp;<code>getBy<\/code>. \u042f\u043a\u0443 \u0436 \u0441\u0430\u043c\u0435 \u043e\u0431\u0440\u0430\u0442\u0438?<\/p>\n\n\n\n<p>\u041d\u0430 \u043f\u0435\u0440\u0448\u0438\u0439 \u043f\u043e\u0433\u043b\u044f\u0434 \u0437\u0434\u0430\u0454\u0442\u044c\u0441\u044f, \u0449\u043e \u0433\u0430\u0440\u043d\u0438\u043c \u0432\u0438\u0431\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435&nbsp;<code>getByTestId<\/code>. \u041d\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0440\u0435\u0431\u0430 \u0434\u043e\u0434\u0430\u0442\u0438 \u0434\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0439 \u0456\u0434\u0435\u043d\u0442\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div data-testid=\"some-content\">\n  Some content\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430&nbsp;<code>div<\/code>&nbsp;\u0442\u0430\u043a:&nbsp;<code>getByTestId('some-content')<\/code>. \u0412\u0438\u0433\u043b\u044f\u0434\u0430\u0454 \u0434\u043e\u0441\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e, \u0447\u0438 \u043d\u0435 \u0442\u0430\u043a? \u0410\u043b\u0435 \u0437 \u0442\u0430\u043a\u0438\u043c \u043f\u0456\u0434\u0445\u043e\u0434\u043e\u043c \u0432\u0430\u043c \u0434\u043e\u0432\u0435\u0434\u0435\u0442\u044c\u0441\u044f \u0437\u043c\u0456\u043d\u044e\u0432\u0430\u0442\u0438 \u043d\u0430\u044f\u0432\u043d\u0438\u0439 \u043a\u043e\u0434. \u0426\u0435, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043d\u0435 \u0456\u0434\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u0441\u043f\u043e\u0441\u0456\u0431. \u0429\u043e\u0431 \u0437\u043d\u0430\u0439\u0442\u0438 \u043d\u0430\u043a\u0440\u0430\u0449\u0438\u0439 \u0432\u0430\u0440\u0456\u0430\u043d\u0442, \u0432\u0430\u0440\u0442\u043e \u0437\u0432\u0435\u0440\u043d\u0443\u0442\u0438\u0441\u044c \u0434\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0457 Testing Library, \u0432\u043e\u043d\u0430 \u043e\u043f\u0438\u0441\u0443\u0454,&nbsp;<a href=\"https:\/\/testing-library.com\/docs\/guide-which-query\" target=\"_blank\" rel=\"noreferrer noopener\">\u043a\u043e\u043b\u0438 \u0432\u0430\u0440\u0442\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0442\u0443 \u0447\u0438 \u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0434\u043b\u044f \u043f\u043e\u0448\u0443\u043a\u0443 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/a>. \u041d\u0430\u0439\u0447\u0430\u0441\u0442\u0456\u0448\u0435 \u0446\u0435&nbsp;<code>getByRole<\/code>. \u041d\u0435 \u0437\u043b\u043e\u0432\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0456\u044f\u043c\u0438 \u043d\u0430 \u0437\u0440\u0430\u0437\u043e\u043a&nbsp;<code>getByAltText<\/code>&nbsp;\u0430\u0431\u043e&nbsp;<code>getByTitle<\/code>. \u0410 \u043e\u0442&nbsp;<code>getBytestId<\/code>&nbsp;\u0432\u0430\u0440\u0442\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438, \u043b\u0438\u0448\u0435 \u044f\u043a\u0449\u043e \u0436\u043e\u0434\u043d\u043e\u0433\u043e \u0456\u043d\u0448\u043e\u0433\u043e \u0432\u0430\u0440\u0456\u0430\u043d\u0442\u0443 \u043d\u0435\u043c\u0430\u0454.<\/p>\n\n\n\n<p>\u0421\u043f\u0440\u043e\u0431\u0443\u0439\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>getByRole<\/code>&nbsp;\u0434\u043b\u044f \u043f\u043e\u0448\u0443\u043a\u0443 \u043d\u0430\u0448\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u0435\u0440\u0448\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u0442\u044c\u0441\u044f&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/ARIA_Techniques#Roles\" target=\"_blank\" rel=\"noreferrer noopener\">ARIA-\u0440\u043e\u043b\u044c<\/a>&nbsp;\u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412 \u043d\u0430\u0441 \u0446\u0435 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f. \u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0432 \u043d\u0430\u0441 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u044c \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456, \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u0441\u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044e&nbsp;<code>name<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>render(\n  &lt;MemoryRouter>\n    &lt;App \/>\n  &lt;\/MemoryRouter>\n);\n\nconst link = screen.getByRole('link', { name: \/how it works\/i });\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0443\u0442 \u0441\u043f\u0435\u0446\u0456\u0430\u043b\u044c\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0438\u0439 \u0432\u0438\u0440\u0430\u0437&nbsp;<code>\/how it works\/i<\/code>, \u0430 \u043d\u0435 \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0438\u0439 \u0440\u044f\u0434\u043e\u043a&nbsp;<code>'How it works'<\/code>, \u0449\u043e\u0431 \u0443\u043d\u0438\u043a\u043d\u0443\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0437 \u0440\u0435\u0433\u0456\u0441\u0442\u0440\u043e\u043c (\u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u044f\u043a\u0449\u043e \u0432\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u0435 CSS \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0442\u0435\u043a\u0441\u0442\u0443). \u0414\u043e \u0442\u043e\u0433\u043e \u0436 \u0437 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0438\u043c \u0432\u0438\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u0430 \u0448\u0443\u043a\u0430\u0442\u0438 \u0447\u0430\u0441\u0442\u0438\u043d\u0438 \u0440\u044f\u0434\u043a\u0456\u0432.<\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u0456 \u0444\u0430\u0439\u043b\u0443 \u0442\u0435\u0441\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u044c\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e. \u042f\u043a\u0449\u043e \u0432\u0430\u0448 \u0442\u0435\u0441\u0442 \u043d\u0435 \u043f\u0440\u043e\u0439\u0448\u043e\u0432, \u0437\u0433\u0430\u0434\u0430\u0439\u0442\u0435 \u043f\u0440\u043e \u043d\u0430\u043b\u0430\u0433\u043e\u0434\u0436\u0435\u043d\u043d\u044f \u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>debug<\/code>. \u041d\u0435 \u0432\u0441\u0456 \u0437\u043d\u0430\u044e\u0442\u044c, \u0449\u043e \u0432\u043e\u043d\u0430 \u043f\u0440\u0438\u0439\u043c\u0430\u0454 \u044f\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u0430 \u0432\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0439\u043e\u0433\u043e \u0443 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const link = screen.getByRole('link', { name: \/how it works\/i });\nscreen.debug(link);\n<\/code><\/pre>\n\n\n\n<p>\u0412\u0430\u0448 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u043d\u043e \u0442\u0430\u043a\u0438\u043c:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/8c2B7Wn6\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"\u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f-\u0437-dom-\u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438\"><strong>\u0412\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f \u0437 DOM-\u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/strong><\/h2>\n\n\n\n<p>\u0423 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u0456\u0439 \u0447\u0430\u0441\u0442\u0438\u043d\u0456 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0443\u043b\u0438, \u044f\u043a \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 DOM. \u041e\u0434\u043d\u0430\u043a \u0446\u044c\u043e\u0433\u043e \u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043d\u044c\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u043e\u0433\u043e \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u0443.<\/p>\n\n\n\n<p>\u0429\u043e\u0431 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0432\u0456\u0434\u043a\u0440\u0438\u043b\u043e \u043d\u043e\u0432\u0443 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u043d\u0430 \u043d\u044c\u043e\u0433\u043e \u043a\u043b\u0456\u043a\u043d\u0443\u0442\u0438. \u0417 Testing Library \u0443 \u043d\u0430\u0441 \u0454 \u0434\u0432\u0430 \u0432\u0430\u0440\u0456\u0430\u043d\u0442\u0438:<\/p>\n\n\n\n<ol><li>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>fireEvent.click<\/code>&nbsp;\u0437 \u043c\u043e\u0434\u0443\u043b\u044f&nbsp;<code>@testing-library\/react<\/code>.<\/li><li>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>click<\/code>&nbsp;\u0437 \u043c\u043e\u0434\u0443\u043b\u044f&nbsp;<code>@testing-library\/user-event<\/code>.<\/li><\/ol>\n\n\n\n<p><a href=\"https:\/\/kentcdodds.com\/blog\/common-mistakes-with-react-testing-library\/#not-using-testing-libraryuser-event\" target=\"_blank\" rel=\"noreferrer noopener\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0454\u0442\u044c\u0441\u044f<\/a>&nbsp;\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043c\u043e\u0434\u0443\u043b\u044c&nbsp;<code>@testing-library\/user-event<\/code>, \u0434\u0435 \u043c\u043e\u0436\u043b\u0438\u0432\u043e. \u0422\u0430\u043c \u0431\u0456\u043b\u044c\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0456\u0439, \u0449\u043e \u0456\u043c\u0456\u0442\u0443\u044e\u0442\u044c \u0434\u0456\u0457 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430. \u042f\u043a\u0449\u043e \u0432\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u0442\u0435&nbsp;<code>package.json<\/code>, \u0442\u043e \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0435, \u0449\u043e \u0446\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u0438 \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u0457 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443 \u0437&nbsp;<code>create-react-app<\/code>.<\/p>\n\n\n\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c\u043e \u043a\u043e\u0434, \u044f\u043a\u0438\u0439 \u0456\u043c\u0456\u0442\u0443\u0432\u0430\u0442\u0438\u043c\u0435 \u043a\u043b\u0456\u043a \u043d\u0430 \u043d\u0430\u0448\u0435 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { render, screen } from '@testing-library\/react';\nimport userEvent from '@testing-library\/user-event';\nimport App from '.\/App';\n\ndescribe('Header', () => {\n  test('\"How it works\" link points to the correct page', () => {\n    render(\n      &lt;MemoryRouter>\n        &lt;App \/>\n      &lt;\/MemoryRouter>\n    );\n    const link = screen.getByRole('link', { name: \/how it works\/i });\n    userEvent.click(link);\n  });\n});\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u0432-\u043f\u043e\u0448\u0443\u043a\u0430\u0445-\u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e\u0457-\u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438\"><strong>\u0412 \u043f\u043e\u0448\u0443\u043a\u0430\u0445 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438<\/strong><\/h2>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0430 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438, \u0447\u0438 \u0432\u0456\u0434\u043a\u0440\u0438\u0432\u0430\u0454\u0442\u044c\u0441\u044f \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430 \u043f\u0456\u0441\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0443 \u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u0430 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438 URL, \u044f\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432&nbsp;<a href=\"https:\/\/reacttraining.com\/react-router\/web\/guides\/testing\/checking-location-in-tests\" target=\"_blank\" rel=\"noreferrer noopener\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0457 react-router<\/a>. \u041e\u0434\u043d\u0430\u043a \u0434\u043b\u044f \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430 URL \u043d\u0435 \u043d\u0430\u0434\u0442\u043e \u0432\u0430\u0436\u043b\u0438\u0432\u0438\u0439. \u0414\u043e \u0442\u043e\u0433\u043e \u0436 \u0432\u0456\u043d \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0446\u0456\u043b\u043a\u043e\u043c \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0438\u0439, \u0430 \u043e\u0442 \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0431\u0443\u0434\u0435 \u00ab404 \u043d\u0435 \u0437\u043d\u0430\u0439\u0434\u0435\u043d\u043e\u00bb.<\/p>\n\n\n\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456 \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0430 \u043f\u043e\u0432\u0435\u0434\u0456\u043d\u043a\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0443 \u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c \u043f\u043e\u0432\u0438\u043d\u043d\u0430 \u0431\u0443\u0442\u0438 \u0442\u0430\u043a\u043e\u044e:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/dVJ0m3dP\/react-testing-intro-link.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u041f\u0456\u0441\u043b\u044f \u043a\u043b\u0456\u043a\u0443 \u043d\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043c\u0438 \u043e\u0447\u0456\u043a\u0443\u0454\u043c\u043e \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u0456\u0437 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u00abHow it works\u00bb. \u042f\u043a\u0449\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u0430\u0454 ARIA-\u0440\u043e\u043b\u044c, \u043c\u0438 \u0437\u043d\u043e\u0432\u0443 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438&nbsp;<code>getByRole<\/code>&nbsp;\u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0438. \u0412\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0457 MDN, ARIA-\u0440\u043e\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u2014 \u0446\u0435&nbsp;<code>heading<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>userEvent.click(link);\n\nscreen.getByRole('heading', { name: \/how it works\/i });\n<\/code><\/pre>\n\n\n\n<p>\u041d\u0430\u0448 \u0442\u0435\u0441\u0442 \u043f\u0440\u043e\u0439\u0448\u043e\u0432, \u0442\u043e\u0431\u0442\u043e \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0438\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0454 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0456 \u0439 \u043c\u0438 \u043d\u0430 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0456\u0439 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456.<\/p>\n\n\n\n<p>\u0406 \u043d\u0430\u043e\u0441\u0442\u0430\u043d\u043e\u043a: \u043d\u0435 \u0432\u0430\u0440\u0442\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438&nbsp;<code>getBy<\/code>, \u0449\u043e\u0431 \u0434\u0456\u0437\u043d\u0430\u0442\u0438\u0441\u044c, \u0447\u0438 \u043f\u043e\u043a\u0430\u0437\u0443\u0454\u0442\u044c\u0441\u044f \u0435\u043b\u0435\u043c\u0435\u043d\u0442. \u041a\u0440\u0430\u0449\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438&nbsp;<code>expect(...).toBeInDocument()<\/code>.<\/p>\n\n\n\n<p>\u041f\u043e\u0432\u043d\u0438\u0439 \u0442\u0435\u0441\u0442:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>test('\"How it works\" link points to the correct page', () => {\n  render(\n    &lt;MemoryRouter>\n      &lt;App \/>\n    &lt;\/MemoryRouter>\n  );\n\n  const link = screen.getByRole('link', { name: \/how it works\/i });\n  userEvent.click(link);\n\n  expect(\n    screen.getByRole('heading', { name: \/how it works\/i })\n  ).toBeInTheDocument();\n});\n<\/code><\/pre>\n\n\n\n<p>\u0425\u043e\u0447\u0430 \u0442\u0435\u0441\u0442 \u043b\u0430\u043a\u043e\u043d\u0456\u0447\u043d\u0438\u0439, \u043c\u0438 \u0434\u043e\u0441\u0438\u0442\u044c \u0434\u043e\u0432\u0433\u043e \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u043b\u0438 \u0439\u043e\u0433\u043e \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u043e\u0441\u0442\u0456. \u0422\u0430 \u0449\u043e\u0439\u043d\u043e \u0432\u0438 \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u0454\u0442\u0435 \u0441\u0443\u0442\u043d\u0456\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443 \u0441\u0442\u0430\u043d\u0435 \u043d\u0430\u0434\u0437\u0432\u0438\u0447\u0430\u0439\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0438\u043c.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0448 \u043d\u0456\u0436 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0444\u043e\u0440\u043c\u0438, \u043d\u0430\u0433\u0430\u0434\u0430\u0439\u043c\u043e, \u0449\u043e \u043c\u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043b\u0438 \u043e\u0434\u043d\u0435 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f. \u0412\u0438 \u0442\u0430\u043a\u043e\u0436 \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u043b\u043e\u0433\u043e \u0437 \u043b\u0456\u0432\u043e\u0433\u043e \u0431\u043e\u043a\u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u044f\u043a\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0454 \u043d\u0430 \u0433\u043e\u043b\u043e\u0432\u043d\u0443 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443, \u0430 \u0442\u0430\u043a\u043e\u0436 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f, \u044f\u043a\u0435 \u0432\u0435\u0434\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u00abAbout\u00bb.<\/p>\n\n\n\n<p>\u041d\u0430\u043f\u0438\u0448\u0456\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0456\u0447\u043d\u0456 \u0442\u0435\u0441\u0442\u0438, \u0449\u043e\u0431 \u0437\u0430\u043a\u0440\u0456\u043f\u0438\u0442\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u0456 \u043d\u0430\u0432\u0438\u0447\u043a\u0438. \u0414\u0432\u0456 \u043f\u043e\u0440\u0430\u0434\u0438 \u0434\u043b\u044f \u0432\u0430\u0441:<\/p>\n\n\n\n<ol><li>\u0410\u0431\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f, \u044f\u043a\u0435 \u043e\u0433\u043e\u0440\u0442\u0430\u0454 \u043b\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>getByRole('link', { name })<\/code>. \u042f\u043a\u0449\u043e \u043d\u0435 \u0437\u043d\u0430\u0454\u0442\u0435, \u0449\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u044f\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440&nbsp;<code>name<\/code>, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435&nbsp;<code>screen.debug()<\/code>.<\/li><li>\u0422\u0435\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u044c \u00abHow it works\u00bb \u0442\u0430 \u00abAbout\u00bb \u043c\u043e\u0436\u043d\u0430 \u0441\u043a\u043e\u043c\u0431\u0456\u043d\u0443\u0432\u0430\u0442\u0438 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e&nbsp;<a href=\"https:\/\/jestjs.io\/docs\/en\/api#testeachtablename-fn-timeout\" target=\"_blank\" rel=\"noreferrer noopener\"><code>test.each<\/code><\/a>.<\/li><\/ol>\n\n\n\n<h2 id=\"\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f-\u0444\u043e\u0440\u043c\u0438\"><strong>\u0422\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0444\u043e\u0440\u043c\u0438<\/strong><\/h2>\n\n\n\n<p>\u0427\u0430\u0441 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0434\u043e \u0431\u0456\u043b\u044c\u0448 \u0441\u043a\u043b\u0430\u0434\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0444\u043e\u0440\u043c\u0438. \u041d\u0430\u0433\u0430\u0434\u0430\u0439\u043c\u043e, \u044f\u043a \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0454 \u0437 \u0444\u043e\u0440\u043c\u043e\u044e \u0443 \u043d\u0430\u0448\u043e\u043c\u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/L8WNfJWb\/react-testing-intro-form-1.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0426\u0435\u0439 \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441 \u0441\u043a\u043b\u0430\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u0440\u043e\u043a\u0456\u0432:<\/p>\n\n\n\n<ol><li>\u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0443 \u043f\u043e\u043b\u0456 \u0444\u043e\u0440\u043c\u0438 \u0442\u0430 \u043a\u043b\u0456\u043a\u0430\u0454 \u00absubmit\u00bb.<\/li><li>\u0417\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043f\u043e\u043a\u0430\u0437\u0443\u0454 \u0441\u0442\u0430\u043d \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f, \u0434\u043e\u043a\u0438 \u0447\u0435\u043a\u0430\u0454 \u043d\u0430 \u0434\u0430\u043d\u0456.<\/li><li>\u041a\u043e\u043b\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c, \u043f\u043e\u043a\u0430\u0437\u0443\u044e\u0442\u044c\u0441\u044f \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u0456 \u0434\u0430\u043d\u0456.<\/li><\/ol>\n\n\n\n<p>\u041f\u043e\u0447\u043d\u0435\u043c\u043e \u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442 \u0442\u0430\u043a \u0441\u0430\u043c\u043e, \u044f\u043a \u0456 \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>describe('Subreddit form', () => {\n  test('loads posts that are rendered on the page', () => {\n    render(\n      &lt;MemoryRouter>\n        &lt;App \/>\n      &lt;\/MemoryRouter>\n    );\n  });\n});\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u043d\u0435-\u043f\u043e\u0432\u0442\u043e\u0440\u044e\u0454\u043c\u043e\u0441\u044c-\u0456\u0437-\u0444\u0443\u043d\u043a\u0446\u0456\u0454\u044e-setup\"><strong>\u041d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044e\u0454\u043c\u043e\u0441\u044c \u0456\u0437 \u0444\u0443\u043d\u043a\u0446\u0456\u0454\u044e&nbsp;<code>setup<\/code><\/strong><\/h2>\n\n\n\n<p>\u042f\u043a \u0431\u0430\u0447\u0438\u043c\u043e, \u0447\u0430\u0441\u0442\u0438\u043d\u0430 \u043a\u043e\u0434\u0443, \u0449\u043e \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454 \u0437\u0430 \u0440\u0435\u043d\u0434\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432, \u0434\u0443\u0431\u043b\u044e\u0454\u0442\u044c\u0441\u044f \u0432 \u043e\u0431\u043e\u0445 \u0442\u0435\u0441\u0442\u0430\u0445. \u0410\u0431\u0438 \u0443\u043d\u0438\u043a\u043d\u0443\u0442\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u044c, \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>setup<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function setup() {\n  return render(\n    &lt;MemoryRouter>\n      &lt;App \/>\n    &lt;\/MemoryRouter>\n  );\n}\n\n...\n\ndescribe('Subreddit form', () => {\n  test('loads posts and renders them on the page', () => {\n    setup();\n  });\n});\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0454\u043c\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>setup<\/code>&nbsp;\u043d\u0430 \u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u043a\u043e\u0436\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443.<\/p>\n\n\n\n<h2 id=\"\u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f-\u0437-\u0444\u043e\u0440\u043c\u043e\u044e\"><strong>\u0412\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f \u0437 \u0444\u043e\u0440\u043c\u043e\u044e<\/strong><\/h2>\n\n\n\n<p>\u041f\u043e\u0432\u0435\u0440\u043d\u0435\u043c\u043e\u0441\u044c \u0434\u043e \u043f\u0435\u0440\u0448\u043e\u0433\u043e \u043a\u0440\u043e\u043a\u0443 \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u0443, \u0430 \u0441\u0430\u043c\u0435:<em>\u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0443 \u043f\u043e\u043b\u0456 \u0444\u043e\u0440\u043c\u0438 \u0442\u0430 \u043a\u043b\u0456\u043a\u0430\u0454 \u00absubmit\u00bb<\/em>.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0448 \u043d\u0456\u0436 \u043c\u0438 \u0441\u043f\u0440\u043e\u0431\u0443\u0454\u043c\u043e \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0443, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0454\u043c\u043e&nbsp;<code>screen.debug()<\/code>&nbsp;\u0434\u043b\u044f \u0432\u0438\u0432\u043e\u0434\u0443 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/W4Hy89HT\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0411\u0430\u0447\u0438\u043c\u043e, \u0449\u043e \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0443 \u043c\u0430\u0454 \u043f\u043e\u0437\u043d\u0430\u0447\u043a\u0443&nbsp;<code>r\/<\/code>. \u0429\u0435 \u0440\u0430\u0437 \u0437\u0432\u0435\u0440\u043d\u0435\u043c\u043e\u0441\u044c \u0434\u043e \u043f\u0435\u0440\u0435\u043b\u0456\u043a\u0443&nbsp;<a href=\"https:\/\/testing-library.com\/docs\/guide-which-query\" target=\"_blank\" rel=\"noreferrer noopener\">\u043f\u0440\u0456\u043e\u0440\u0438\u0442\u0435\u0442\u0456\u0432 \u0444\u0443\u043d\u043a\u0446\u0456\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432<\/a>. \u0411\u0430\u0447\u0438\u043c\u043e, \u0449\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>getByLabelText<\/code>&nbsp;\u2014 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0438\u0439 \u0441\u043f\u043e\u0441\u0456\u0431 \u0434\u043b\u044f \u0437\u043d\u0430\u0445\u043e\u0434\u0436\u0435\u043d\u043d\u044f \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u0438.<\/p>\n\n\n\n<p>\u0429\u043e\u0431 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f\u0442\u0438 \u0437 \u043f\u043e\u043b\u0435\u043c \u0442\u0430 \u0432\u0432\u043e\u0434\u0438\u0442\u0438 \u0442\u0443\u0434\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f, \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>type<\/code>&nbsp;\u0437&nbsp;<code>@testing-library\/user-event<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>setup();\n\nconst subredditInput = screen.getByLabelText('r \/');\nuserEvent.type(subredditInput, 'reactjs');\n<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u043b\u0456 \u0442\u0440\u0435\u0431\u0430 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u0438 \u0434\u0430\u043d\u0456 \u0444\u043e\u0440\u043c\u0438. \u042f\u043a\u0449\u043e \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u0438\u0441\u044c \u0434\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0456\u0457&nbsp;<code>screen.debug()<\/code>, \u043c\u043e\u0436\u043d\u0430 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438, \u0449\u043e \u0444\u043e\u0440\u043c\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443. \u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u0456\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>getByRole<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const subredditInput = screen.getByLabelText('r \/');\nuserEvent.type(subredditInput, 'reactjs');\n\nconst submitButton = screen.getByRole('button', { name: \/search\/i });\nuserEvent.click(submitButton);\n\nscreen.debug();\n<\/code><\/pre>\n\n\n\n<p>\u0412 \u043a\u0456\u043d\u0446\u0456 \u0442\u0435\u0441\u0442\u0443 \u043c\u0438 \u0434\u043e\u0434\u0430\u043b\u0438 \u0449\u0435 \u043e\u0434\u0438\u043d \u0432\u0438\u043a\u043b\u0438\u043a&nbsp;<code>debug<\/code>, \u0430\u0431\u0438 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438, \u044f\u043a\u0438\u043c \u0431\u0443\u0434\u0435 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043d\u0430 \u0446\u044c\u043e\u043c\u0443 \u0435\u0442\u0430\u043f\u0456.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/vZBFv6Z7\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0411\u0430\u0447\u0438\u043c\u043e, \u0449\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043f\u0438\u0441 \u00abIs loading\u00bb. \u0410 \u0446\u0435 \u0441\u0430\u043c\u0435 \u0442\u0430 \u043f\u043e\u0432\u0435\u0434\u0456\u043d\u043a\u0430, \u043d\u0430 \u044f\u043a\u0443 \u043c\u0438 \u043e\u0447\u0456\u043a\u0443\u0454\u043c\u043e \u043f\u0456\u0441\u043b\u044f \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445 \u0444\u043e\u0440\u043c\u0438.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/15XJC0Dz\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"\u0434\u043e\u0441\u0442\u0443\u043f-\u0434\u043e-\u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430-\u0431\u0435\u0437-aria-\u0440\u043e\u043b\u0456\"><strong>\u0414\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 ARIA-\u0440\u043e\u043b\u0456<\/strong><\/h2>\n\n\n\n<p>\u0414\u0440\u0443\u0433\u0438\u043c \u043a\u0440\u043e\u043a\u043e\u043c \u043d\u0430\u0448\u043e\u0433\u043e \u0442\u0435\u0441\u0442-\u043a\u0435\u0439\u0441\u0443 \u0431\u0443\u043b\u043e \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f, \u043a\u043e\u043b\u0438 \u0442\u0440\u0438\u0432\u0430\u0454 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445.<\/p>\n\n\n\n<p>\u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u043e\u0433\u043e\u0440\u0442\u0430\u0454\u0442\u044c\u0441\u044f \u0443 \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0438\u0439&nbsp;<code>div<\/code>, \u0443 \u043d\u0430\u0441 \u043d\u0435\u043c\u0430\u0454 ARIA-\u0440\u043e\u043b\u0456 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e&nbsp;<a href=\"https:\/\/testing-library.com\/docs\/guide-which-query\" target=\"_blank\" rel=\"noreferrer noopener\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0457 Testing Library<\/a>, \u0432 \u0442\u0430\u043a\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u043a\u0440\u0430\u0449\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e&nbsp;<code>getByText<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>userEvent.click(submitButton);\n\nexpect(screen.getByText(\/is loading\/i)).toBeInTheDocument();\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0438\u043c \u0447\u0430\u0441\u043e\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043a\u0440\u043e\u043a\u0443:&nbsp;<em>\u043f\u043e\u043a\u0430\u0437\u0443\u0454\u043c\u043e \u0434\u0430\u043d\u0456, \u043a\u043e\u043b\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/em><\/p>\n\n\n\n<h2 id=\"\u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f-\u0434\u0430\u043d\u0438\u0445\"><strong>\u041e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445<\/strong><\/h2>\n\n\n\n<p>\u041c\u0438 \u0432\u0436\u0435 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0434\u0430\u043d\u0456 \u0444\u043e\u0440\u043c\u0438 \u0439 \u043f\u043e\u0431\u0430\u0447\u0438\u043b\u0438 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f. \u0410 \u0446\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0454, \u0449\u043e API-\u0437\u0430\u043f\u0438\u0442 \u0437\u0434\u0456\u0439\u0441\u043d\u0435\u043d\u043e, \u043e\u0434\u043d\u0430\u043a \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0434\u043e\u0441\u0456 \u043d\u0435 \u043e\u0442\u0440\u0438\u043c\u0430\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0429\u043e\u0431 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438, \u0447\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0443\u0432\u0430\u0442\u0438\u043c\u0443\u0442\u044c\u0441\u044f \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u0456 \u0434\u0430\u043d\u0456, \u0442\u0440\u0435\u0431\u0430 \u043f\u043e\u0447\u0435\u043a\u0430\u0442\u0438 \u043d\u0430 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c.<\/p>\n\n\n\n<p>\u0414\u043e\u0441\u0456 \u043c\u0438 \u043c\u0430\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0443 \u043b\u0438\u0448\u0435 \u0437 \u0444\u0443\u043d\u043a\u0446\u0456\u044f\u043c\u0438&nbsp;<code>getBy<\/code>. \u0410\u043b\u0435 \u043d\u0430 \u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u0437&#8217;\u044f\u0441\u0443\u0432\u0430\u043b\u0438, \u0449\u043e \u0446\u0456 \u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0456. \u0422\u043e\u0431\u0442\u043e \u0432\u043e\u043d\u0438 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044e\u0442\u044c \u0437 \u043f\u043e\u0442\u043e\u0447\u043d\u0438\u043c \u0441\u0442\u0430\u043d\u043e\u043c \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443: \u044f\u043a\u0449\u043e \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435\u043c\u0430\u0454, \u0432\u0438\u043d\u0438\u043a\u0430\u0454 \u043f\u043e\u043c\u0438\u043b\u043a\u0430.<\/p>\n\n\n\n<p>\u0421\u0430\u043c\u0435 \u0447\u0430\u0441 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0434\u043e \u0456\u043d\u0448\u043e\u0433\u043e \u0442\u0438\u043f\u0443 \u0437\u0430\u043f\u0438\u0442\u0456\u0432: \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0456 \u0444\u0443\u043d\u043a\u0446\u0456\u0457&nbsp;<code>findBy<\/code>, \u044f\u043a\u0456 \u0447\u0435\u043a\u0430\u044e\u0442\u044c \u0449\u043e\u043d\u0430\u0439\u0431\u0456\u043b\u044c\u0448\u0435 5 \u0441\u0435\u043a\u0443\u043d\u0434, \u0434\u043e\u043a\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0437&#8217;\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0448 \u043d\u0456\u0436 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u043e \u0446\u044c\u043e\u0433\u043e, \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u043c\u043e \u0456\u0434\u0435\u043d\u0442\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041c\u0438 \u0437\u043d\u0430\u0454\u043c\u043e, \u0449\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043f\u043e\u043a\u0430\u0437\u0443\u0454 \u043a\u0456\u043b\u044c\u043a\u0456\u0441\u0442\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0438\u0445 \u0434\u043e\u043f\u0438\u0441\u0456\u0432 \u043f\u0456\u0434 \u0444\u043e\u0440\u043c\u043e\u044e, \u043a\u043e\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u0438\u043a\u043e\u043d\u0443\u0454\u0442\u044c\u0441\u044f \u0443\u0441\u043f\u0456\u0448\u043d\u043e. \u0422\u0435\u043a\u0441\u0442, \u044f\u043a\u0438\u0439 \u043c\u0438 \u043e\u0447\u0456\u043a\u0443\u0454\u043c\u043e \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438:<em>\u00abNumber of top posts: &#8230;\u00bb<\/em>. \u0422\u043e\u0436 \u043d\u0430\u043c \u043f\u0456\u0434\u0456\u0439\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>findByText<\/code>.<\/p>\n\n\n\n<p>\u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043c\u0438 \u043d\u0430\u043f\u0435\u0440\u0435\u0434 \u043d\u0435 \u0437\u043d\u0430\u0454\u043c\u043e, \u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0431\u0443\u0434\u0435 \u0434\u043e\u043f\u0438\u0441\u0456\u0432, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0454\u043c\u043e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0438\u0439 \u0432\u0438\u0440\u0430\u0437. \u041f\u0430\u043c&#8217;\u044f\u0442\u0430\u0454\u0442\u0435, \u0449\u043e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0456 \u0432\u0438\u0440\u0430\u0437\u0438 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442\u044c \u0437\u043d\u0430\u0439\u0442\u0438 \u0440\u044f\u0434\u043e\u043a \u0437\u0430 \u0439\u043e\u0433\u043e \u0447\u0430\u0441\u0442\u0438\u043d\u043e\u044e?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>test('loads posts and renders them on the page', async () => {\n  setup();\n\n  const subredditInput = screen.getByLabelText('r \/');\n  userEvent.type(subredditInput, 'reactjs');\n\n  const submitButton = screen.getByRole('button', { name: \/search\/i });\n  userEvent.click(submitButton);\n\n  const loadingMessage = screen.getByText(\/is loading\/i);\n  expect(loadingMessage).toBeInTheDocument();\n\n  const numberOfTopPosts = await screen.findByText(\/number of top posts:\/i);\n  screen.debug(numberOfTopPosts);\n});\n<\/code><\/pre>\n\n\n\n<p>\u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>findByText<\/code>&nbsp;\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438&nbsp;<code>await<\/code>. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0434\u043e\u0434\u0430\u0454\u043c\u043e \u043a\u043b\u044e\u0447\u043e\u0432\u0435 \u0441\u043b\u043e\u0432\u043e&nbsp;<code>async<\/code>&nbsp;\u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0456\u0454\u044e.<\/p>\n\n\n\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442&nbsp;<code>debug<\/code>&nbsp;\u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u043d\u0430 \u0446\u044c\u043e\u043c\u0443 \u0435\u0442\u0430\u043f\u0456:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/B6kHmzD5\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0422\u0435\u0441\u0442 \u043f\u0440\u043e\u0439\u0448\u043e\u0432, \u0430\u0434\u0436\u0435 \u0434\u0430\u043d\u0456 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u0431\u0443\u043b\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e. \u0422\u043e\u0436 \u043c\u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043b\u0438 \u0442\u0430\u043a\u0456 \u043a\u0440\u043e\u043a\u0438 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0457 \u0437 \u0444\u043e\u0440\u043c\u043e\u044e:<\/p>\n\n\n\n<ol><li>\u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0443 \u043f\u043e\u043b\u0456 \u0444\u043e\u0440\u043c\u0438 \u0442\u0430 \u043d\u0430\u0442\u0438\u0441\u043a\u0430\u0454 \u00absubmit\u00bb.<\/li><li>\u0417\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u043f\u043e\u043a\u0430\u0437\u0443\u0454 \u0441\u0442\u0430\u043d \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f, \u0434\u043e\u043a\u0438 \u0447\u0435\u043a\u0430\u0454 \u043d\u0430 \u0434\u0430\u043d\u0456.<\/li><li>\u041a\u043e\u043b\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u043d\u0430\u0440\u0435\u0448\u0442\u0456 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c, \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u044c\u0441\u044f \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u0456 \u0434\u0430\u043d\u0456.<\/li><\/ol>\n\n\n\n<p>\u041e\u0434\u043d\u0430\u043a \u0446\u0435 \u043d\u0435 \u0432\u0441\u0435, \u0437\u0430\u043b\u0438\u0448\u0438\u043b\u0430\u0441\u044c \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u0430 \u0434\u0435\u0442\u0430\u043b\u044c.<\/p>\n\n\n\n<h2 id=\"\u0456\u043c\u0456\u0442\u0430\u0446\u0456\u044f-api-\u0437\u0430\u043f\u0438\u0442\u0456\u0432\"><strong>\u0406\u043c\u0456\u0442\u0430\u0446\u0456\u044f API-\u0437\u0430\u043f\u0438\u0442\u0456\u0432<\/strong><\/h2>\n\n\n\n<p>\u0412\u0438, \u043c\u0430\u0431\u0443\u0442\u044c, \u043f\u043e\u043c\u0456\u0442\u0438\u043b\u0438, \u0449\u043e \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0442\u0435\u0441\u0442\u0443 \u0437\u0430\u0439\u043c\u0430\u0454 \u0434\u043e\u0441\u0438\u0442\u044c \u0431\u0430\u0433\u0430\u0442\u043e \u0447\u0430\u0441\u0443. \u0412\u0441\u0435 \u0442\u043e\u043c\u0443, \u0449\u043e \u043c\u0438 \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u0454\u043c\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u0437\u0430\u043f\u0438\u0442 \u043d\u0430 Reddit API. \u0422\u0430\u043a\u0435 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0454\u0442\u044c\u0441\u044f \u0440\u043e\u0431\u0438\u0442\u0438 \u043f\u0456\u0434 \u0447\u0430\u0441 \u0456\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0456\u0439\u043d\u0438\u0445 \u0442\u0435\u0441\u0442\u0456\u0432 \u0437 \u0434\u0435\u043a\u0456\u043b\u044c\u043a\u043e\u0445 \u043f\u0440\u0438\u0447\u0438\u043d:<\/p>\n\n\n\n<ol><li>API-\u0437\u0430\u043f\u0438\u0442\u0438 \u0437\u0430\u0439\u043c\u0430\u044e\u0442\u044c \u0431\u0430\u0433\u0430\u0442\u043e \u0447\u0430\u0441\u0443. \u0417\u0430\u0437\u0432\u0438\u0447\u0430\u0439 \u0456\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0456\u0439\u043d\u0456 \u0442\u0435\u0441\u0442\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u044c\u0441\u044f \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0456\u0439 \u043c\u0430\u0448\u0438\u043d\u0456, \u043f\u0435\u0440\u0448 \u043d\u0456\u0436 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u0438 \u043a\u043e\u0434 \u0434\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u044e. \u0422\u0430\u043a\u043e\u0436 \u0447\u0430\u0441\u0442\u043e \u0442\u0430\u043a\u0456 \u0442\u0435\u0441\u0442\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u044c\u0441\u044f \u043f\u0456\u0434 \u0447\u0430\u0441 CI-\u043f\u0440\u043e\u0446\u0435\u0441\u0456\u0432. \u041a\u043e\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u0430\u0433\u0430\u0442\u043e \u0442\u0435\u0441\u0442\u0456\u0432 \u0456\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u043c\u0438 \u0437\u0430\u043f\u0438\u0442\u0430\u043c\u0438, \u0457\u0445 \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0442\u0440\u0438\u0432\u0430\u0454 \u0434\u043e\u0441\u0438\u0442\u044c \u0434\u043e\u0432\u0433\u043e \u0456 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043f\u043b\u0438\u0432\u0430\u0454 \u043d\u0430 \u0448\u0432\u0438\u0434\u043a\u0456\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044f \u043a\u043e\u0434\u0443.<\/li><li>\u041c\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e\u0432\u0430\u0442\u0438 API-\u0437\u0430\u043f\u0438\u0442\u0438. \u0412 \u0456\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0456\u0439\u043d\u0438\u0445 \u0442\u0435\u0441\u0442\u0430\u0445 \u043c\u0438 \u0445\u043e\u0447\u0435\u043c\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438 \u0440\u0456\u0437\u043d\u0456 \u0441\u0442\u0430\u043d\u0438 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438, \u044f\u043a \u0431\u0443\u0434\u0435 \u043f\u043e\u0432\u043e\u0434\u0438\u0442\u0438\u0441\u044c \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a, \u044f\u043a\u0449\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0438 \u043d\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0442\u0438\u043c\u0443\u0442\u044c. \u0417\u0430\u0437\u0432\u0438\u0447\u0430\u0439 \u043c\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c\u043e \u0441\u043f\u0440\u043e\u0432\u043e\u043a\u0443\u0432\u0430\u0442\u0438 \u0437\u0431\u0456\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0456\u0434 \u0447\u0430\u0441 \u0442\u0435\u0441\u0442\u0443. \u041e\u0434\u043d\u0430\u043a \u043c\u0438 \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u0435\u043c\u043e \u0456\u043c\u0456\u0442\u0443\u0432\u0430\u0442\u0438 \u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u0442\u0438\u043f \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0456 \u0456\u0437 \u0437\u0430\u043c\u043e\u043a\u0430\u043d\u0438\u043c \u0437\u0430\u043f\u0438\u0442\u043e\u043c.<\/li><li>\u041d\u0430\u0448 \u0442\u0435\u0441\u0442 \u043c\u043e\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0439\u0442\u0438, \u043d\u0430\u0432\u0456\u0442\u044c \u044f\u043a\u0449\u043e \u0437 \u043a\u043e\u0434\u043e\u043c \u0432\u0441\u0435 \u0434\u043e\u0431\u0440\u0435. \u0423\u0441\u0435 \u0442\u043e\u043c\u0443, \u0449\u043e API \u043d\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0432 \u0442\u0430\u043a, \u044f\u043a \u043c\u0438 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043b\u0438 (\u044f\u043a\u0449\u043e \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0438\u0439\u0448\u043e\u0432 \u0437 \u043b\u0430\u0434\u0443, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434). \u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0456\u0439 \u0442\u0430\u043a\u043e\u0436 \u0441\u043b\u0456\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438, \u043e\u0434\u043d\u0430\u043a \u0446\u0435 \u0431\u0443\u0434\u0443\u0442\u044c \u0442\u0435\u0441\u0442\u0438 end-to-end, \u0430 \u043d\u0435 \u0456\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0456\u0439\u043d\u0456.<\/li><\/ol>\n\n\n\n<p>\u0421\u043f\u043e\u0434\u0456\u0432\u0430\u0454\u043c\u043e\u0441\u044c, \u0432\u0438 \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u043b\u0438, \u0447\u043e\u043c\u0443 \u0432\u0430\u0436\u043b\u0438\u0432\u043e \u043c\u043e\u043a\u0430\u0442\u0438 API-\u0437\u0430\u043f\u0438\u0442\u0438. \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u043e \u043d\u0430\u0448\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443.<\/p>\n\n\n\n<p>\u0410\u0431\u0438 \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u0438 \u0437\u0430\u043f\u0438\u0442, \u043d\u0430\u0439\u043f\u0435\u0440\u0448\u0435 \u0441\u043b\u0456\u0434 \u0434\u0456\u0437\u043d\u0430\u0442\u0438\u0441\u044c, \u044f\u043a \u0432\u0456\u043d \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u0454\u0442\u044c\u0441\u044f. \u0420\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u0437\u0430\u043f\u0438\u0442\u0443 \u0440\u043e\u0437\u0442\u0430\u0448\u043e\u0432\u0430\u043d\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456&nbsp;<code>Home<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Home() {\n  const &#91;posts, setPosts] = useState(&#91;]);\n  const &#91;status, setStatus] = useState('idle')\n\n  const onSearch = async (subreddit) => {\n    setStatus('loading');\n    const url = `https:\/\/www.reddit.com\/r\/${subreddit}\/top.json`;\n    const response = await fetch(url);\n    const { data } = await response.json();\n    setPosts(data.children);\n    setStatus('resolved');\n  };\n  \n  ...\n<\/code><\/pre>\n\n\n\n<p>\u0429\u043e\u0431 \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u0438 \u0437\u0430\u043f\u0438\u0442 \u0437&nbsp;<code>fetch<\/code>, \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 npm-\u043f\u0430\u043a\u0435\u0442&nbsp;<a href=\"https:\/\/github.com\/jefflau\/jest-fetch-mock\" target=\"_blank\" rel=\"noreferrer noopener\">jest-fetch-mock<\/a>. \u0421\u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u043e \u0439\u043e\u0433\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn jest-fetch-mock\n<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0454\u043c\u043e \u0442\u0430 \u0456\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0443\u0454\u043c\u043e \u043c\u043e\u0434\u0443\u043b\u044c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import fetchMock from 'jest-fetch-mock';\n\nfetchMock.enableMocks();\n<\/code><\/pre>\n\n\n\n<p>\u0417\u0430\u0440\u0430\u0437 \u043d\u0430\u0448 \u0442\u0435\u0441\u0442 \u043d\u0435 \u0431\u0443\u0434\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u0438, \u0430\u0434\u0436\u0435 \u043c\u0438 \u0449\u0435 \u043d\u0435 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u0438\u043b\u0438 \u0437\u0430\u043c\u043e\u043a\u0430\u043d\u043e\u043c\u0443 \u0437\u0430\u043f\u0438\u0442\u0443, \u044f\u043a\u0456 \u0434\u0430\u043d\u0456 \u0432\u0456\u0434\u0434\u0430\u0432\u0430\u0442\u0438.<\/p>\n\n\n\n<p>\u0429\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0437\u0430\u043c\u043e\u043a\u0430\u043d\u0443 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0442\u0440\u0435\u0431\u0430 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0434\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0412\u0456\u0434\u043a\u0440\u0438\u0432\u0430\u0454\u043c\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Network \u0432 dev-tools, \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0454\u043c\u043e \u0434\u0430\u043d\u0456 \u0444\u043e\u0440\u043c\u0438 \u0439 \u043a\u043e\u043f\u0456\u044e\u0454\u043c\u043e \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c, \u044f\u043a\u0430 \u043f\u0440\u0438\u0439\u0448\u043b\u0430.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.postimg.cc\/QdS3cZGz\/image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e json-\u0444\u0430\u0439\u043b \u0442\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0454\u043c\u043e \u0442\u0443\u0434\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0414\u0430\u043b\u0456 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0454\u043c\u043e&nbsp;<code>fetch.once<\/code>, \u0430\u0431\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0456\u043c\u0456\u0442\u043e\u0432\u0430\u043d\u0443 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import mockResponse from '.\/__mocks__\/subreddit-reactjs-response.json';\n\n...\n\ntest('loads posts and renders them on the page', async () => {\n  fetch.once(JSON.stringify(mockResponse));\n  setup();\n  ...\n<\/code><\/pre>\n\n\n\n<p>\u041d\u0430\u0440\u0435\u0448\u0442\u0456 \u0442\u0435\u0441\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c. \u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043c\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u043c\u043e \u0456\u043c\u0456\u0442\u043e\u0432\u0430\u043d\u0443 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c, \u044f\u043a\u0443 \u043c\u043e\u0436\u0435\u043c\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e\u0432\u0430\u0442\u0438, \u0442\u043e \u043c\u043e\u0436\u043d\u0430 \u0431\u0456\u043b\u044c\u0448 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u043d\u0430\u0448 \u0442\u0435\u0441\u0442 \u0456 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u0442\u0438 \u043d\u0430 \u0442\u043e\u0447\u043d\u0443 \u043a\u0456\u043b\u044c\u043a\u0456\u0441\u0442\u044c \u0434\u043e\u043f\u0438\u0441\u0456\u0432 (\u0432 \u043d\u0430\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u0446\u0435 25).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>expect(await screen.findByText(\/number of top posts: 25\/i)).toBeInTheDocument();\n<\/code><\/pre>\n\n\n\n<p><em>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443: \u044f\u043a\u0449\u043e \u0432\u0430\u0448 \u0437\u0430\u043f\u0438\u0442 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0454 \u0431\u0430\u0433\u0430\u0442\u043e API-\u0437\u0430\u043f\u0438\u0442\u0456\u0432, \u0442\u043e \u0457\u0445 \u0456\u043c\u0456\u0442\u0430\u0446\u0456\u044f \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0433\u0440\u043e\u043c\u0456\u0437\u0434\u043a\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u043e\u043c. \u041f\u043e\u043b\u0435\u0433\u0448\u0438\u0442\u0438 \u0439\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435 \u043f\u0430\u043a\u0435\u0442&nbsp;<a href=\"https:\/\/github.com\/mswjs\/msw\" target=\"_blank\" rel=\"noreferrer noopener\">MSW<\/a>. \u0411\u0456\u043b\u044c\u0448\u0435 \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0457 \u043f\u0440\u043e \u043d\u044c\u043e\u0433\u043e&nbsp;<a href=\"https:\/\/kentcdodds.com\/blog\/stop-mocking-fetch\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a>.<\/em><\/p>\n\n\n\n<h2 id=\"\u0442\u0435\u0441\u0442\u0443\u0454\u043c\u043e-\u0437\u0430\u043c\u043e\u043a\u0430\u043d\u0456-\u0444\u0443\u043d\u043a\u0446\u0456\u0457\"><strong>\u0422\u0435\u0441\u0442\u0443\u0454\u043c\u043e \u0437\u0430\u043c\u043e\u043a\u0430\u043d\u0456 \u0444\u0443\u043d\u043a\u0446\u0456\u0457<\/strong><\/h2>\n\n\n\n<p>\u041d\u0430\u043e\u0441\u0442\u0430\u043d\u043e\u043a \u043d\u0430\u043c \u0432\u0430\u0440\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438, \u0447\u0438 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u044e\u0442\u044c\u0441\u044f \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0456 API-\u0435\u043d\u0434\u043f\u043e\u0456\u043d\u0442\u0438. \u0422\u0430\u043a \u043c\u0438 \u043f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0454\u043c\u043e\u0441\u044c, \u0449\u043e \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0456 \u043f\u043e\u0431\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0456 \u0434\u0430\u043d\u0456.<\/p>\n\n\n\n<p>\u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043c\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u043c\u043e&nbsp;<code>jest-mock-fetch<\/code>, \u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u044f&nbsp;<code>fecth<\/code>&nbsp;\u043c\u043e\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e. \u0422\u043e\u0436 \u0434\u043b\u044f \u043d\u0430\u0448\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443 \u0456\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u0456\u0434\u0456\u0439\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0456\u044f Jest&nbsp;<a href=\"https:\/\/jestjs.io\/docs\/en\/expect#tohavebeencalledwitharg1-arg2-\" target=\"_blank\" rel=\"noreferrer noopener\"><code>toHaveBeenCalledWith<\/code><\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>expect(fetch).toHaveBeenCalledWith('https:\/\/www.reddit.com\/r\/reactjs\/top.json');\n<\/code><\/pre>\n\n\n\n<p><em>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443: \u0434\u0435\u043a\u043e\u043b\u0438 \u0432\u0430\u043c \u0434\u043e\u0432\u0435\u0434\u0435\u0442\u044c\u0441\u044f \u043c\u043e\u043a\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e. \u0417 Jest \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u043d\u043e\u0432\u0443 \u0437\u0430\u043c\u043e\u043a\u0430\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e&nbsp;<a href=\"https:\/\/jestjs.io\/docs\/en\/jest-object#jestfnimplementation\" target=\"_blank\" rel=\"noreferrer noopener\"><code>jest.fn()<\/code><\/a>. \u041f\u0456\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c&nbsp;<code>jest-mock-fetch<\/code>&nbsp;\u0442\u0430\u043a\u043e\u0436 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454 \u0442\u0430\u043a\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434.<\/em><\/p>\n\n\n\n<p>\u041f\u043e\u0432\u043d\u0438\u0439 \u043a\u043e\u0434 \u0442\u0435\u0441\u0442\u0443 \u0431\u0443\u0434\u0435 \u043e\u0441\u044c \u0442\u0430\u043a\u0438\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>describe('Subreddit form', () => {\n  test('loads posts and renders them on the page', async () => {\n    fetch.once(JSON.stringify(mockResponse));\n    setup();\n\n    const subredditInput = screen.getByLabelText('r \/');\n    userEvent.type(subredditInput, 'reactjs');\n\n    const submitButton = screen.getByRole('button', { name: \/search\/i });\n    userEvent.click(submitButton);\n\n    expect(screen.getByText(\/is loading\/i)).toBeInTheDocument();\n\n    expect(await screen.findByText(\/Number of top posts: 25\/i)).toBeInTheDocument();\n    expect(fetch).toHaveBeenCalledWith('https:\/\/www.reddit.com\/r\/reactjs\/top.json');\n  });\n});\n<\/code><\/pre>\n\n\n\n<h2 id=\"\u043f\u0456\u0441\u043b\u044f\u043c\u043e\u0432\u0430\"><strong>\u041f\u0456\u0441\u043b\u044f\u043c\u043e\u0432\u0430<\/strong><\/h2>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0432\u0435\u0441\u044c \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b, \u0442\u043e \u0432\u0436\u0435 \u0437\u0440\u043e\u0431\u0438\u043b\u0438 \u0432\u0435\u043b\u0438\u043a\u0438\u0439 \u043a\u0440\u043e\u043a \u0432\u043f\u0435\u0440\u0435\u0434 \u0434\u043e \u0432\u043f\u0435\u0432\u043d\u0435\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432.<\/p>\n\n\n\n<p>\u041f\u0430\u043c&#8217;\u044f\u0442\u0430\u0439\u0442\u0435 \u043f\u0440\u043e \u0442\u0430\u043a\u0456 \u0432\u0430\u0436\u043b\u0438\u0432\u0456 \u043c\u043e\u043c\u0435\u043d\u0442\u0438:<\/p>\n\n\n\n<ol><li>\u0422\u0435\u0441\u0442\u0443\u0439\u0442\u0435 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0437 \u043f\u043e\u0433\u043b\u044f\u0434\u0443 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430.<\/li><li>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0439\u0442\u0435&nbsp;<code>screen.debug()<\/code>, \u044f\u043a\u0449\u043e \u043d\u0435 \u0432\u043f\u0435\u0432\u043d\u0435\u043d\u0456, \u0449\u043e \u0432\u0456\u0434\u0431\u0443\u0432\u0430\u0454\u0442\u044c\u0441\u044f \u0456\u0437 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u043e\u043c.<\/li><li>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0456\u0457&nbsp;<code>getByRole<\/code>,&nbsp;<code>findByRole<\/code>, \u0449\u043e\u0431 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u0434\u0435\u0440\u0435\u0432\u0430 DOM, \u0434\u0435 \u0446\u0435 \u043c\u043e\u0436\u043b\u0438\u0432\u043e.<\/li><\/ol>\n\n\n\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0445\u043e\u0442\u0456\u043b\u0438 \u0431 \u0449\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u0438 \u043d\u0430 \u0442\u0435\u043c\u0443 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f, \u0442\u043e \u0431\u0456\u043b\u044c\u0448 \u043f\u0440\u043e\u0441\u0443\u043d\u0443\u0442\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b \u043f\u0440\u043e \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0442\u0430 \u043d\u0430\u043b\u0430\u0433\u043e\u0434\u0436\u0435\u043d\u043d\u044f \u0442\u0435\u0441\u0442\u0456\u0432&nbsp;<a href=\"https:\/\/jkettmann.com\/refactoring-and-debugging-a-react-test\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0437\u0430 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0421\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0437\u0430\u043f\u0438\u0442\u0430\u0442\u0438 \u0443 \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432 \u043f\u0440\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0456 \u043f\u0435\u0440\u0435\u0432\u0430\u0433\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f. \u0406\u043c\u043e\u0432\u0456\u0440\u043d\u043e, \u0432\u0438 \u043f\u043e\u0447\u0443\u0454\u0442\u0435 \u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0456 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0438:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1499"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1499"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1499\/revisions"}],"predecessor-version":[{"id":1500,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1499\/revisions\/1500"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}