{"id":6898,"date":"2025-09-25T11:08:26","date_gmt":"2025-09-25T11:08:26","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=6898"},"modified":"2025-09-25T11:08:26","modified_gmt":"2025-09-25T11:08:26","slug":"vue-testing-library%e3%81%a7%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89%e5%ae%9f%e8%a3%85tips%ef%bc%88transition%e7%b7%a8%ef%bc%89%ef%bd%9cshift-group-%e6%8a%80%e8%a1%93%e3%83%96","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/6898\/","title":{"rendered":"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0"},"content":{"rendered":"\n<\/p>\n<div data-name=\"body\" data-v-a37bc914=\"\"><div class=\"s_table\"><table-of-contents name=\"673df7b0-0f8b-4811-a3dc-60b5cbdb367d\" id=\"673df7b0-0f8b-4811-a3dc-60b5cbdb367d\"><\/table-of-contents>\n<h2 style=\"text-align: left\" name=\"07edb8d7-034f-4198-ae6b-21ec0718c60d\" id=\"07edb8d7-034f-4198-ae6b-21ec0718c60d\">\u306f\u3058\u3081\u306b<\/h2>\n<hr name=\"b4f93cb0-8a55-4e49-ac26-cf31db96f37c\" id=\"b4f93cb0-8a55-4e49-ac26-cf31db96f37c\"\/>\n<p style=\"text-align: left\" name=\"9d97212b-929b-4dd5-af80-38bc26f59dd9\" id=\"9d97212b-929b-4dd5-af80-38bc26f59dd9\">\u3053\u3093\u306b\u3061\u306f\uff01<br \/>SHIFT \u958b\u767a\u30a8\u30f3\u30b8\u30cb\u30a2\u517c\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u306e\u77e2\u5742\uff08\u30e4\u30b5\u30ab\uff09\u3067\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"099557ee-369e-4fd9-b060-6da6ae64d536\" id=\"099557ee-369e-4fd9-b060-6da6ae64d536\">\u73fe\u5728\u3001\u6a5f\u4f1a\u306b\u6075\u307e\u308c\u3066\u3001\u306f\u3058\u3081\u3066Vue.js\u3092\u4f7f\u3063\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3092\u3057\u3066\u3044\u307e\u3059\u3002\u6163\u308c\u3066\u304f\u308b\u3068\u66f8\u304d\u5fc3\u5730\u304c\u3088\u304f\u3001\u3082\u3063\u3068\u4eba\u6c17\u51fa\u3066\u3082\u3044\u3044\u306e\u306b\u306a\u30fc\u3068\u611f\u3058\u308b\u4eca\u65e5\u3053\u306e\u9803\u3067\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"0636321e-fea3-4b5d-b24c-685dbd61fddd\" id=\"0636321e-fea3-4b5d-b24c-685dbd61fddd\">\u6700\u8fd1\u306f\u3001Vue Testing Library\u3092\u7528\u3044\u305f\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3082\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\u305d\u306e\u4e2d\u3067\u3001Vue.js\u306eTransition\u3092\u4f7f\u7528\u3057\u305fUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5bfe\u3057\u3066\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u5b9f\u88c5\u3059\u308b\u6a5f\u4f1a\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n<p style=\"text-align: left\" name=\"607bc3dd-7b46-4643-8838-b811b87417c8\" id=\"607bc3dd-7b46-4643-8838-b811b87417c8\">Vue Testing Library\u3067\u306eTransition\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8ff0\u3079\u3066\u3044\u308b\u60c5\u5831\u6e90\u304c\u898b\u3064\u3051\u3089\u308c\u305a\u3001\u89e3\u6c7a\u307e\u3067\u306b\u305d\u3053\u305d\u3053\u8a66\u884c\u932f\u8aa4\u3057\u305f\u306e\u3067\u3001\u4eca\u56deTips\u3068\u3057\u3066\u5171\u6709\u3057\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h2 style=\"text-align: left\" name=\"2d0833dd-0054-49b7-95a9-e664c7035536\" id=\"2d0833dd-0054-49b7-95a9-e664c7035536\">TL; DR<\/h2>\n<hr name=\"e87d2016-f9fc-4c83-84d3-bc9825ef0116\" id=\"e87d2016-f9fc-4c83-84d3-bc9825ef0116\"\/>\n<ul name=\"38d2fbd0-e6ff-4e50-bb5f-18674a2381b6\" id=\"38d2fbd0-e6ff-4e50-bb5f-18674a2381b6\">\n<li>\n<p name=\"b77d5f01-79a9-42af-97e4-7cbf4589db09\" id=\"b77d5f01-79a9-42af-97e4-7cbf4589db09\">Vue Testing Library\u306erender\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u3067Transition\u3092\u30e2\u30c3\u30af\u3059\u308b<\/p>\n<\/li>\n<li>\n<p name=\"83522140-27ed-45f2-b311-74897b354e5b\" id=\"83522140-27ed-45f2-b311-74897b354e5b\">\u305f\u3060\u3057\u3001Transition\u306e\u300cJavaScript Hooks\u300d\u306f\u30e2\u30c3\u30af\u306e\u30b5\u30dd\u30fc\u30c8\u5bfe\u8c61\u5916<\/p>\n<\/li>\n<li>\n<p name=\"107de868-c19f-4a19-b031-16fb20624fb8\" id=\"107de868-c19f-4a19-b031-16fb20624fb8\">\u300cJavaScript Hooks\u300d\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u3001render\u3067Transition\u3092\u30e2\u30c3\u30af\u3057\u306a\u3044\u3088\u3046\u306b\u6307\u5b9a\u3059\u308b\uff08\u4ee5\u4e0b\uff09<\/p>\n<\/li>\n<\/ul>\n<pre name=\"588a9d29-75b8-4c98-86e8-9fdcc1df3561\" id=\"588a9d29-75b8-4c98-86e8-9fdcc1df3561\" data-name=\"preCode\"><code class=\"hljs php\" data-name=\"code\">\nrender(Component, {\n  <span class=\"hljs-keyword\">global<\/span>: {\n    stubs: {\n      transition: <span class=\"hljs-keyword\">false<\/span>,\n    },\n  },\n})<\/code><\/pre>\n<h2 style=\"text-align: left\" name=\"d848f821-1628-4212-aa44-363148be3756\" id=\"d848f821-1628-4212-aa44-363148be3756\">\u52d5\u4f5c\u74b0\u5883<\/h2>\n<hr name=\"7fc683de-79a4-4fa1-a471-3eed4be52d46\" id=\"7fc683de-79a4-4fa1-a471-3eed4be52d46\"\/>\n<p style=\"text-align: left\" name=\"b39c8486-f547-47be-ae9c-4c501ae6274b\" id=\"b39c8486-f547-47be-ae9c-4c501ae6274b\">\u4ee5\u964d\u3067\u3054\u8aac\u660e\u3059\u308b\u30b3\u30fc\u30c9\u306f\u3001\u4ee5\u4e0b\u306e\u74b0\u5883\u3067\u52d5\u4f5c\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d\u6e08\u3067\u3059\u3002<\/p>\n<h2 style=\"text-align: left\" name=\"ee3966f5-adbc-4de0-8cd1-f1125c6c485a\" id=\"ee3966f5-adbc-4de0-8cd1-f1125c6c485a\">\u524d\u63d0\u77e5\u8b58\uff1aTransition\u3068\u306f<\/h2>\n<hr name=\"9adefcf2-5e37-42ad-aade-1be7dece539b\" id=\"9adefcf2-5e37-42ad-aade-1be7dece539b\"\/>\n<p style=\"text-align: left\" name=\"52922e1e-6bc2-4ec9-ab09-526cf946b607\" id=\"52922e1e-6bc2-4ec9-ab09-526cf946b607\">\u305d\u3082\u305d\u3082Transition\u3068\u306f\u4f55\u305e\u3084\uff1f\u3068\u3044\u3046\u3068\u3053\u308d\u3067\u3059\u304c\u3002<\/p>\n<p style=\"text-align: left\" name=\"21007c0a-90ad-4dd7-843a-873a25460091\" id=\"21007c0a-90ad-4dd7-843a-873a25460091\">Transition\u306f\u3001Vue.js\u306b\u6700\u521d\u304b\u3089\u7528\u610f\u3055\u308c\u3066\u3044\u308b\uff08\u7d44\u307f\u8fbc\u307f\u306e\uff09UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e00\u3064\u3067\u3059\u3002<br \/>HTML\u8981\u7d20\u3084UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u8868\u793a\u3055\u308c\u305f\u30fb\u975e\u8868\u793a\u306b\u306a\u3063\u305f\u7b49\u306e\u3001\u72b6\u614b\u306e\u5909\u66f4\u306b\u4f34\u3046\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306e\u6a5f\u80fd\u3068\u306a\u308a\u307e\u3059\u3002<br \/>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u9069\u7528\u306e\u305f\u3081\u306e\u5c02\u7528\u306eCSS\u30af\u30e9\u30b9\u306e\u4ed6\u3001JavaScript\u306b\u3088\u308b\u5236\u5fa1\u3082\u53ef\u80fd\u3067\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u958b\u59cb\/\u7d42\u4e86\u6642\u306b\u5b9f\u884c\u3059\u308b\u51e6\u7406\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"d5f27b69-f1c1-40a4-8328-9a15b8a55be5\" id=\"d5f27b69-f1c1-40a4-8328-9a15b8a55be5\">\u3088\u308a\u8a73\u3057\u3044\u8aac\u660e\u306f\u3001\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/><a target=\"_blank\" href=\"https:\/\/ja.vuejs.org\/guide\/built-ins\/transition\" target=\"_blank\" rel=\"noopener\">\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3 | Vue.js<\/a><\/p>\n<p style=\"text-align: left\" name=\"d9c5e0fd-9d2d-4406-8706-7afd9076525f\" id=\"d9c5e0fd-9d2d-4406-8706-7afd9076525f\">UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5236\u5fa1\u306e\u4ed5\u7d44\u307f\u3092\u63d0\u4f9b\u3057\u3066\u3044\u308b\u70b9\u304c\u7279\u5fb4\u7684\u3067\u3059\u306d\ud83d\ude0e<br \/>\u300c\u901a\u5e38\u306eUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u540c\u3058\u3088\u3046\u306b\u6271\u3048\u308b\u300d\u3068\u3044\u3046\u306e\u3082\u3001Vue.js\u306e\u8a2d\u8a08\u601d\u60f3\u304c\u73fe\u308c\u3066\u3044\u308b\u3088\u3046\u3067\u3001\u500b\u4eba\u7684\u306b\u9762\u767d\u3044\u306a\uff5e\u3068\u611f\u3058\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2 style=\"text-align: left\" name=\"2c3b4f0c-9ba4-41ab-ac17-49db27ddbb4b\" id=\"2c3b4f0c-9ba4-41ab-ac17-49db27ddbb4b\">\u89e3\u8aac\u7528\u306e\u984c\u6750<\/h2>\n<hr name=\"109b08c6-d826-4926-9c78-0b0458f855e8\" id=\"109b08c6-d826-4926-9c78-0b0458f855e8\"\/>\n<p name=\"a1283c0d-dfde-4e48-8783-eb0da0324b9c\" id=\"a1283c0d-dfde-4e48-8783-eb0da0324b9c\">\u306a\u308b\u3079\u304f\u5358\u7d14\u306a\u6a5f\u80fd\u3067\u3042\u308b\u65b9\u304c\u308f\u304b\u308a\u3084\u3059\u3044\u304b\u3068\u601d\u3046\u306e\u3067\u3001<br \/>\u300c\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3089\u6587\u5b57\u5217\u304c\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3057\u305f\u306e\u3061\u8868\u793a\u3055\u308c\u308b\u300d<br \/>\u3068\u3044\u3046\u6a5f\u80fd\u3092\u6301\u3063\u305fUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3001\u672c\u8a18\u4e8b\u3067\u306e\u89e3\u8aac\u7528\u984c\u6750\u3068\u3057\u307e\u3059\u3002<\/p>\n<figure name=\"87f9e29e-0878-4a19-a4fc-de7034c9370f\" id=\"87f9e29e-0878-4a19-a4fc-de7034c9370f\"><img decoding=\"async\" src=\"https:\/\/assets.st-note.com\/production\/uploads\/images\/215941493\/picture_pc_67617f4233981a1c3aa2695416bfb975.gif\" alt=\"\" width=\"300\" height=\"225\" loading=\"lazy\"\/><figcaption>\ud83d\udc46\u3053\u3093\u306a\u30a4\u30e1\u30fc\u30b8\u3067\u3059<\/figcaption><\/figure>\n<p style=\"text-align: left\" name=\"af17d407-3055-4a80-9239-39cf36719664\" id=\"af17d407-3055-4a80-9239-39cf36719664\">Transition\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<br \/>\u203b\u5b9f\u88c5\u30b3\u30fc\u30c9\u306f<a target=\"_blank\" href=\"https:\/\/play.vuejs.org\/#eNp9UsFu2zAM\/RXCwJAEaJy022HIkqDdkEN36IallwG+aDadqFUkQ5KdFIH\/faTkxD5svRgy3+PT46POyUNVpU2NySJZejxUSnhcZxpgWcgmHOi4v10\/W6Gd9NJo2Aqi4XJG1Q7\/U3tPwH2uZP66ypJSFPios2TNB5B6OYsM4ncdvpe7F6VHO0VNX+o1+oH\/N\/xLCpEf7UAzdXtzJJJ0WzrwDRecXd6tz2dghtS7Zzx5aFtyeddrzAYzzXoLcd4OJKCPgX5dbmXlwaGvK1BC7+h678LN8lAZ6+EMFktoobTmACPKcsSNudHOQ2cUVswZl0I5nFywmBJB4wms1jDuuGkjVI1U9rZm8oU+HCzKjZ7MMahQxGmajq7Kwwx7\/YHA9Y7RN8PL9FiE9uUsjtuN7t8UgstNhQVV0iYuaSpyLxuEM8fWp7gAoRTM088OUDj8kumWVa5dIZ6+pzT2sIhHDvv3+HY+\/zChLgBTiVz6twXMowi5YidkIbmh7GnGUu7SF2c0vdqgmCU5zSEV2h8Ve6H9LOJdjJEvc\/weapzpzaWe7zF\/\/Uf9xZ24liU\/LTq0DWbJFfPC7tBHeLN9oiwH4MEUtSL2O+AvdEbV7DHSvta6INsDXnD7GJ4Wb8ttTh4p4m4oNsrMNvCzhJ4br\/B\/o\/d2P6afQh8lmrR\/ATCmUhE=\" target=\"_blank\" rel=\"noopener\">Vue SFC Playground <\/a>\u304b\u3089\u78ba\u8a8d\u53ef\u80fd\u3067\u3059\u3002\u5b9f\u969b\u306b\u52d5\u304b\u3057\u3066\u307f\u308b\u3053\u3068\u3082\u3067\u304d\u308b\u306e\u3067\u3001\u8208\u5473\u306e\u3042\u308b\u65b9\u306f\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n<pre name=\"18ce85df-d2af-40fa-8059-08d3c259c78a\" id=\"18ce85df-d2af-40fa-8059-08d3c259c78a\" data-name=\"preCode\"><code class=\"hljs cs\" data-name=\"code\"><template>\n  <div>\n    \n    <button class=\"hljs-string\">\"fadeIn\"&gt;fade <span class=\"hljs-keyword\">in<\/span><\/button>\n\n    <transition class=\"hljs-string\">\"onAfterEnter\"&gt;\n      <p>\"isShown\"&gt;\n        <h2>{{ showingText }}<\/h2>\n      <\/p>\n    <\/transition>\n  <\/div>\n<\/template>\n\n<script setup=\"\" lang=\"&lt;span\" class=\"hljs-string\"><![CDATA[\"ts\">\nimport { <span class=\"hljs-keyword\">ref } <span class=\"hljs-keyword\">from <span class=\"hljs-string\">'vue'\n\n<span class=\"hljs-keyword\">const isShown = <span class=\"hljs-keyword\">ref(<span class=\"hljs-literal\">false)\n<span class=\"hljs-keyword\">const fadeIn = () => (isShown.<span class=\"hljs-keyword\">value = <span class=\"hljs-literal\">true)\n\n<span class=\"hljs-keyword\">const showingText = <span class=\"hljs-keyword\">ref(<span class=\"hljs-string\">'Now fade in...')\n<span class=\"hljs-keyword\">const onAfterEnter = () => (showingText.<span class=\"hljs-keyword\">value = <span class=\"hljs-string\">'Completed.')\n]]><\/script>\n\n<\/code><\/pre>\n<p name=\"06a87b9e-4257-45fe-a393-6d73485a1cc7\" id=\"06a87b9e-4257-45fe-a393-6d73485a1cc7\">\u30b3\u30fc\u30c9\u5185\u306e\u300c<transition>\u300d\u304c\u3001Vue.js\u306e\u63d0\u4f9b\u3059\u308bTransition\u3067\u3059\u3002<br \/>Transition\u3067\u6307\u5b9a\u3057\u3066\u3044\u308b\u300c@after-enter\u300d\u306f<a target=\"_blank\" href=\"https:\/\/ja.vuejs.org\/guide\/built-ins\/transition#javascript-hooks\" target=\"_blank\" rel=\"noopener\">JavaScript Hooks <\/a>\u3068\u547c\u3070\u308c\u308b\u3082\u306e\u3067\u3001JavaScript\u306b\u3088\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5236\u5fa1\u306e\u4ed5\u7d44\u307f\u306b\u8a72\u5f53\u3057\u307e\u3059\u3002<br \/>\u5b9f\u88c5\u4f8b\u306e\u300c@after-enter\u300d\u3067\u306f\u3001\u5b50\u8981\u7d20\u306e\u51fa\u73fe\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5b8c\u4e86\u6642\u306b\u884c\u308f\u308c\u308b\u51e6\u7406\u3092\u6307\u5b9a\u3067\u304d\u308b\u305f\u3081\u3001<\/transition><\/p>\n<ol name=\"1f9e9f00-07c1-45b2-9dfe-8ad0ec5752c9\" id=\"1f9e9f00-07c1-45b2-9dfe-8ad0ec5752c9\">\n<li>\n<p name=\"eff3840f-72b3-40ee-96f1-42dd3e3ce8e0\" id=\"eff3840f-72b3-40ee-96f1-42dd3e3ce8e0\">\u300cfade in\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af<\/p>\n<\/li>\n<li>\n<p name=\"63afc6d7-fac1-4114-93de-b7683251b2b7\" id=\"63afc6d7-fac1-4114-93de-b7683251b2b7\">\u300cNow fade in&#8230;\u300d\u30c6\u30ad\u30b9\u30c8\u304c\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3057\u306a\u304c\u3089\u51fa\u73fe<\/p>\n<\/li>\n<li>\n<p name=\"b14d2b0f-d4c2-4e56-b8c0-98d2dba07f13\" id=\"b14d2b0f-d4c2-4e56-b8c0-98d2dba07f13\">\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5b8c\u4e86\u5f8c\u3001\u300c@after-enter\u300d\u306b\u6307\u5b9a\u3057\u3066\u3044\u305f\u300conAfterEnter\u300d\u95a2\u6570\u304c\u5b9f\u884c\u3055\u308c\u3001\u30c6\u30ad\u30b9\u30c8\u304c\u300cCompleted.\u300d\u3078\u5909\u66f4\u3055\u308c\u308b<\/p>\n<\/li>\n<\/ol>\n<p style=\"text-align: left\" name=\"d0ce6250-bb92-424e-bc75-fff71667cdca\" id=\"d0ce6250-bb92-424e-bc75-fff71667cdca\">\u3068\u3044\u3046\u6d41\u308c\u3067\u3001\u984c\u6750\u3068\u3057\u3066\u6319\u3052\u305f\u6a5f\u80fd\u3092\u5b9f\u73fe\u3067\u304d\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2 style=\"text-align: left\" name=\"b4dc1906-d026-4a49-86b2-dfea4ccbaf5c\" id=\"b4dc1906-d026-4a49-86b2-dfea4ccbaf5c\">\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5\u4f8b<\/h2>\n<hr name=\"57acc6bf-5d71-4f06-8e19-ab2c9c459ccf\" id=\"57acc6bf-5d71-4f06-8e19-ab2c9c459ccf\"\/>\n<p style=\"text-align: left\" name=\"7dc81853-a160-4bc4-8bea-91f9558dc9c9\" id=\"7dc81853-a160-4bc4-8bea-91f9558dc9c9\">\u5148\u307b\u3069\u306e\u5b9f\u88c5\u30b3\u30fc\u30c9\uff08App.vue\uff09\u306b\u5bfe\u3057\u3066\u3001Vue Testing Library\u3092\u4f7f\u7528\u3057\u3066\u4e0b\u8a18\u4e8c\u3064\u306e\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u3092\u60f3\u5b9a\u3057\u305f\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<ol name=\"446c57b8-89b5-4ce6-b4aa-b1fcaab23ba6\" id=\"446c57b8-89b5-4ce6-b4aa-b1fcaab23ba6\">\n<li>\n<p name=\"91541470-6a9c-4dbd-9168-9d2580770e75\" id=\"91541470-6a9c-4dbd-9168-9d2580770e75\">\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u524d\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u304c\u975e\u8868\u793a\u3067\u3042\u308b<\/p>\n<\/li>\n<li>\n<p name=\"55c0fdd0-fcc3-4505-b965-22de3b5f6b74\" id=\"55c0fdd0-fcc3-4505-b965-22de3b5f6b74\">\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u5f8c\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u308b<\/p>\n<\/li>\n<\/ol>\n<p style=\"text-align: left\" name=\"486b12c1-5748-4e34-8ca5-4df347dd2761\" id=\"486b12c1-5748-4e34-8ca5-4df347dd2761\">\u5b9f\u88c5\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n<pre name=\"813016d1-2828-439e-a692-f792bb73edb1\" id=\"813016d1-2828-439e-a692-f792bb73edb1\" data-name=\"preCode\"><code class=\"hljs javascript\" data-name=\"code\"><span class=\"hljs-keyword\">import<\/span> { userEvent } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@testing-library\/user-event'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { render, screen } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@testing-library\/vue'<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> App <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/App.vue'<\/span>\n\ntest(<span class=\"hljs-string\">'1.\u300cfade in\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3044\u306a\u3044\u3068\u3001\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u306f\u975e\u8868\u793a\u3067\u3042\u308b'<\/span>, <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n  \n  render(App)\n\n  \n  \n\n  \n  <span class=\"hljs-keyword\">const<\/span> text = screen.queryByRole(<span class=\"hljs-string\">'heading'<\/span>, {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-regexp\">\/Completed.\/<\/span>,\n    <span class=\"hljs-attr\">level<\/span>: <span class=\"hljs-number\">2<\/span>,\n  })\n  expect(text).not.toBeInTheDocument()\n})\n\ntest(<span class=\"hljs-string\">'2.\u300cfade in\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u308b'<\/span>, <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n  \n  render(App)\n\n  \n  <span class=\"hljs-keyword\">const<\/span> button = screen.getByRole(<span class=\"hljs-string\">'button'<\/span>, { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-regexp\">\/fade in\/<\/span> })\n  <span class=\"hljs-keyword\">await<\/span> userEvent.click(button)\n\n  \n  <span class=\"hljs-keyword\">const<\/span> text = <span class=\"hljs-keyword\">await<\/span> screen.findByRole(<span class=\"hljs-string\">'heading'<\/span>, {\n    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-regexp\">\/Completed.\/<\/span>,\n    <span class=\"hljs-attr\">level<\/span>: <span class=\"hljs-number\">2<\/span>,\n  })\n  expect(text).toBeVisible()\n})<\/code><\/pre>\n<p name=\"08537966-298e-47be-b596-64c6ff62a049\" id=\"08537966-298e-47be-b596-64c6ff62a049\">\u5b9f\u88c5\u3057\u305f\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3057\u3066\u307f\u308b\u3068\u30011.\u306f\u6210\u529f\u3057\u307e\u3059\u304c\u30012.\u306f\u5931\u6557\u3057\u307e\u3059\u3002<\/p>\n<pre name=\"f14f130e-8004-41eb-b2fa-6d242661d672\" id=\"f14f130e-8004-41eb-b2fa-6d242661d672\" data-name=\"preCode\"><code class=\"hljs cs\" data-name=\"code\">$ npm run test:unit\n\n&gt; sample-app@<span class=\"hljs-number\">0.0<\/span><span class=\"hljs-number\">.0<\/span> test:unit\n&gt; vitest\n\n\n DEV  v3<span class=\"hljs-number\">.2<\/span><span class=\"hljs-number\">.4<\/span> \/workspace\n\n \u276f src\/__tests__\/App.test.ts (<span class=\"hljs-number\">2<\/span> tests | <span class=\"hljs-number\">1<\/span> failed) <span class=\"hljs-number\">1119<\/span>ms\n   \u2713 <span class=\"hljs-number\">1.<\/span>\u300cfade <span class=\"hljs-keyword\">in<\/span>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3044\u306a\u3044\u3068\u3001\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u306f\u975e\u8868\u793a\u3067\u3042\u308b <span class=\"hljs-number\">74<\/span>ms\n   \u00d7 <span class=\"hljs-number\">2.<\/span>\u300cfade <span class=\"hljs-keyword\">in<\/span>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u308b <span class=\"hljs-number\">1043<\/span>ms\n     \u2192 Unable to find role=<span class=\"hljs-string\">\"heading\"<\/span> and name `\/Completed.\/`\n\n(\u5197\u9577\u306a\u305f\u3081\u7701\u7565)\n\n\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af Failed Tests <span class=\"hljs-number\">1<\/span> \u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\n\n FAIL  src\/__tests__\/App.test.ts &gt; <span class=\"hljs-number\">2.<\/span>\u300cfade <span class=\"hljs-keyword\">in<\/span>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u308b\nTestingLibraryElementError: Unable to find role=<span class=\"hljs-string\">\"heading\"<\/span> and name `\/Completed.\/`\n\nIgnored nodes: comments, script, style\n\n  <div>\n    <div data-v=\"\" class=\"hljs-number\">-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n    &gt;\n      \n      <button data-v=\"\" class=\"hljs-number\">-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n      &gt;\n        fade <span class=\"hljs-keyword\">in<\/span>\n      <\/button>\n      <transition-stub appear=\"&lt;span\" class=\"hljs-string\">\"false\"\n        css=<span class=\"hljs-string\">\"true\"<\/span>\n        data-v<span class=\"hljs-number\">-578<\/span>cc705=<span class=\"hljs-string\">\"\"<\/span>\n        persisted=<span class=\"hljs-string\">\"true\"<\/span>\n      &gt;\n        <p>-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n          style=<span class=\"hljs-string\">\"\"<\/span>\n        &gt;\n          <h2 data-v=\"\" class=\"hljs-number\">-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n          &gt;\n            Now fade <span class=\"hljs-keyword\">in<\/span>...\n          <\/h2>\n        <\/p>\n      <\/transition-stub>\n    <\/div>\n  <\/div>\n\n\nIgnored nodes: comments, script, style\n\n  <div>\n    <div data-v=\"\" class=\"hljs-number\">-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n    &gt;\n      \n      <button data-v=\"\" class=\"hljs-number\">-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n      &gt;\n        fade <span class=\"hljs-keyword\">in<\/span>\n      <\/button>\n      <transition-stub appear=\"&lt;span\" class=\"hljs-string\">\"false\"\n        css=<span class=\"hljs-string\">\"true\"<\/span>\n        data-v<span class=\"hljs-number\">-578<\/span>cc705=<span class=\"hljs-string\">\"\"<\/span>\n        persisted=<span class=\"hljs-string\">\"true\"<\/span>\n      &gt;\n        <p>-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n          style=<span class=\"hljs-string\">\"\"<\/span>\n        &gt;\n          <h2 data-v=\"\" class=\"hljs-number\">-578cc705=<span class=\"hljs-string\">\"\"<\/span>\n          &gt;\n            Now fade <span class=\"hljs-keyword\">in<\/span>...\n          <\/h2>\n        <\/p>\n      <\/transition-stub>\n    <\/div>\n  <\/div>\n\n \u276f waitForWrapper node_modules\/@testing-library\/dom\/dist\/wait-<span class=\"hljs-keyword\">for<\/span>.js:<span class=\"hljs-number\">163<\/span>:<span class=\"hljs-number\">27<\/span>\n \u276f node_modules\/@testing-library\/dom\/dist\/query-helpers.js:<span class=\"hljs-number\">86<\/span>:<span class=\"hljs-number\">33<\/span>\n \u276f src\/__tests__\/App.test.ts:<span class=\"hljs-number\">30<\/span>:<span class=\"hljs-number\">29<\/span>\n     <span class=\"hljs-number\">28<\/span>| \n     <span class=\"hljs-number\">29<\/span>|   \n     <span class=\"hljs-number\">30<\/span>|   <span class=\"hljs-keyword\">const<\/span> text = <span class=\"hljs-keyword\">await<\/span> screen.findByRole(<span class=\"hljs-string\">'heading'<\/span>, {\n       |                             ^\n     <span class=\"hljs-number\">31<\/span>|     name: \/Completed.\/,\n     <span class=\"hljs-number\">32<\/span>|     level: <span class=\"hljs-number\">2<\/span>,\n\n\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af\u23af[<span class=\"hljs-number\">1<\/span>\/<span class=\"hljs-number\">1<\/span>]\u23af\n\n\n Test Files  <span class=\"hljs-number\">1<\/span> failed (<span class=\"hljs-number\">1<\/span>)\n      Tests  <span class=\"hljs-number\">1<\/span> failed | <span class=\"hljs-number\">1<\/span> passed (<span class=\"hljs-number\">2<\/span>)\n   Start at  <span class=\"hljs-number\">22<\/span>:<span class=\"hljs-number\">55<\/span>:<span class=\"hljs-number\">51<\/span>\n   Duration  <span class=\"hljs-number\">2.21<\/span>s (transform <span class=\"hljs-number\">134<\/span>ms, setup <span class=\"hljs-number\">121<\/span>ms, collect <span class=\"hljs-number\">262<\/span>ms, tests <span class=\"hljs-number\">1.12<\/span>s, environment <span class=\"hljs-number\">404<\/span>ms, prepare <span class=\"hljs-number\">141<\/span>ms)<\/code><\/pre>\n<p name=\"a49217e5-7392-411c-adf4-afdc7deb2e14\" id=\"a49217e5-7392-411c-adf4-afdc7deb2e14\">2.\u306e\u30c6\u30b9\u30c8\u3082\u6210\u529f\u3055\u305b\u308b\u306b\u306f\u3001render\u306e\u7b2c\u4e8c\u5f15\u6570\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre name=\"7d6dd8a8-e795-49e7-9885-1107a9412b04\" id=\"7d6dd8a8-e795-49e7-9885-1107a9412b04\" data-name=\"preCode\"><code class=\"hljs css\" data-name=\"code\"><span class=\"hljs-selector-tag\">render<\/span>(<span class=\"hljs-selector-tag\">App<\/span>, {\n  <span class=\"hljs-attribute\">global<\/span>: {\n    stubs: {\n      transition: false,  \/\/ global stubs transition = false\n    },\n  },\n})<\/code><\/pre>\n<p name=\"0a39c321-5984-4b00-8192-42b01571354b\" id=\"0a39c321-5984-4b00-8192-42b01571354b\">\u4e0a\u8a18\u306e\u4fee\u6b63\u306b\u3088\u308a\u30012.\u306e\u30c6\u30b9\u30c8\u3082\u6210\u529f\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre name=\"c7546141-b8c7-46dc-8f42-1a955d30f947\" id=\"c7546141-b8c7-46dc-8f42-1a955d30f947\" data-name=\"preCode\"><code class=\"hljs ruby\" data-name=\"code\">$ npm run <span class=\"hljs-symbol\">test:<\/span>unit\n\n&gt; sample-app@0.<span class=\"hljs-number\">0<\/span>.<span class=\"hljs-number\">0<\/span> <span class=\"hljs-symbol\">test:<\/span>unit\n&gt; vitest\n\n\n DEV  v3.<span class=\"hljs-number\">2.4<\/span> \/workspace\n\n \u2713 src\/__tests_<span class=\"hljs-number\">_<\/span>\/App.test.ts (<span class=\"hljs-number\">2<\/span> tests) <span class=\"hljs-number\">168<\/span>ms\n   \u2713 <span class=\"hljs-number\">1<\/span>.\u300cfade <span class=\"hljs-keyword\">in<\/span>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3044\u306a\u3044\u3068\u3001\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u306f\u975e\u8868\u793a\u3067\u3042\u308b <span class=\"hljs-number\">87<\/span>ms\n   \u2713 <span class=\"hljs-number\">2<\/span>.\u300cfade <span class=\"hljs-keyword\">in<\/span>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u308b <span class=\"hljs-number\">80<\/span>ms\n\n Test Files  <span class=\"hljs-number\">1<\/span> passed (<span class=\"hljs-number\">1<\/span>)\n      Tests  <span class=\"hljs-number\">2<\/span> passed (<span class=\"hljs-number\">2<\/span>)\n   Start at  <span class=\"hljs-number\">23<\/span><span class=\"hljs-symbol\">:<\/span><span class=\"hljs-number\">01<\/span><span class=\"hljs-symbol\">:<\/span><span class=\"hljs-number\">21<\/span>\n   Duration  <span class=\"hljs-number\">1.29<\/span>s (transform <span class=\"hljs-number\">136<\/span>ms, setup <span class=\"hljs-number\">119<\/span>ms, collect <span class=\"hljs-number\">326<\/span>ms, tests <span class=\"hljs-number\">168<\/span>ms, environment <span class=\"hljs-number\">410<\/span>ms, prepare <span class=\"hljs-number\">102<\/span>ms)<\/code><\/pre>\n<h2 style=\"text-align: left\" name=\"78f13fca-3f6b-4b39-b908-68ec53fac820\" id=\"78f13fca-3f6b-4b39-b908-68ec53fac820\">\u30c6\u30b9\u30c8\u306e\u5931\u6557\u539f\u56e0<\/h2>\n<hr name=\"e7074903-458d-4d01-9114-fd02fc9741af\" id=\"e7074903-458d-4d01-9114-fd02fc9741af\"\/>\n<p style=\"text-align: left\" name=\"96d84460-8fce-47bd-b734-10096d1c7d1a\" id=\"96d84460-8fce-47bd-b734-10096d1c7d1a\">\u6700\u521d\u306b\u5b9f\u88c5\u3057\u305f2.\u306e\u30c6\u30b9\u30c8\u306f\u3001\u306a\u305c\u5931\u6557\u3057\u305f\u306e\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p style=\"text-align: left\" name=\"09da44d0-2138-47a7-aff2-5da68199d750\" id=\"09da44d0-2138-47a7-aff2-5da68199d750\">Vue Testing Library\u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u7167\u3059\u308b\u3068\u3001render\u95a2\u6570\u306e\u8aac\u660e\u66f8\u304d\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<figure name=\"83796e58-ca1b-4bb5-b5af-dabe6f7d792f\" id=\"83796e58-ca1b-4bb5-b5af-dabe6f7d792f\">\n<blockquote>\n<p name=\"e0d834e8-fb78-4c0d-9d4e-e8ba82113949\" id=\"e0d834e8-fb78-4c0d-9d4e-e8ba82113949\"><strong>render(Component, options)<br \/><\/strong>An object containing additional information to be passed to @vue\/test-utils <a target=\"_blank\" href=\"https:\/\/vue-test-utils.vuejs.org\/api\/options.html#mounting-options\" target=\"_blank\" rel=\"noopener\">mount <\/a>.<\/p>\n<\/blockquote><figcaption><a target=\"_blank\" href=\"https:\/\/vue-test-utils.vuejs.org\/api\/options.html#mounting-options\" target=\"_blank\" rel=\"noopener\">mount <\/a>.<a target=\"_blank\" href=\"https:\/\/testing-library.com\/docs\/vue-testing-library\/api#rendercomponent-options\" target=\"_blank\" rel=\"noopener\">API | Testing Library <\/a>\u3088\u308a\u629c\u7c8b\u3057\u3066\u5f15\u7528<\/figcaption><\/figure>\n<p style=\"text-align: left\" name=\"7fcd0220-066f-4e02-a982-db09e32049d1\" id=\"7fcd0220-066f-4e02-a982-db09e32049d1\">\u4e0a\u8a18\u306e\u300c@vue\/test-utils\u300d\u306f<a target=\"_blank\" href=\"https:\/\/test-utils.vuejs.org\/\" target=\"_blank\" rel=\"noopener\">Vue Test Utils <\/a>\u3092\u6307\u3057\u3001\u3053\u308c\u306fVue.js\u516c\u5f0f\u306e\u30c6\u30b9\u30c8\u7528\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<br \/>\u3064\u307e\u308arender\u5185\u90e8\u3067\u306f\u3001Vue Test Utils\u306e\u63d0\u4f9b\u3059\u308bmount\u95a2\u6570\u3092\u3001\u6307\u5b9a\u3057\u305f\u30aa\u30d7\u30b7\u30e7\u30f3\u5f15\u6570\u3092\u6e21\u3057\u305f\u4e0a\u3067\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"9b4d0c52-adee-46a3-9a5c-0c1698fe5be2\" id=\"9b4d0c52-adee-46a3-9a5c-0c1698fe5be2\">\u3055\u3066\u3001\u3053\u306emount\u3067\u3059\u304c\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f<strong>Transition\u3092\u30e2\u30c3\u30af<\/strong>\u3057\u3066UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u63cf\u753b\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u307e\u3059\u3002<br \/>\u305f\u3060\u3057\u3001Transition\u306e\u3059\u3079\u3066\u306e\u6a5f\u80fd\u3092\u30e2\u30c3\u30af\u3067\u304d\u308b\u308f\u3051\u3067\u306f\u306a\u304f\u3001\u300c<strong>JavaScript Hooks\u306f\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u306a\u3044<\/strong>\u300d\u3068\u660e\u8a00\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<figure name=\"48c6409d-c513-47db-979d-c189b0465fe1\" id=\"48c6409d-c513-47db-979d-c189b0465fe1\">\n<blockquote>\n<p name=\"6f0d0bc3-6e36-49dd-af79-566b9fa75d74\" id=\"6f0d0bc3-6e36-49dd-af79-566b9fa75d74\"><strong>Partial support<br \/><\/strong>The Vue Test Utils built-in transition stub is simple and doesn&#8217;t cover all of Vue&#8217;s <a target=\"_blank\" href=\"https:\/\/vuejs.org\/guide\/built-ins\/transition\" target=\"_blank\" rel=\"noopener\">Transition features <\/a>. For instance <a target=\"_blank\" href=\"https:\/\/vuejs.org\/guide\/built-ins\/transition#javascript-hooks\" target=\"_blank\" rel=\"noopener\">javascript hooks <\/a>are not supported. This limitation could potentially lead to Vue warnings.<\/p>\n<\/blockquote><figcaption><a target=\"_blank\" href=\"https:\/\/test-utils.vuejs.org\/guide\/advanced\/transitions.html\" target=\"_blank\" rel=\"noopener\">Transitions | Vue Test Utils <\/a>\u3088\u308a\u5f15\u7528<\/figcaption><\/figure>\n<p style=\"text-align: left\" name=\"d5c76e6d-6912-421b-bd48-95b6d384dc4b\" id=\"d5c76e6d-6912-421b-bd48-95b6d384dc4b\">\u4eca\u56de\u984c\u6750\u306b\u3057\u3066\u3044\u308bUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5834\u5408\u3001\u5148\u8ff0\u3057\u305f\u3088\u3046\u306bTransition\u3067\u300c@after-enter\u300d\u3068\u3044\u3046JavaScript Hooks\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"d9b34543-12e7-40f2-b0c8-7a3ba23e3b3d\" id=\"d9b34543-12e7-40f2-b0c8-7a3ba23e3b3d\">\u3057\u305f\u304c\u3063\u3066\u30012.\u306e\u30c6\u30b9\u30c8\u306f\u3001<\/p>\n<ul name=\"a00a1ac2-25f2-4960-b7c3-9268496dc424\" id=\"a00a1ac2-25f2-4960-b7c3-9268496dc424\">\n<li>\n<p name=\"cb246c57-e1a1-4471-9af1-8f71c9c54f51\" id=\"cb246c57-e1a1-4471-9af1-8f71c9c54f51\">\u30c6\u30b9\u30c8\u5b9f\u884c\u6642\u306bTransition\u306e\u300cJavaScript Hooks\u300d\u3092\u542b\u3081\u3066\u30e2\u30c3\u30af\u3057\u3066\u3044\u308b<\/p>\n<\/li>\n<li>\n<p name=\"21f17607-57dd-4afb-a7d4-a7cdd37bd9ff\" id=\"21f17607-57dd-4afb-a7d4-a7cdd37bd9ff\">\u30e2\u30c3\u30af\u306b\u3088\u308a\u3001\u300c@after-enter\u300d\u306b\u6307\u5b9a\u3057\u305f\u51e6\u7406\uff08\u4e0a\u8a18\u4f8b\u3067\u306fonAfterEnter\u95a2\u6570\uff09\u304c\u5b9f\u884c\u3055\u308c\u306a\u3044<\/p>\n<\/li>\n<li>\n<p name=\"e001a1b3-635c-43c9-90dd-b6a3dcc63f9c\" id=\"e001a1b3-635c-43c9-90dd-b6a3dcc63f9c\">\u7d50\u679c\u3001\u300cfade in\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3082\u300cCompleted.\u300d\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u305f\u72b6\u614b\u306b\u306a\u3089\u306a\u3044\uff08\u975e\u8868\u793a\u306e\u307e\u307e\uff09<\/p>\n<\/li>\n<\/ul>\n<p style=\"text-align: left\" name=\"0aa8fee4-f723-48dc-b482-34dbfe5c6f7e\" id=\"0aa8fee4-f723-48dc-b482-34dbfe5c6f7e\">\u3068\u3044\u3046\u7406\u7531\u3067\u5931\u6557\u3057\u305f\u3001\u3068\u3044\u3046\u308f\u3051\u3067\u3059\u3002<\/p>\n<h2 style=\"text-align: left\" name=\"f1a2c052-15b8-4d23-930a-4ab2d3ba108d\" id=\"f1a2c052-15b8-4d23-930a-4ab2d3ba108d\">\u5bfe\u51e6\u65b9\u6cd5<\/h2>\n<hr name=\"e0e4e211-7a54-4efd-907f-7567f1a68cd1\" id=\"e0e4e211-7a54-4efd-907f-7567f1a68cd1\"\/>\n<p style=\"text-align: left\" name=\"c948ff42-b4a4-48b3-ab82-e4b72645a2e1\" id=\"c948ff42-b4a4-48b3-ab82-e4b72645a2e1\">\u3067\u306f\u3069\u3046\u3059\u308c\u3070\u3088\u3044\u306e\u304b\uff1f\u3068\u3044\u3046\u3068\u30fb\u30fb\u30fb<\/p>\n<p style=\"text-align: left\" name=\"af544860-ffa9-41ff-8c9a-56dfdf494855\" id=\"af544860-ffa9-41ff-8c9a-56dfdf494855\">Vue Test Utils\u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\uff08\u5148\u307b\u3069\u306e\u5f15\u7528\u7b87\u6240\u306e\u4e0b\uff09\u306b\u300eglobal stubs transition\u3078false\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\uff08Transition\u3092\uff09\u30e2\u30c3\u30af\u3057\u306a\u3044\u3088\u3046\u306b\u3067\u304d\u308b\u300f\u3068\u3001\u89e3\u6c7a\u65b9\u6cd5\u304c\u8a18\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<figure name=\"32bf2851-3ef6-418f-a510-e03014f841ca\" id=\"32bf2851-3ef6-418f-a510-e03014f841ca\">\n<blockquote>\n<p name=\"62c935da-41b5-4a56-b263-17d4e8c0d12c\" id=\"62c935da-41b5-4a56-b263-17d4e8c0d12c\"><strong>TIP<br \/><\/strong>Potential solutions:<br \/>\u30fb<strong>You can turn off the auto stubbing by setting <\/strong><a target=\"_blank\" href=\"https:\/\/test-utils.vuejs.org\/api\/#global-stubs\" target=\"_blank\" rel=\"noopener\"><strong>global stubs transition <\/strong><\/a><strong>to false<\/strong><br \/>\u30fbYou can create your own transition stub that can handle these hooks if necessary.<br \/>\u30fbYou can spy the warning in the test to silence it.<\/p>\n<\/blockquote><figcaption><a target=\"_blank\" href=\"https:\/\/test-utils.vuejs.org\/guide\/advanced\/transitions.html\" target=\"_blank\" rel=\"noopener\">Transitions | Vue Test Utils <\/a>\u3088\u308a\u5f15\u7528\uff08<strong>\u592a\u5b57<\/strong>\u306f\u7b46\u8005\u7de8\u96c6\uff09<\/figcaption><\/figure>\n<p style=\"text-align: left\" name=\"39d3e902-5eb8-4335-9ca2-0c77569127c8\" id=\"39d3e902-5eb8-4335-9ca2-0c77569127c8\">\u3053\u3053\u3067\u3044\u3046\u300cglobal stubs transition\u300d\u306f\u3001mount\u306b\u6307\u5b9a\u53ef\u80fd\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u5f15\u6570\u306e\u4e00\u3064\u3067\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"69e42d07-dfa4-44f2-9aad-90d2c134e3a2\" id=\"69e42d07-dfa4-44f2-9aad-90d2c134e3a2\">\u524d\u8ff0\u306e\u901a\u308a\u3001render\u306f\u6307\u5b9a\u3057\u305f\u30aa\u30d7\u30b7\u30e7\u30f3\u5f15\u6570\u3092\u6e21\u3057\u305f\u4e0a\u3067mount\u3092\u547c\u3073\u51fa\u3059\u306e\u3067\u3001<\/p>\n<ul name=\"98c201f7-6caf-4534-a287-245a31710200\" id=\"98c201f7-6caf-4534-a287-245a31710200\">\n<li>\n<p name=\"13435b2b-6d69-444e-b47a-d5b9ee1084ab\" id=\"13435b2b-6d69-444e-b47a-d5b9ee1084ab\">render\u306b\u300cglobal stubs transition = false\u300d\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u305d\u308c\u304c\u305d\u306e\u307e\u307emount\u306b\u6e21\u3055\u308c\u308b<\/p>\n<\/li>\n<li>\n<p name=\"6b06b98d-ec31-46fa-ba93-4f8f6bfc750b\" id=\"6b06b98d-ec31-46fa-ba93-4f8f6bfc750b\">\u4e0a\u8a18\u6307\u5b9a\u306b\u3088\u308a\u3001\u300cJavaScript Hooks\u300d\u3082\u542b\u3081\u3066Transition\u304c\u30e2\u30c3\u30af\u3055\u308c\u306a\u304f\u306a\u308b<\/p>\n<\/li>\n<li>\n<p name=\"c887bcb2-c4de-4833-9f33-eafedf743461\" id=\"c887bcb2-c4de-4833-9f33-eafedf743461\">\u7d50\u679c\u3001UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5b9f\u88c5\u3057\u305f\u901a\u308a\u306e\u632f\u308b\u821e\u3044\u3092\u3059\u308b<\/p>\n<\/li>\n<\/ul>\n<p style=\"text-align: left\" name=\"47b8400d-fb85-4587-b632-160c98775a97\" id=\"47b8400d-fb85-4587-b632-160c98775a97\">\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"b2035534-77a0-4fb1-9966-e619bf8c2f48\" id=\"b2035534-77a0-4fb1-9966-e619bf8c2f48\">\u4fee\u6b63\u5f8c\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u304c\u6210\u529f\u3059\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e\u306f\u3001\u3053\u306e\u30c8\u30ea\u30c3\u30af\u306b\u3088\u3063\u3066\u300c@after-enter\u300d\u304c\u50cd\u304f\u3088\u3046\u306b\u306a\u308a\u3001\uff08\u5b9f\u88c5\u3057\u305f\u901a\u308a\u306b\uff09\u30c6\u30ad\u30b9\u30c8\u5909\u66f4\u304c\u884c\u308f\u308c\u305f\u305f\u3081\u3001\u3068\u3044\u3046\u306e\u304c\u771f\u76f8\u3067\u3057\u305f\u3002\u56e0\u679c\u95a2\u4fc2\u304c\u308f\u304b\u3063\u3066\u30b9\u30c3\u30ad\u30ea\u3002<\/p>\n<h2 style=\"text-align: left\" name=\"c261fb31-b84b-4a35-b6d9-3a8600db9e8a\" id=\"c261fb31-b84b-4a35-b6d9-3a8600db9e8a\">\u304a\u308f\u308a\u306b<\/h2>\n<hr name=\"b74212c6-b914-4f2a-bdba-8cfc708184f7\" id=\"b74212c6-b914-4f2a-bdba-8cfc708184f7\"\/>\n<p style=\"text-align: left\" name=\"e1f45b1b-ed2e-42c0-860f-7632c25a5b8d\" id=\"e1f45b1b-ed2e-42c0-860f-7632c25a5b8d\">\u672c\u8a18\u4e8b\u3067\u306f\u3001\u984c\u6750\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u57fa\u306b\u3001Transition\u4f7f\u7528\u6642\u306eVue Testing Library\u306b\u3088\u308b\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5\u306eTips\u3092\u5171\u6709\u3055\u305b\u3066\u9802\u304d\u307e\u3057\u305f\u3002\u7686\u69d8\u306e\u3054\u53c2\u8003\u306b\u306a\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<\/p>\n<p style=\"text-align: left\" name=\"c901f979-16b1-45dc-90ae-bb7e3c10ca12\" id=\"c901f979-16b1-45dc-90ae-bb7e3c10ca12\">\u4eca\u56de\u306e\u30c6\u30b9\u30c8\u5931\u6557\u539f\u56e0\u306e\u8abf\u67fb\u904e\u7a0b\u3067\u3001\uff08AI\u306e\u529b\u3082\u501f\u308a\u3064\u3064\u3067\u3059\u304c\uff09Vue Testing Library, Vue Test Utils\u306e\u5b9f\u88c5\u30b3\u30fc\u30c9\u3068\u3072\u305f\u3059\u3089\u306b\u3089\u3081\u3063\u3053\u3057\u3066\u307e\u3057\u305f\u3002<br \/>\u305d\u308c\u306a\u308a\u306b\u6642\u9593\u306f\u8cbb\u3084\u3057\u305f\u3082\u306e\u306e\u3001\u300c\u666e\u6bb5\u4f55\u6c17\u306a\u304f\u5229\u7528\u3057\u3066\u3044\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3084\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u5b9f\u88c5\u30b3\u30fc\u30c9\u3092\u8aad\u307f\u3001\u69cb\u6210\u3084\u4ed5\u69d8\u3092\u628a\u63e1\u3059\u308b\u300d\u3068\u3044\u3046\u7d4c\u9a13\u304c\u3067\u304d\u305f\u306e\u306f\u826f\u304b\u3063\u305f\u306a\uff5e\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\u7279\u306b\u3001Vue Testing Library\u306e\u5b9f\u88c5\u306f\u5b66\u3073\u304c\u3042\u308a\u307e\u3057\u305f\u3002\u300cHTML\u8981\u7d20\u691c\u7d22\u7528\u306e\u30af\u30a8\u30ea\u95a2\u6570\u7fa4\u300d\u3068\u300cVue Test Utils\u306e\u63d0\u4f9bAPI\u300d\u3092\u3046\u307e\u3044\u3053\u3068\u30e9\u30c3\u30d7\u3057\u3001\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5\u8005\u304c\u6271\u3044\u3084\u3059\u3044\u3001\u6975\u529b\u30b7\u30f3\u30d7\u30eb\u306aAPI\u8a2d\u8a08\u306b\u306a\u3063\u3066\u3044\u308b\u3088\u3046\u306b\u611f\u3058\u307e\u3057\u305f\u3002\u79c1\u3082\u30b9\u30de\u30fc\u30c8\u306a\u8a2d\u8a08\u304c\u30b7\u30e5\u30c3\u3068\u3067\u304d\u308b\u3088\u3046\u306b\u3001\u4eca\u5f8c\u3082\u7cbe\u9032\u3057\u3066\u3044\u304d\u307e\u3059\ud83d\udcaa<\/p>\n<p style=\"text-align: left\" name=\"68f31664-a4a5-4bc9-9200-be8fd2d8094d\" id=\"68f31664-a4a5-4bc9-9200-be8fd2d8094d\">\u6700\u5f8c\u307e\u3067\u8aad\u3093\u3067\u9802\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n<h2 style=\"text-align: left\" name=\"200cf8ae-1a36-46ed-80ae-98bd2ccf604c\" id=\"200cf8ae-1a36-46ed-80ae-98bd2ccf604c\">\u4f59\u8ac7\uff1a\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5\u4f8b\u3092Pull Request\u3057\u3066\u307f\u305f<\/h2>\n<hr name=\"ccb3388e-55e6-4a67-b351-94318332abf1\" id=\"ccb3388e-55e6-4a67-b351-94318332abf1\"\/>\n<p style=\"text-align: left\" name=\"8363be74-3957-4de9-b58c-4a7629656d90\" id=\"8363be74-3957-4de9-b58c-4a7629656d90\">\u5f53\u8a18\u4e8b\u306e\u516c\u958b\u6642\u70b9\u3067\u306f\u3001Vue Testing Library\u306eGitHub\u30ea\u30dd\u30b8\u30c8\u30ea\u306b\u306f\u53c2\u8003\u3068\u306a\u308b\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5\u4f8b\u306f\u306a\u3044\u3088\u3046\u3067\u3057\u305f\u306e\u3067\u3001\u79c1\u306e\u65b9\u3067Pull Request\u3092\u51fa\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p style=\"text-align: left\" name=\"cb2af767-a966-48b9-932f-2c29fa7be722\" id=\"cb2af767-a966-48b9-932f-2c29fa7be722\"><a target=\"_blank\" href=\"https:\/\/github.com\/testing-library\/vue-testing-library\/pull\/327\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/testing-library\/vue-testing-library\/pull\/327<\/a><\/p>\n<p style=\"text-align: left\" name=\"a6f94216-de64-4fe7-96cb-e4bab4fcb816\" id=\"a6f94216-de64-4fe7-96cb-e4bab4fcb816\">Approve\u3055\u308c\u308b\u3068\u5b09\u3057\u3044\u3067\u3059\u304c\u3001\u6c17\u9577\u306b\u5f85\u3061\u307e\u3057\u3087\u3046\ud83c\udf75<\/p>\n<hr name=\"586defae-45f3-455f-a9cd-ca4c627cf1c2\" id=\"586defae-45f3-455f-a9cd-ca4c627cf1c2\"\/>\n<figure name=\"39eeb52a-3493-4472-8094-b2dc6dda31ff\" id=\"39eeb52a-3493-4472-8094-b2dc6dda31ff\">\n<blockquote>\n<p name=\"c5ab9755-0880-4a04-aa23-2e2a0b004465\" id=\"c5ab9755-0880-4a04-aa23-2e2a0b004465\"><strong>\u57f7\u7b46\u8005\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\uff1a\u77e2\u5742 \u62d3<\/strong><br \/>2025\u5e741\u6708\u306b\u682a\u5f0f\u4f1a\u793eSHIFT\u3078\u5165\u793e\u3002<br \/>\u958b\u767a\u30a8\u30f3\u30b8\u30cb\u30a2\u517c\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u3084\u3063\u3066\u307e\u3059\ud83d\udcaa<br \/>\u7a4d\u672c\u304c\u6e1b\u308b\u3069\u3053\u308d\u304b\u3069\u3093\u3069\u3093\u5897\u3048\u308b\u30d0\u30b0\ud83d\udc1e\u304c\u4e00\u751f\u76f4\u308a\u307e\u305b\u3093\u3002<br \/>_(:3\u300d\u2220)_\u2190\u3053\u306e\u9854\u6587\u5b57\u304c\u597d\u304d\u3002<\/p>\n<\/blockquote><figcaption\/><\/figure>\n<figure name=\"ade6cbd4-cd56-4235-8cf4-3a6928f9168e\" id=\"ade6cbd4-cd56-4235-8cf4-3a6928f9168e\">\n<blockquote>\n<p name=\"ef64c387-552b-42ac-bfff-bac42f177d38\" id=\"ef64c387-552b-42ac-bfff-bac42f177d38\"><strong>\u2709 \u3053\u306e\u8a18\u4e8b\u306e\u57f7\u7b46\u8005\u3078\u611f\u60f3\u3092\u5c4a\u3051\u3066\u307f\u307e\u305b\u3093\u304b\uff1f\ud83d\udd8a<\/strong><\/p>\n<p>\u300c\u5f79\u306b\u7acb\u3061\u305d\u3046\uff01\u300d\u300c\u53c2\u8003\u306b\u306a\u3063\u305f\uff01\u300d\u300c\u601d\u8003\u304c\u6574\u7406\u3067\u304d\u305f\u300d\u306a\u3069<br \/>\u8a18\u4e8b\u3092\u8aad\u3093\u3060\u611f\u60f3\u3092\u305c\u3072\u3001\u30a2\u30f3\u30b1\u30fc\u30c8\u306b\u3066\u304a\u5bc4\u305b\u304f\u3060\u3055\u3044\u3002<br \/>\u6b21\u56de\u306e\u57f7\u7b46\u30c6\u30fc\u30de\u306e\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3059\uff01<br \/>\u3054\u8cea\u554f\u3082\u5927\u6b53\u8fce\u3067\u3059\u25ce<\/p>\n<p>\u2605\u8aad\u8005\u30a2\u30f3\u30b1\u30fc\u30c8\u306f<a target=\"_blank\" href=\"https:\/\/forms.office.com\/r\/wHNKPDk6Hm\" target=\"_blank\" rel=\"noopener\">\u3053\u3061\u3089<\/a><br \/>\u2605\u672c\u8a18\u4e8b\u306e\u30b3\u30e1\u30f3\u30c8\u6b04\u3067\u3082\u53d7\u3051\u4ed8\u3051\u3066\u304a\u308a\u307e\u3059<\/p>\n<\/blockquote><figcaption\/><\/figure>\n<p name=\"3ba236a1-4804-471d-ae97-acb940f6f608\" id=\"3ba236a1-4804-471d-ae97-acb940f6f608\"><strong>\u2705SHIFT\u3078\u306e\u304a\u554f\u5408\u305b\u306f\u304a\u6c17\u8efd\u306b<\/strong><br \/><a target=\"_blank\" href=\"https:\/\/service.shiftinc.jp\/contact\/\" target=\"_blank\" rel=\"noopener\">https:\/\/service.shiftinc.jp\/contact\/<\/a><\/p>\n<p name=\"85311fdd-11a3-4eec-924b-27cbb94e3d58\" id=\"85311fdd-11a3-4eec-924b-27cbb94e3d58\">SHIFT\u306b\u3064\u3044\u3066\uff08\u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8\uff09<br \/><a target=\"_blank\" href=\"https:\/\/www.shiftinc.jp\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.shiftinc.jp\/<\/a><\/p>\n<p name=\"9f194b30-31fa-4bea-bba5-6960efe56b35\" id=\"9f194b30-31fa-4bea-bba5-6960efe56b35\">SHIFT\u306e\u30b5\u30fc\u30d3\u30b9\u306b\u3064\u3044\u3066\uff08\u30b5\u30fc\u30d3\u30b9\u30b5\u30a4\u30c8\uff09<br \/><a target=\"_blank\" href=\"https:\/\/service.shiftinc.jp\/\" target=\"_blank\" rel=\"noopener\">https:\/\/service.shiftinc.jp\/<\/a><\/p>\n<p name=\"4dfcc912-ccb2-4157-966f-7d3881f6db34\" id=\"4dfcc912-ccb2-4157-966f-7d3881f6db34\">SHIFT\u306e\u5c0e\u5165\u4e8b\u4f8b<br \/><a target=\"_blank\" href=\"https:\/\/service.shiftinc.jp\/case\/\" target=\"_blank\" rel=\"noopener\">https:\/\/service.shiftinc.jp\/case\/<\/a><\/p>\n<p name=\"3fa37343-cfa7-4367-afef-1ad8c1b15ff7\" id=\"3fa37343-cfa7-4367-afef-1ad8c1b15ff7\">\u304a\u5f79\u7acb\u3061\u8cc7\u6599\u306f\u3053\u3061\u3089<br \/><a target=\"_blank\" href=\"https:\/\/service.shiftinc.jp\/resources\/\" target=\"_blank\" rel=\"noopener\">https:\/\/service.shiftinc.jp\/resources\/<\/a><\/p>\n<p name=\"069d2fb4-1592-4dfd-a7fc-96737ede6eed\" id=\"069d2fb4-1592-4dfd-a7fc-96737ede6eed\"><strong>SHIFT\u306e\u63a1\u7528\u60c5\u5831\u306f\u3053\u3061\u3089<\/strong><br \/><a target=\"_blank\" href=\"https:\/\/recruit.shiftinc.jp\/career\/\" target=\"_blank\" rel=\"noopener\">https:\/\/recruit.shiftinc.jp\/career\/<\/a><\/p>\n<p name=\"830a5e4f-21e2-4b46-83a1-1d605ada623f\" id=\"830a5e4f-21e2-4b46-83a1-1d605ada623f\">PHOTO\uff1a<a target=\"_blank\" href=\"https:\/\/unsplash.com\/ja\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a>\u306e<a target=\"_blank\" href=\"https:\/\/unsplash.com\/ja\/@naman_rai_1010\" target=\"_blank\" rel=\"noopener\">Naman Rai<\/a><\/p>\n<\/div>\n\n<br \/><a href=\"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u306f\u3058\u3081\u306b \u3053\u3093\u306b\u3061\u306f\uff01SHIFT \u958b\u767a\u30a8\u30f3\u30b8\u30cb\u30a2\u517c\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u306e\u77e2\u5742\uff08\u30e4\u30b5\u30ab\uff09\u3067\u3059\u3002 \u73fe\u5728\u3001\u6a5f\u4f1a\u306b\u6075\u307e\u308c\u3066\u3001\u306f\u3058\u3081\u3066Vue.js\u3092\u4f7f\u3063\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3092\u3057\u3066\u3044\u307e\u3059\u3002\u6163\u308c\u3066\u304f\u308b\u3068\u66f8\u304d\u5fc3\u5730\u304c\u3088\u304f\u3001\u3082\u3063\u3068\u4eba\u6c17\u51fa [&hellip;]","protected":false},"author":1,"featured_media":6899,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-6898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-company-tec"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0 - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0 - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"\u306f\u3058\u3081\u306b \u3053\u3093\u306b\u3061\u306f\uff01SHIFT \u958b\u767a\u30a8\u30f3\u30b8\u30cb\u30a2\u517c\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u306e\u77e2\u5742\uff08\u30e4\u30b5\u30ab\uff09\u3067\u3059\u3002 \u73fe\u5728\u3001\u6a5f\u4f1a\u306b\u6075\u307e\u308c\u3066\u3001\u306f\u3058\u3081\u3066Vue.js\u3092\u4f7f\u3063\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3092\u3057\u3066\u3044\u307e\u3059\u3002\u6163\u308c\u3066\u304f\u308b\u3068\u66f8\u304d\u5fc3\u5730\u304c\u3088\u304f\u3001\u3082\u3063\u3068\u4eba\u6c17\u51fa [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-25T11:08:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"670\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/6898\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0\",\"datePublished\":\"2025-09-25T11:08:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/6898\\\/\"},\"wordCount\":321,\"image\":{\"@id\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png\",\"articleSection\":[\"\u4f01\u696d\u30c6\u30c3\u30af\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/6898\\\/\",\"url\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646\",\"name\":\"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0 - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png\",\"datePublished\":\"2025-09-25T11:08:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646#primaryimage\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png\",\"contentUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png\",\"width\":1280,\"height\":670},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/note.shiftinc.jp\\\/n\\\/n59f1a7176646#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0 - \u30dd\u30b1\u30b3\u30f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646","og_locale":"ja_JP","og_type":"article","og_title":"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0 - \u30dd\u30b1\u30b3\u30f3","og_description":"\u306f\u3058\u3081\u306b \u3053\u3093\u306b\u3061\u306f\uff01SHIFT \u958b\u767a\u30a8\u30f3\u30b8\u30cb\u30a2\u517c\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u30a2\u30fc\u30ad\u30c6\u30af\u30c8\u306e\u77e2\u5742\uff08\u30e4\u30b5\u30ab\uff09\u3067\u3059\u3002 \u73fe\u5728\u3001\u6a5f\u4f1a\u306b\u6075\u307e\u308c\u3066\u3001\u306f\u3058\u3081\u3066Vue.js\u3092\u4f7f\u3063\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3092\u3057\u3066\u3044\u307e\u3059\u3002\u6163\u308c\u3066\u304f\u308b\u3068\u66f8\u304d\u5fc3\u5730\u304c\u3088\u304f\u3001\u3082\u3063\u3068\u4eba\u6c17\u51fa [&hellip;]","og_url":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-09-25T11:08:26+00:00","og_image":[{"width":1280,"height":670,"url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png","type":"image\/png"}],"author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"3\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/6898\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0","datePublished":"2025-09-25T11:08:26+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/6898\/"},"wordCount":321,"image":{"@id":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png","articleSection":["\u4f01\u696d\u30c6\u30c3\u30af"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/6898\/","url":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646","name":"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0 - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"primaryImageOfPage":{"@id":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646#primaryimage"},"image":{"@id":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png","datePublished":"2025-09-25T11:08:26+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/note.shiftinc.jp\/n\/n59f1a7176646"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646#primaryimage","url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png","contentUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/rectangle_large_type_2_9ed8f71946f902962dea2702bc655010.png","width":1280,"height":670},{"@type":"BreadcrumbList","@id":"https:\/\/note.shiftinc.jp\/n\/n59f1a7176646#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"Vue Testing Library\u3067\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u5b9f\u88c5Tips\uff08Transition\u7de8\uff09\uff5cSHIFT Group \u6280\u8853\u30d6\u30ed\u30b0"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/6898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=6898"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/6898\/revisions"}],"predecessor-version":[{"id":6900,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/6898\/revisions\/6900"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media\/6899"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=6898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=6898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=6898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}