{"id":23222,"date":"2023-09-27T08:08:26","date_gmt":"2023-09-26T23:08:26","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=23222"},"modified":"2023-09-27T08:11:05","modified_gmt":"2023-09-26T23:11:05","slug":"%e3%80%90react%e3%80%91settimeout%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=23222","title":{"rendered":"\u3010React\u3011setTimeout\u306e\u30c6\u30b9\u30c8"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>import { useState } from \"react\";\r\n\r\nconst setTimeoutComponent: React.FC = () => {\r\n  const &#91;text, setText] = useState(\"\u521d\u671f\u5024\");\r\n\r\n  const updateText = async () => {\r\n    setText(\"Loading...\");\r\n    setTimeout(() => {\r\n      setText(\"\u66f4\u65b0\u5024\");\r\n    }, 2000);\r\n  };\r\n\r\n  return (\r\n    &lt;div>\r\n      &lt;button onClick={updateText}>Update Text&lt;\/button>\r\n      &lt;p>{text}&lt;\/p>\r\n    &lt;\/div>\r\n  );\r\n};\r\n\r\nexport default AsyncComponent;\r\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import {render,screen,waitFor} from \"@testing-library\/react\";\r\nimport userEvent from \"@testing-library\/user-event\"\r\nimport setTimeoutComponent from \".\/setTimeoutComponent\"\r\n\r\nconst user = userEvent.setup();\r\n\r\ndescribe(\"setTimeoutComponent\",()=>{\r\n    it(\"\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u975e\u540c\u671f\u51e6\u7406\u304c\u5b9f\u884c\u3055\u308c\u308b\",async ()=>{\r\n        render(&lt;setTimeoutComponent \/>)\r\n        expect(screen.getByText(\"\u521d\u671f\u5024\")).toBeInTheDocument();\r\n\r\n        const button = screen.getByRole(\"button\");\r\n        await user.click(button)\r\n        expect(screen.getByText(\"Loading...\")).toBeInTheDocument();\r\n        await waitFor(()=>{\r\n            expect(screen.getByText(\"\u66f4\u65b0\u5024\")).toBeInTheDocument();\r\n        },{\r\n            interval: 50,\r\n            timeout: 3000\r\n        })\r\n    })\r\n})<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">waitFor<\/h3>\n\n\n\n<p>setTimeout\u306e\u7d50\u679c\u3092\u5f85\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">interval<\/h4>\n\n\n\n<p>\u30ea\u30c8\u30e9\u30a4\u307e\u3067\u306e\u9593\u9694\u3092\u30df\u30ea\u79d2\u3067\u6307\u5b9a<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">timeout<\/h4>\n\n\n\n<p>\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u307e\u3067\u306e\u6642\u9593\u3092\u30df\u30ea\u79d2\u3067\u6307\u5b9a\u3002\u30c6\u30b9\u30c8\u5bfe\u8c61\u306e\u30b3\u30fc\u30c9\u306esetTimeout\u306e\u30df\u30ea\u79d2\u304c2000\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u4f59\u88d5\u3092\u3082\u3063\u30663000\u306a\u3069\u3068\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<p>waitFor\u3092\u4f7f\u3063\u305f\u30c6\u30b9\u30c8\u306f\u5b9f\u6642\u9593\u3092\u4f7f\u3046\u306e\u3067\u30c6\u30b9\u30c8\u6642\u9593\u304c\u9577\u304f\u306a\u308a\u304c\u3061\u306b\u306a\u308a\u307e\u3059\u3002\u672c\u5f53\u306b\u3053\u306e\u30c6\u30b9\u30c8\u306f\u5fc5\u8981\u304b\u3069\u3046\u304b\u3092\u6539\u3081\u3066\u691c\u8a0e\u3057\u3066\u3044\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9 waitFor setTimeout\u306e\u7d50\u679c\u3092\u5f85\u3061\u307e\u3059\u3002 interval \u30ea\u30c8\u30e9\u30a4\u307e\u3067\u306e\u9593\u9694\u3092\u30df\u30ea\u79d2\u3067\u6307\u5b9a timeout \u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u307e\u3067\u306e\u6642\u9593\u3092\u30df\u30ea\u79d2\u3067\u6307\u5b9a\u3002\u30c6\u30b9\u30c8\u5bfe\u8c61\u306e\u30b3\u30fc\u30c9\u306esetTimeout\u306e\u30df [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[116],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/23222"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23222"}],"version-history":[{"count":2,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/23222\/revisions"}],"predecessor-version":[{"id":23225,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/23222\/revisions\/23225"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=23222"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=23222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}