{"id":13200,"date":"2021-02-11T18:01:09","date_gmt":"2021-02-11T09:01:09","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=13200"},"modified":"2023-05-27T22:13:47","modified_gmt":"2023-05-27T13:13:47","slug":"%e3%80%90react%e3%80%91%e3%80%8c%e3%83%a2%e3%83%83%e3%82%af%e3%80%8d%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%83%86%e3%82%b9%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=13200","title":{"rendered":"\u3010React\u3011props\u3001\u300c\u30e2\u30c3\u30af\u300d\u3092\u4f7f\u3063\u305f\u30c6\u30b9\u30c8\u3001React Hooks\u306e\u30c6\u30b9\u30c8"},"content":{"rendered":"<p>props\u3067\u6e21\u3059\u3082\u306e\u306b\u3088\u3063\u3066\u306f\u30e2\u30c3\u30af\u3092\u4f7f\u3063\u305f\u308a\u3059\u308b\u5834\u5408\u3082\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001props\u3067\u6e21\u3057\u305f\u5024\u81ea\u4f53\u306e\u30c6\u30b9\u30c8\u3092\u4f5c\u308a\u305f\u3044\u5834\u5408\u3082\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h2>props\u3067list\u3092\u6e21\u3059\u30b1\u30fc\u30b9<\/h2>\n<p>React\u3067\u306flist\u306fmap\u306a\u3069\u3092\u4f7f\u3063\u3066\u8868\u793a\u3055\u305b\u308b\u3053\u3068\u304c\u666e\u901a\u3067\u3059\u3002\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">import React from \"react\";\r\nimport { render, screen } from \"@testing-library\/react\";\r\nimport List from \".\/List\";\r\n\r\ndescribe(\"props\u3067\u5024\u304c\u6e21\u3063\u3066\u3044\u308b\u304b\", () =&gt; {\r\n  it(\"\u3057\u304b\u308b\u3079\u304d\u5024\u304c\u6e21\u3063\u3066\u3044\u308b\u304b\u30c6\u30b9\u30c8\", () =&gt; {\r\n    const data = [\r\n      { id: 1, item: \"\u30c6\u30b9\u30c8\" },\r\n      { id: 2, item: \"\u30c6\u30b9\u30c8\uff11\" },\r\n      { id: 3, item: \"\u30c6\u30b9\u30c82\" },\r\n    ];\r\n    render(&lt;List lists={data} \/&gt;);\r\n    const Items = screen\r\n      .getAllByRole(\"listitem\")\r\n      .map((ele) =&gt; ele.textContent);\r\n    const propsItems = data.map((ele) =&gt; ele.item);\r\n    expect(Items).toEqual(propsItems);\r\n  });\r\n});<\/pre>\n<p>\u307e\u305f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306a\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u3082\u8ffd\u52a0\u3067\u4f5c\u6210\u3059\u308b\u3068\u306a\u304a\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<ul>\n<li>props\u306e\u5024\u3092\u6e21\u3055\u306a\u3044\u5834\u5408<\/li>\n<li>props\u306e\u5024\u304c\u4e0d\u6b63\u306a\u5024\u3060\u3063\u305f\u5834\u5408<\/li>\n<\/ul>\n<h2>props\u306b\u6e21\u3059\u95a2\u6570\u3092\u30e2\u30c3\u30af\u5316\u3059\u308b\u3002<\/h2>\n<h3>props\u3067\u6e21\u3059\u95a2\u6570\u3092\u30e2\u30c3\u30af\u5316\u3057\u3066\u305d\u308c\u304c\u547c\u3070\u308c\u3066\u3044\u308b\u304b\u306e\u30c6\u30b9\u30c8<\/h3>\n<pre class=\"lang:default decode:true\">describe(\"\u6e21\u3057\u305f\u95a2\u6570\u304c\u547c\u3070\u308c\u3066\u3044\u308b\u304b\", () =&gt; {\r\n  it(\"\u6e21\u3057\u305f\u95a2\u6570\u304c\u547c\u3070\u308c\u306a\u3044\u3053\u3068\", () =&gt; {\r\n    const kansu = jest.fn();\r\n    render(&lt;Input kansu={kansu} \/&gt;);\r\n    userEvent.click(screen.getAllByRole(\"button\")[0]); \/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30e2\u30c3\u30af\u95a2\u6570\u304c\u547c\u3070\u308c\u306a\u3044\u305f\u3081\u306e\u4f55\u304b\u3057\u3089\u306euserEvent\r\n    expect(kansu).not.toHaveBeenCalled();\r\n  });\r\n  it(\"\u6e21\u3057\u305f\u95a2\u6570\u304c\u4e00\u5ea6\u547c\u3070\u308c\u308b\u3053\u3068\", () =&gt; {\r\n    const kansu = jest.fn();\r\n    render(&lt;Input kansu={kansu} \/&gt;);\r\n    userEvent.click(screen.getAllByRole(\"button\")[1]); \/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30e2\u30c3\u30af\u95a2\u6570\u3092\u547c\u3076\u305f\u3081\u306e\u4f55\u304b\u3057\u3089\u306euserEvent\r\n    expect(kansu).toHaveBeenCalledTimes(1);\r\n  });\r\n});\r\n<\/pre>\n<h3>jest.fn();<\/h3>\n<p>jest\u306e\u30e2\u30c3\u30af\u95a2\u6570\u3067\u3059\u3002\u4f55\u3082\u6a5f\u80fd\u3092\u6301\u305f\u306a\u3044\u95a2\u6570\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h3>expect(kansu).not.toHaveBeenCalled();<\/h3>\n<p>\u30e2\u30c3\u30af\u95a2\u6570\u304c\u547c\u3070\u308c\u3066\u3044\u306a\u3044\u3053\u3068\u3092\u30c1\u30a7\u30c3\u30af\u3067\u304d\u307e\u3059\u3002<\/p>\n<h3>expect(kansu).toHaveBeenCalledTimes(1);<\/h3>\n<p>\u30e2\u30c3\u30af\u95a2\u6570\u304c\u547c\u3070\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u30c1\u30a7\u30c3\u30af\u3067\u304d\u307e\u3059\u3002\u5f15\u6570\u306f\u30e2\u30c3\u30af\u304c\u547c\u3070\u308c\u305f\u56de\u6570\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>React Hooks\u306e\u30c6\u30b9\u30c8<\/h2>\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u5207\u308a\u96e2\u3057\u3066React Hooks\u5358\u4f53\u306e\u30c6\u30b9\u30c8\u3082\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h3>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n<pre class=\"lang:default decode:true\">npm i @testing-library\/react-hooks\r\nnpm i react-test-renderer<\/pre>\n<h3>\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9<\/h3>\n<pre class=\"lang:default decode:true\">import { \u4f5c\u3063\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 } from \".\/\u4f5c\u3063\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\";\r\nimport { act, renderHook } from \"@testing-library\/react-hooks\";\r\nimport { cleanup } from \"@testing-library\/react\";\r\n\r\nafterEach(() =&gt; cleanup());\r\n\r\ndescribe(\"Hooks\u306e\u30c6\u30b9\u30c8\", () =&gt; {\r\n  it(\"\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\", () =&gt; {\r\n    const { result } = renderHook(() =&gt; \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8(\u521d\u671f\u5024));\r\n    expect(result.current.\u5024(useState\u306a\u3069)).toBe(\u521d\u671f\u5024);\r\n\r\n    act(() =&gt; {\r\n      result.current.\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306e\u95a2\u6570();\r\n    });\r\n    expect(result.current.\u5024(useState\u306a\u3069)).toBe(\u51e6\u7406\u7d50\u679c);\r\n  }\r\n}\r\n<\/pre>\n<h4>result.current<\/h4>\n<p>\u3053\u308c\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306estate\u306e\u5024\u3084\u3001\u95a2\u6570\u306a\u3069\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"props\u3067\u6e21\u3059\u3082\u306e\u306b\u3088\u3063\u3066\u306f\u30e2\u30c3\u30af\u3092\u4f7f\u3063\u305f\u308a\u3059\u308b\u5834\u5408\u3082\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001props\u3067\u6e21\u3057\u305f\u5024\u81ea\u4f53\u306e\u30c6\u30b9\u30c8\u3092\u4f5c\u308a\u305f\u3044\u5834\u5408\u3082\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002 props\u3067list\u3092\u6e21\u3059\u30b1\u30fc\u30b9 React\u3067\u306flist\u306fmap\u306a\u3069\u3092\u4f7f\u3063\u3066 [&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\/13200"}],"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=13200"}],"version-history":[{"count":7,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13200\/revisions"}],"predecessor-version":[{"id":20436,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13200\/revisions\/20436"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13200"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}