1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[845],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return h}});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var o=r.createContext({}),c=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(o.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),d=a,h=u["".concat(o,".").concat(d)]||u[d]||m[d]||l;return n?r.createElement(h,i(i({ref:t},p),{},{components:n})):r.createElement(h,i({ref:t},p))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,i=new Array(l);i[0]=d;var s={};for(var o in t)hasOwnProperty.call(t,o)&&(s[o]=t[o]);s.originalType=e,s[u]="string"==typeof e?e:a,i[1]=s;for(var c=2;c<l;c++)i[c]=n[c];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},85162:function(e,t,n){n.d(t,{Z:function(){return i}});var r=n(67294),a=n(86010),l="tabItem_Ymn6";function i(e){var t=e.children,n=e.hidden,i=e.className;return r.createElement("div",{role:"tabpanel",className:(0,a.Z)(l,i),hidden:n},t)}},74866:function(e,t,n){n.d(t,{Z:function(){return x}});var r=n(87462),a=n(67294),l=n(86010),i=n(12466),s=n(76775),o=n(91980),c=n(67392),p=n(50012);function u(e){return function(e){var t,n;return null!=(t=null==(n=a.Children.map(e,(function(e){if(!e||(0,a.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')}
1)))?void 0:n.filter(Boolean))?t:[]}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function m(e){var t=e.values,n=e.children;return(0,a.useMemo)((function(){var e=null!=t?t:u(n);return function(e){var t=(0,c.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in <Tabs>. Every value needs to be unique.')}(e),e}),[t,n])}function d(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function h(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId,l=(0,s.k6)(),i=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,o._X)(i),(0,a.useCallback)((function(e){if(i){var t=new URLSearchParams(l.location.search);t.set(i,e),l.replace(Object.assign({},l.location,{search:t.toString()}))}}),[i,l])]}function g(e){var t,n,r,l,i=e.defaultValue,s=e.queryString,o=void 0!==s&&s,c=e.groupId,u=m(e),g=(0,a.useState)((function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!d({value:n,tabValues:r}))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var a=null!=(t=r.find((function(e){return e.default})))?t:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:i,tabValues:u})})),k=g[0],f=g[1],y=h({queryString:o,groupId:c}),b=y[0],T=y[1],v=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),n=(0,p.Nk)(t),r=n[0],l=n[1],[r,(0,a.useCallback)((function(e){t&&l.set(e)}),[t,l])]),x=v[0],N=v[1],C=function(){var e=null!=b?b:x;return d({value:e,tabValues:u})?e:null}();return(0,a.useLayoutEffect)((function(){C&&f(C)}),[C]),{selectedValue:k,selectValue:(0,a.useCallback)((function(e){if(!d({value:e,tabValues:u}))throw new Error("Can't select invalid tab value="+e);f(e),T(e),N(e)}),[T,N,u]),tabValues:u}}var k=n(72389),f="tabList__CuJ",y="tabItem_LNqP";function b(e){var t=e.className,n=e.block,s=e.selectedValue,o=e.selectValue,c=e.tabValues,p=[],u=(0,i.o5)().blockElementScrollPositionUntilNextRender,m=function(e){var t=e.currentTarget,n=p.indexOf(t),r=c[n].value;r!==s&&(u(t),o(r))},d=function(e){var t,n=null;switch(e.key){case"Enter":m(e);break;case"ArrowRight":var r,a=p.indexOf(e.currentTarget)+1;n=null!=(r=p[a])?r:p[0];break;case"ArrowLeft":var l,i=p.indexOf(e.currentTarget)-1;n=null!=(l=p[i])?l:p[p.length-1]}null==(t=n)||t.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.Z)("tabs",{"tabs--block":n},t)},c.map((function(e){var t=e.value,n=e.label,i=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:function(e){return p.push(e)},onKeyDown:d,onClick:m},i,{className:(0,l.Z)("tabs__item",y,null==i?void 0:i.className,{"tabs__item--active":s===t})}),null!=n?n:t)})))}function T(e){var t=e.lazy,n=e.children,r=e.selectedValue,l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){var i=l.find((function(e){return e.props.value===r}));return i?(0,a.cloneElement)(i,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},l.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})})))}function v(e){var t=g(e);return a.createElement("div",{className:(0,l.Z)("tabs-container",f)},a.createElement(b,(0,r.Z)({},e,t)),a.createElement(T,(0,r.Z)({},e,t)))}function x(e){var t=(0,k.Z)();return a.createElement(v,(0,r.Z)({key:String(t)},e))}},46300:function(e,t,n){n.d(t,{Z:function(){return l}});var r=n(67294),a=n(50012);function l(e){var t=e.path,n=(0,a.Nk)("docusaurus.tab.js-ts")[0],l=t.lastIndexOf("{"),i=t.slice(l+1,t.length-1).split(",")[1],s=t.slice(0,l);return r.createElement("code",null,s+("js"===n?"js":i))}},69866:function(e,t,n){n.r(t),n.d(t,{assets:function(){return m},contentTitle:function(){return p},default:function(){return g},frontMatter:function(){return c},metadata:function(){return u},toc:function(){return d}});
1var r=n(87462),a=n(63366),l=(n(67294),n(3905)),i=(n(46300),n(85162)),s=n(74866),o=["components"],c={},p="Our First Test",u={unversionedId:"tutorial/chapter5/first-test",id:"version-5.3/tutorial/chapter5/first-test",title:"Our First Test",description:"\x3c!--",source:"@site/versioned_docs/version-5.3/tutorial/chapter5/first-test.md",sourceDirName:"tutorial/chapter5",slug:"/tutorial/chapter5/first-test",permalink:"/docs/tutorial/chapter5/first-test",draft:!1,editUrl:"https://github.com/redwoodjs/redwood/blob/main/docs/docs/tutorial/chapter5/first-test.md",tags:[],version:"5.3",frontMatter:{},sidebar:"main",previous:{title:"Introduction to Testing",permalink:"/docs/tutorial/chapter5/testing"},next:{title:"Building a Component the Redwood Way",permalink:"/docs/tutorial/chapter6/the-redwood-way"}},m={},d=[{value:"Adding the Test",id:"adding-the-test",level:3},{value:"What's the Deal with Mocks?",id:"whats-the-deal-with-mocks",level:3},{value:"Testing Article",id:"testing-article",level:3},{value:"One Last Thing",id:"one-last-thing",level:3}],h={toc:d};function g(e){var t=e.components,n=(0,a.Z)(e,o);return(0,l.kt)("wrapper",(0,r.Z)({},h,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"our-first-test"},"Our First Test"),(0,l.kt)("p",null,"\u3064\u307e\u308a Storybook \u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210/\u66f4\u65b0\u3059\u308b\u6700\u521d\u306e\u30d5\u30a7\u30fc\u30ba\u3060\u3068\u3059\u308c\u3070\u3001\u30d5\u30a7\u30fc\u30ba2\u306f\u6a5f\u80fd\u3059\u308b\u304b\u3092\u30c6\u30b9\u30c8\u3067\u78ba\u8a8d\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\n\u305d\u308c\u3067\u306f\u3001\u65b0\u6a5f\u80fd\u3067\u3042\u308b\u8981\u7d04\u306e\u30c6\u30b9\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002"),(0,l.kt)("p",null,"\u3082\u3057\u3042\u306a\u305f\u304c\u4eca\u307e\u3067\u4f55\u3089\u304b\u306e\u30c6\u30b9\u30c8\u3092\u3057\u305f\u3053\u3068\u304c\u306a\u3044\u306e\u3067\u3042\u308c\u3070\u3001\u3053\u308c\u306f\u5c11\u3057\u96e3\u3057\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u4e00\u822c\u7684\u306a\u30c6\u30b9\u30c8\u306e\u6982\u8981\u3092\u77e5\u308a\u305f\u3044\u5834\u5408\u306f ",(0,l.kt)("a",{parentName:"p",href:"/docs/testing"},"all about testing")," \u3068\u3044\u3046\u7d20\u6674\u3089\u3057\u3044\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304c\u3042\u308a\u307e\u3059\uff08\u54f2\u5b66\u3082\u542b\u307e\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u8208\u5473\u306e\u3042\u308b\u65b9\u306f\u3054\u89a7\u304f\u3060\u3055\u3044\uff09\u3002\u79c1\u305f\u3061\u306f\u3001\u3053\u308c\u304c\u3069\u306e\u3088\u3046\u306b\u52d5\u4f5c\u3059\u308b\u304b\u306e\u8b0e\u3092\u89e3\u304f\u305f\u3081\u306b\u3001\u30d7\u30ec\u30fc\u30f3\u306aJavaScript\u3067\u30a4\u30c1\u304b\u3089\u8d85\u30b7\u30f3\u30d7\u30eb\u306a\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u3092\u69cb\u7bc9\u3057\u3066\u3044\u307e\u3059\uff01"),(0,l.kt)("p",null,"\u524d\u306e\u30da\u30fc\u30b8\u306e\u30c6\u30b9\u30c8\u30d7\u30ed\u30bb\u30b9\u3092\u307e\u3060\u5b9f\u884c\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001 ",(0,l.kt)("inlineCode",{parentName:"p"},"a")," \u3092\u62bc\u3059\u3060\u3051\u3067\u5168\u3066\uff08 ",(0,l.kt)("strong",{parentName:"p"},"a"),"ll\uff09\u306e\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30c6\u30b9\u30c8\u30d7\u30ed\u30bb\u30b9\u3092\u505c\u6b62\u3057\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u3057\u3066\u518d\u3073\u958b\u59cb\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"yarn rw test\n")),(0,l.kt)("p",null,"\u3053\u306e\u30c6\u30b9\u30c8\u3067\u4f55\u304c\u58ca\u308c\u305f\u304b\u308f\u304b\u308a\u307e\u3059\u304b\uff1f"),(0,l.kt)("p",null,(0,l.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/300/153312402-dd7f08bc-e23d-4acc-8202-cdfc9798a911.png",alt:"image"})),(0,l.kt)("p",null,"\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u5168\u6587\u3092\u8981\u6c42\u3057\u307e\u3057\u305f\u304c\u3001",(0,l.kt)("inlineCode",{parentName:"p"},"ArticlesCell")," \u3067\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u306b\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e ",(0,l.kt)("em",{parentName:"p"},"\u8981\u7d04")," \u3060\u3051\u3092\u8868\u793a\u3055\u305b\u305f\u3053\u3068\u3092\u601d\u3044\u51fa\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u3082\u306f\u3084\u30da\u30fc\u30b8\u4e0a\u306b\u5b58\u5728\u3057\u306a\u3044\u30d5\u30eb\u30c6\u30ad\u30b9\u30c8\u3068\u4e00\u81f4\u3059\u308b\u3053\u3068\u3092\u8981\u6c42\u3057\u3066\u3044\u307e\u3059\u3002"),(0,l.kt)("p",null,"\u3053\u306e\u30c6\u30b9\u30c8\u3092\u66f4\u65b0\u3057\u3066\u3001\u671f\u5f85\u3055\u308c\u308b\u632f\u308b\u821e\u3044\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002\u30c6\u30b9\u30c8\u306e\u6700\u826f\u306e\u65b9\u6cd5\u306b\u3064\u3044\u3066\u66f8\u304b\u308c\u305f\u672c\u304c\u305f\u304f\u3055\u3093\u3042\u308b\u306e\u3067\u3001\u3053\u306e\u30b3\u30fc\u30c9\u3067\u4f55\u3092\u30c6\u30b9\u30c8\u3059\u308b\u306b\u305b\u3088\u3001\u79c1\u305f\u3061\u304c\u9593\u9055\u3063\u305f\u3084\u308a\u65b9\u3092\u3057\u3066\u3044\u308c\u3070\u8ab0\u304b\u304c\u6559\u3048\u3066\u304f\u308c\u308b\u3053\u3068\u3067\u3057\u3087\u3046\u3002\u4e00\u4f8b\u3068\u3057\u3066\u3001\u6700\u3082\u5358\u7d14\u306a\u30c6\u30b9\u30c8\u306f\u3001\u51fa\u529b\u3055\u308c\u305f\u3082\u306e\u3092\u30b3\u30d4\u30fc\u3057\u3066\u305d\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u30c6\u30b9\u30c8\u306b\u4f7f\u3046\u3053\u3068\u3067\u3059\uff1a"),(0,l.kt)(s.Z,{groupId:"js-ts",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"js",label:"JavaScript",mdxType:"TabItem"}
1,(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="web/src/components/ArticlesCell.test.js"',title:'"web/src/components/ArticlesCell.test.js"'},"test('Success renders successfully', async () => {\n const articles = standard().articles\n render(<Success articles={articles} />)\n\n // highlight-start\n expect(screen.getByText(articles[0].title)).toBeInTheDocument()\n expect(\n screen.getByText(\n 'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Str...'\n )\n ).toBeInTheDocument()\n // highlight-end\n})\n"))),(0,l.kt)(i.Z,{value:"ts",label:"TypeScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'title="web/src/components/ArticlesCell.test.tsx"',title:'"web/src/components/ArticlesCell.test.tsx"'},"test('Success renders successfully', async () => {\n const articles = standard().articles\n render(<Success articles={articles} />)\n\n // highlight-start\n expect(screen.getByText(articles[0].title)).toBeInTheDocument()\n expect(\n screen.getByText(\n 'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Str...'\n )\n ).toBeInTheDocument()\n // highlight-end\n})\n")))),(0,l.kt)("p",null,"\u5207\u308a\u8a70\u3081\u308b\u6587\u5b57\u6570\u306f\u5f8c\u3067\u5909\u
166f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u3067\u3059\u304c\u3001\u3069\u306e\u3088\u3046\u306b\u30c6\u30b9\u30c8\u306b\u30ab\u30d7\u30bb\u30eb\u5316\u3059\u308b\u306e\u3067\u3057\u3087\u3046\u304b\uff1f\u3042\u308b\u3044\u306f\u305d\u3046\u3059\u3079\u304d\u3067\u3057\u3087\u3046\u304b\uff1f\u5207\u308a\u8a70\u3081\u308b\u6587\u5b57\u6570\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30cf\u30fc\u30c9\u30b3\u30fc\u30c9\u3055\u308c\u3066\u304a\u308a\u3001\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u672c\u5f53\u306b\u6c17\u306b\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\uff1a\u30d6\u30ed\u30b0\u8a18\u4e8b\u3092\u8868\u793a\u3059\u308b\u30da\u30fc\u30b8\u304c\uff08\u30b9\u30da\u30fc\u30b9\u306e\u554f\u984c\u3084\u30c7\u30b6\u30a4\u30f3\u306e\u5236\u7d04\u306a\u3069\u306b\u57fa\u3065\u3044\u3066\uff09\u8868\u793a\u3059\u308b\u6587\u5b57\u6570\u3092\u6c7a\u5b9a\u3059\u308b\u3079\u304d\u3060\u3068\u601d\u3044\u307e\u305b\u3093\u304b\uff1f\u305f\u3068\u3048 ",(0,l.kt)("inlineCode",{parentName:"p"},"truncate()")," \u95a2\u6570\u3092\u5171\u6709\u306e\u5834\u6240\u306b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3057\u3066 ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u3068\u3053\u306e\u30c6\u30b9\u30c8\u306e\u4e21\u65b9\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305f\u3068\u3057\u3066\u3082\u3001\u30c6\u30b9\u30c8\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u306b\u3064\u3044\u3066\u3042\u307e\u308a\u306b\u3082\u591a\u304f\u306e\u3053\u3068\u3092\u77e5\u3063\u3066\u3044\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059 -- \u306a\u305c\u30c6\u30b9\u30c8\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u306e\u5185\u90e8\u3068\u3053\u306e ",(0,l.kt)("inlineCode",{parentName:"p"},"truncate()")," \u95a2\u6570\u3092\u4f7f\u3046\u3053\u3068\u306b\u3064\u3044\u3066\u8a73\u7d30\u306a\u77e5\u8b58\u3092\u6301\u305f\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u306e\u3067\u3057\u3087\u3046\u304b\uff1f\u305d\u3093\u306a\u3053\u3068\u306f\u306a\u3044\u306f\u305a\u3067\u3059\uff01\u30c6\u30b9\u30c8\u7406\u8ad6\u306e1\u3064\u306b\u30c6\u30b9\u30c8\u5bfe\u8c61\u306f\u30d6\u30e9\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3067\u3042\u308b\u3079\u304d\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3059\uff1a\u30c6\u30b9\u30c8\u5bfe\u8c61\u306e\u5185\u90e8\u3092\u898b\u308b\u3053\u3068\u306f\u3067\u304d\u305a\u3001\u3042\u306a\u305f\u304c\u30c6\u30b9\u30c8\u3067\u304d\u308b\u306e\u306f\u3001\u3042\u308b\u30c7\u30fc\u30bf\u3092\u5165\u529b\u3057\u305f\u3068\u304d\u306b\u51fa\u529b\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3060\u3051\u3067\u3059\u3002"),(0,l.kt)("p",null,'\u59a5\u5354\u3057\u3066\u307f\u307e\u3057\u3087\u3046 -- \u3053\u306e\u6a5f\u80fd\u304c "summary" \u3068\u3044\u3046 props \u3092\u6301\u3064\u3053\u3068\u304b\u3089\u3001\u30c6\u30ad\u30b9\u30c8\u3092\u77ed\u304f\u3059\u308b\u305f\u3081\u306b ',(0,l.kt)("em",{parentName:"p"},"\u4f55\u304b")," \u3092\u3057\u3066\u3044\u308b\u306e\u3060\u3068\u63a8\u6e2c\u3067\u304d\u307e\u3059\u3002\u305d\u3053\u3067\u3001\u4eca\u3059\u3050\u306b\u5408\u7406\u7684\u306b\u63a8\u6e2c\u3067\u304d\u308b3\u3064\u306e\u3053\u3068\u3092\u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b\u306e\u306f\u3069\u3046\u3067\u3057\u3087\u3046\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u672c\u6587\u306e\u5168\u6587\u304c ",(0,l.kt)("em",{parentName:"li"},"\u5b58\u5728\u3057\u306a\u3044")),(0,l.kt)("li",{parentName:"ol"},"\u3057\u304b\u3057\u3001\u5c11\u306a\u304f\u3068\u3082\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u6700\u521d\u306e\u6570\u5358\u8a9e\u306f\u5b58\u5728\u3059\u308b"),(0,l.kt)("li",{parentName:"ol"},'\u8868\u793a\u3055\u308c\u308b\u30c6\u30ad\u30b9\u30c8\u304c "..." \u3067\u7d42\u308f\u3063\u3066\u3044\u308b')),(0,l.kt)("p",null,"\u3053\u308c\u306b\u3088\u308a\u3001\u305f\u3068\u3048\u307025\u30ef\u30fc\u30c9\u306b\u5207\u308a\u6368\u3066\u308b\u5834\u5408\u3001\u3042\u308b\u3044\u306f\u6570\u767e\u30ef\u30fc\u30c9\u306b\u5207\u308a\u4e0a\u3052\u308b\u5834\u5408\u306e\u30d0\u30c3\u30d5\u30a1\u304c\u78ba\u4fdd\u3067\u304d\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u3053\u308c\u306f\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u672c\u6587\u304c\u5207\u308a\u8a70\u3081\u306e\u5236\u9650\u3088\u308a\u77ed\u3044\u5834\u5408\u3092\u542b\u307f ",(0,l.kt)("em",{parentName:"p"},"\u307e\u305b\u3093")," \u3002\u305d\u306e\u5834\u5408\u306f\u5168\u6587\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001 ",(0,l.kt)("inlineCode",{parentName:"p"},"...")," \u3092\u8ffd\u52a0\u3057\u306a\u3044\u3088\u3046\u306b ",(0,l.kt)("inlineCode",{parentName:"p"},"truncate()")," \u95a2\u6570\u3092\u66f4\u65b0\u3059\u3079\u304d\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u3053\u306e\u6a5f\u80fd\u8ffd\u52a0\u3068\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u306f\u3001\u81ea\u7531\u6642\u9593\u306b\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u306d ;\uff09"),(0,l.kt)("h3",{id:"adding-the-test"},"Adding the Test"),(0,l.kt)("p",null,"\u3088\u3057\u3001\u3084\u3063\u3066\u307f\u307e\u3057\u3087\u3046\uff1a"),(0,l.kt)(s.Z,{groupId:"js-ts",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"js",label:"JavaScript",mdxType:"TabItem"}
1,(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="web/src/components/ArticlesCell.test.js"',title:'"web/src/components/ArticlesCell.test.js"'},"// highlight-next-line\nimport { render, screen, within } from '@redwoodjs/testing'\n\nimport { Loading, Empty, Failure, Success } from './ArticlesCell'\nimport { standard } from './ArticlesCell.mock'\n\ndescribe('ArticlesCell', () => {\n test('Loading renders successfully', () => {\n expect(() => {\n render(<Loading />)\n }).not.toThrow()\n })\n\n test('Empty renders successfully', async () => {\n expect(() => {\n render(<Empty />)\n }).not.toThrow()\n })\n\n test('Failure renders successfully', async () => {\n expect(() => {\n render(<Failure error={new Error('Oh no')} />)\n }).not.toThrow()\n })\n\n test('Success renders successfully', async () => {\n const articles = standard().articles\n render(<Success articles={articles} />)\n\n // highlight-start\n articles.forEach((article) => {\n const truncatedBody = article.body.substring(0, 10)\n const matchedBody = screen.getByText(truncatedBody, { exact: false })\n const ellipsis = within(matchedBody).getByText('...', { exact: false })\n\n expect(screen.getByText(article.title)).toBeInTheDocument()\n expect(screen.queryByText(article.body)).not.toBeInTheDocument()\n expect(matchedBody).toBeInTheDocument()\n expect(ellipsis).toBeInTheDocument()\n })\n // highlight-end\n })\n})\n"))),(0,l.kt)(i.Z,{value:"ts",label:"TypeScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'title="web/src/components/ArticlesCell.test.tsx"',title:'"web/src/components/ArticlesCell.test.tsx"'},"// highlight-next-line\nimport { render, screen, within } from '@redwoodjs/testing'\n\nimport { Loading, Empty, Failure, Success } from './ArticlesCell'\nimport { standard } from './ArticlesCell.mock'\n\ndescribe('ArticlesCell', () => {\n test('Loading renders successfully', () => {\n expect(() => {\n render(<Loading />)\n }).not.toThrow()\n })\n\n test('Empty renders successfully', async () => {\n expect(() => {\n render(<Empty />)\n }).not.toThrow()\n })\n\n test('Failure renders successfully', async () => {\n expect(() => {\n render(<Failure error={new Error('Oh no')} />)\n }).not.toThrow()\n })\n\n test('Success renders successfully', async () => {\n const articles = standard().articles\n render(<Success articles={articles} />)\n\n // highlight-start\n articles.forEach((article) => {\n const truncatedBody = article.body.substring(0, 10)\n const matchedBody = screen.getByText(truncatedBody, { exact: false })\n const ellipsis = within(matchedBody).getByText('...', { exact: false })\n\n expect(screen.getByText(article.title)).toBeInTheDocument()\n expect(screen.queryByText(article.body)).not.toBeInTheDocument()\n expect(matchedBody).toBeInTheDocument()\n expect(ellipsis).toBeInTheDocument()\n })\n // highlight-end\n })\n})\n")))),(0,l.kt)("p",null,"\u3053\u308c\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"standard()")," \u30e2\u30c3\u30af\u5185\u306e\u5404\u30d6\u30ed\u30b0\u8a18\u4e8b\u3092\u30eb\u30fc\u30d7\u3057\u3001\u305d\u308c\u305e\u308c\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u306b\u5bfe\u3057\u3066\u30c6\u30b9\u30c8\u3092\u884c\u3044\u307e\u3059\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"const truncatedBody = article.body.substring(0, 10)\n")),(0,l.kt)("p",null,"\u30d6\u30ed\u30b0\u8a18\u4e8b\u672c\u6587\u306e\u6700\u521d\u306e10\u6587\u5b57\u3092\u683c\u7d0d\u3057\u305f\u5909\u6570 ",(0,l.kt)("inlineCode",{parentName:"p"},"truncatedBody")," \u3092\u4f5c\u6210\u3057\u307e\u3059\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"const matchedBody = screen.getByText(truncatedBody, { exact: false })\n")),(0,l.kt)("p",null,"\u753b\u9762\u4e0a\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u305fHTML\u3092\u691c\u7d22\u3057\u3066\u3001\u5207\u308a\u6368\u3066\u3089\u308c\u305f\u672c\u6587\u3092\u542b\u3080HTML\u8981\u7d20\u3092\u898b\u3064\u3051\u307e\u3059\uff08\u3053\u3053\u3067 ",(0,l.kt)("inlineCode",{parentName:"p"},"{ exact: false }")," \u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u901a\u5e38\u306f\u6b63\u78ba\u306a\u30c6\u30ad\u30b9\u30c8\u3068\u305d\u306e\u30c6\u30ad\u30b9\u30c8\u3060\u3051\u304c\u5b58\u5728\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u306e\u5834\u5408\u306f\u304a\u305d\u3089\u304f10\u6587\u5b57\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\uff09\u3002"),(0,l.kt)("pre",null,(0,l.kt)("c
1ode",{parentName:"pre",className:"language-javascript"},"const ellipsis = within(matchedBody).getByText('...', { exact: false })\n")),(0,l.kt)("p",null,"\u524d\u306e\u884c\u3067\u898b\u3064\u304b\u3063\u305fHTML\u8981\u7d20\u306e\u4e2d\u3067\u3001 ",(0,l.kt)("inlineCode",{parentName:"p"},"...")," \u3092\u63a2\u3057\u307e\u3059\u3002\u3053\u308c\u3082\u5b8c\u5168\u4e00\u81f4\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"expect(screen.getByText(article.title)).toBeInTheDocument()\n")),(0,l.kt)("p",null,"\u30da\u30fc\u30b8\u5185\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u30bf\u30a4\u30c8\u30eb\u3092\u691c\u7d22\u3057\u307e\u3059\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"expect(screen.queryByText(article.body)).not.toBeInTheDocument()\n")),(0,l.kt)("p",null,"\u30d6\u30ed\u30b0\u8a18\u4e8b\u672c\u6587\u306e ",(0,l.kt)("em",{parentName:"p"},"\u5168\u6587")," \u3092\u63a2\u3057\u3066\u3082\u3001\u5b58\u5728 ",(0,l.kt)("em",{parentName:"p"},"\u3057\u306a\u3044")," \u306f\u305a\u3067\u3059\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"expect(matchedBody).toBeInTheDocument()\n")),(0,l.kt)("p",null,"\u5207\u308a\u8a70\u3081\u3089\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u304c\u5b58\u5728\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"expect(ellipsis).toBeInTheDocument()\n")),(0,l.kt)("p",null,"\u7701\u7565\u90e8\u5206\uff08 ",(0,l.kt)("inlineCode",{parentName:"p"},"...")," \uff09\u304c\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002"),(0,l.kt)("admonition",{type:"info"},(0,l.kt)("mdxAdmonitionTitle",{parentName:"admonition"},"What's the difference between ",(0,l.kt)("inlineCode",{parentName:"mdxAdmonitionTitle"},"getByText()")," and ",(0,l.kt)("inlineCode",{parentName:"mdxAdmonitionTitle"},"queryByText()"),"?"),(0,l.kt)("p",{parentName:"admonition"},(0,l.kt)("inlineCode",{parentName:"p"},"getByText()")," \u306f\u30c6\u30ad\u30b9\u30c8\u304c\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5185\u306b\u898b\u3064\u304b\u3089\u306a\u304b\u3063\u305f\u5834\u5408\u306b\u30a8\u30e9\u30fc\u3092\u30b9\u30ed\u30fc\u3057\u307e\u3059\u304c\u3001 ",(0,l.kt)("inlineCode",{parentName:"p"},"queryByText()")," \u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"null")," \u3092\u8fd4\u3057\u30c6\u30b9\u30c8\u3092\u7d9a\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff08\u305d\u3057\u3066\u3001\u3053\u308c\u306f\u3042\u308b\u30c6\u30ad\u30b9\u30c8\u304c\u30da\u30fc\u30b8\u4e0a\u306b\u5b58\u5728 ",(0,l.kt)("em",{parentName:"p"},"\u3057\u306a\u3044")," \u3053\u3068\u3092\u30c6\u30b9\u30c8\u3059\u308b\u4e00\u3064\u306e\u65b9\u6cd5\u3067\u3059\uff09\u3002\u3053\u308c\u3089\u306b\u3064\u3044\u3066\u306f\u3001",(0,l.kt)("a",{parentName:"p",href:"https://testing-library.com/docs/dom-testing-library/api-queries"},"DOM Testing Library Queries")," \u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u8a73\u3057\u304f\u8aac\u660e\u3055\u308c\u3066\u3044\u307e\u3059\u3002")),(0,l.kt)("p",null,"\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u3068\u3059\u3050\u306b\u3001\u30c6\u30b9\u30c8\u304c\u5b9f\u884c\u3055\u308c\u5408\u683c\u3057\u3066\u3044\u308b\u306f\u305a\u3067\u3059\uff01"),(0,l.kt)("p",null,"\u4ed6\u306b\u4f55\u3082\u58ca\u308c\u3066\u3044\u306a\u3044\u3053\u3068\u3092\u78ba\u8a8d\u3057\u305f\u3044\u5834\u5408\u306f\u3001",(0,l.kt)("inlineCode",{parentName:"p"},"a")," \u3092\u62bc\u3057\u3066\u30b9\u30a4\u30fc\u30c8\u5168\u4f53\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002 ",(0,l.kt)("inlineCode",{parentName:"p"},"o")," \u3092\u62bc\u3059\u3068\u3001\u518d\u3073\u5909\u66f4\u70b9\u306e\u307f\u306e\u30c6\u30b9\u30c8\uff08 ",(0,l.kt)("strong",{parentName:"p"},"o"),"nly\uff09\u306b\u623b\u308a\u307e\u3059\uff08\u6bce\u56de\u30c6\u30b9\u30c8\u30b9\u30a4\u30fc\u30c8\u3092\u5168\u90e8\u5b9f\u884c\u3059\u308b\u306e\u306f\u60aa\u3044\u3053\u3068\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u524d\u56de\u30b3\u30fc\u30c9\u3092\u30b3\u30df\u30c3\u30c8\u3057\u305f\u3068\u304d\u304b\u3089\u5909\u66f4\u3055\u308c\u305f\u70b9\u3060\u3051\u3092\u30c6\u30b9\u30c8\u3059\u308b\u3088\u308a\u3082\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\uff09\u3002"),(0,l.kt)("p",null,"\u30c6\u30b9\u30c8\u3057\u3066\u3044\u308b\u5185\u5bb9\u304c\u6b63\u3057\u3044\u304b\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001 ",(0,l.kt)("inlineCode",{parentName:"p"},"ArticlesCell.js")," \u3092\u958b\u3044\u3066 ",(0,l.kt)("inlineCode",{parentName:"p"},"summary={true}")," props\u3092\u524a\u9664\uff08\u307e\u305f\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"false")," \u306b\uff09\u3059\u308b\u3068\u3001\u30c6\u30b9\u30c8\u306f\u5931\u6557\u3059\u308b\u306f\u305a\u3067\u3059\uff1a\u30d6\u30ed\u30b0\u8a18\u4e8b\u672c\u6587\u306e\u5168\u6587\u304c\u30da\u30fc\u30b8\u306b ",(0,l.kt)("em",{parentName:"p"},"\u8868\u793a\u3055\u308c")," \u3001\u30c6\u30b9\u30c8\u306e ",(0,l.kt)("inlineCode",{parentName:"p"},"expect(screen.queryByText(article.body)).not.toBeInTheDocument()")," \u304c\u5931\u6557\u3059\u308b\u306f\u305a\u3067\u3059\u3002\u306a\u305c\u306a\u3089\u30d6\u30ed\u30b0\u8a18\u4e8b\u672c\u6587\u306e\u5168\u6587\u304cdocument\u306b\u5b58\u5728 ",(0,l.kt)("em",{parentName:"p"},"\u3059\u308b")," \u304b\u3089\u3067\u3059\u3002\u7d9a\u3051\u308b\u524d\u306b ",(0,l.kt)("inlineCode",{parentName:"p"},"summary={true}")," \u306b\u623b\u3059\u306e\u3092\u304a\u5fd8\u308c\u306a\u304f\u3002"),(0,l.kt)("h3",{id:"whats-the-deal-with-mocks"},"What's the Deal with Mocks?"),(0,l.kt)("p",null,"\u79c1\u305f\u3061\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u8a18\u4e8b\u304c\u3069\u3053\u304b\u3089\u6765\u308b\u306e\u304b\u4e0d\u601d\u8b70\u306b\u601d\u3044\u307e\u305b\u3093\u3067\u3057\u305f\u304b\uff1f\u958b\u767a\u7528\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3067\u3057\u3087\u3046\u304b\uff1f\u3044\u3044\u3048\uff1a\u305d\u306e\u30c7\u30fc\u30bf\u306f ",(0,l.kt)("strong",{parentName:"p"},"\u30e2\u30c3\u30af")," \u304b\u3089\u6765\u3066\u3044\u308b\u306e\u3067\u3059\u3002\u3053\u308c\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"ArticlesCell.mock.js")," \u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30c6\u30b9\u30c8\u3001\u30b9\u30c8\u30fc\u30ea\u30fc\u306e\u30d5\u30a1\u30a4\u30eb\u306e\u96a3\u306b\u3042\u308a\u307e\u3059\u3002\u30e2\u30c3\u30af\u306f\u3001Storybook \u306e\u30b9\u30c8\u30fc\u30ea\u30fc\u3084\u30c6\u30b9\u30c8\u306b\u304a\u3044\u3066\u3001GraphQL\u306b\u3088\u3063\u3066\u901a\u5e38\u8fd4\u3055\u308c\u308b\u30c7\u30fc\u30bf\u3092\u5b9a\u7fa9\u3057\u305f\u3044\u5834\u5408\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\u30bb\u30eb\u3067\u306fGraphQL\u306e\u547c\u3073\u51fa\u3057\uff08\u30d5\u30a1\u30a4\u30eb\u306e\u5148\u982d\u306e\u5909\u6570 ",(0,l.kt)("inlineCode",{parentName:"p"},"QUERY")," \u3067\u5b9a\u7fa9\u3055\u308c\u305f\u30af\u30a8\u30ea\uff09\u304c\u884c\u308f\u308c ",(0,l.kt)("inlineCode",{parentName:"p"},"Success")," \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u8fd4\u3057\u307e\u3059\u3002Storybook \u3084\u30c6\u30b9\u30c8\u306e\u305f\u3081\u3060\u3051\u306b\u3001API\u30b5\u30a4\u30c9\u306e\u30b5\u30fc\u30d0\u3092\u52d5\u304b\u3057\u3066\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u5b9f\u30c7\u30fc\u30bf\u304c\u5fc5\u8981\u306b\u306a\u308b\u306e\u306f\u56f0\u308b\u306e\u3067\u3001Redwood\u306f\u305d\u308c\u3089\u306eGraphQL\u30b3\u30fc\u30eb\u3092\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30c8\u3057\u3066\u3001\u4ee3\u308f\u308a\u306b\u30e2\u30c3\u30af\u304b\u3089\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u307e\u3059\u3002"),(0,l.kt)("admonition",{title:"If the server is being mocked, how do we test the api-side code?",type:"info"},(0,l.kt)("p",{parentName:"admonition"},"\u6b21\u306b\u30d6\u30ed\u30b0\u306b\u65b0\u3057\u3044\u6a5f\u80fd\u3092\u30a4\u30c1\u304b\u3089\u5b9f\u88c5\u3059\u308b\u3068\u304d\u306b\u8aac\u660e\u3057\u307e\u3059\uff01")),(0,l.kt)("p",null,"\u30e2\u30c3\u30af\u306b\u3064\u3051\u305f\u540d\u524d\u306f\u3001\u30c6\u30b9\u30c8\u3084\u30b9\u30c8\u30fc\u30ea\u30fc\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n\u4f7f\u3044\u305f\u3044\u3082\u306e\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3060\u3051\u3067\uff08\u751f\u6210\u3055\u308c\u305f\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3067\u306f ",(0,l.kt)("inlineCode",{parentName:"p"}
1,"standard")," \u304c\u30a4\u30f3\u30dd\u30fc\u30c8\u3055\u308c\u307e\u3059\uff09\u3001\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u3092\u4f7f\u7528\u3057\u3066 ",(0,l.kt)("strong",{parentName:"p"},"Success")," \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002"),(0,l.kt)("p",null,"\u30e2\u30c3\u30af\u304c\u3053\u3093\u306a\u611f\u3058\u3060\u3068\u3057\u307e\u3059\uff1a"),(0,l.kt)(s.Z,{groupId:"js-ts",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"js",label:"JavaScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"export const standard = () => ({\n articles: [\n {\n id: 1,\n title: 'First Post',\n body: `Neutra tacos hot chicken prism raw denim...`,\n createdAt: '2020-01-01T12:34:56Z',\n },\n {\n id: 2,\n title: 'Second Post',\n body: `Master cleanse gentrify irony put a bird on it...`,\n createdAt: '2020-01-01T12:34:56Z',\n },\n ],\n})\n"))),(0,l.kt)(i.Z,{value:"ts",label:"TypeScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-javascript"},"export const standard = () => ({\n articles: [\n {\n id: 1,\n title: 'First Post',\n body: `Neutra tacos hot chicken prism raw denim...`,\n createdAt: '2020-01-01T12:34:56Z',\n },\n {\n id: 2,\n title: 'Second Post',\n body: `Master cleanse gentrify irony put a bird on it...`,\n createdAt: '2020-01-01T12:34:56Z',\n },\n ],\n})\n")))),(0,l.kt)("p",null,"\u8fd4\u3055\u308c\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u6700\u521d\u306e\u30ad\u30fc\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"articles")," \u3068\u3044\u3046\u540d\u524d\u3067\u3059\u3002\u3053\u308c\u306f\u3001\u30bb\u30eb\u306e ",(0,l.kt)("strong",{parentName:"p"},"Success")," \u306b\u6e21\u3055\u308c\u308b\u3067\u3042\u308d\u3046 props \u306e\u540d\u524d\u3067\u3082\u3042\u308a\u307e\u3059\uff1a"),(0,l.kt)(s.Z,{groupId:"js-ts",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"js",label:"JavaScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},"// highlight-next-line\nexport const Success = ({ articles }) => {\n return (\n { articles.map((article) => <Article article={article} />) }\n )\n}\n"))),(0,l.kt)(i.Z,{value:"ts",label:"TypeScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx"},"// highlight-next-line\nexport const Success = ({ articles }: CellSuccessProps<ArticlesQuery>) => {\n return (\n { articles.map((article) => <Article article={article} />) }\n )\n}\n")))),(0,l.kt)("p",null,"\u3064\u307e\u308a\u3001\u30b9\u30c8\u30fc\u30ea\u30fc\u3084\u30c6\u30b9\u30c8\u3067 ",(0,l.kt)("strong",{parentName:"p"},"Success")," \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046\u969b\u306b\u3001 ",(0,l.kt)("inlineCode",{parentName:"p"},"standard()")," \u306e\u7d50\u679c\u3092\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u3067\u5c55\u958b\u3059\u308c\u3070\u3059\u3079\u3066\u304c\u3046\u307e\u304f\u3044\u304f\u306e\u3067\u3059\uff1a"),(0,l.kt)(s.Z,{groupId:"js-ts",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"js",label:"JavaScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"title=web/src/components/ArticlesCell/ArticlesCell.stories.js",title:"web/src/components/ArticlesCell/ArticlesCell.stories.js"},"import { Success } from './ArticlesCell'\nimport { standard } from './ArticlesCell.mock'\n\nexport const success = () => {\n // highlight-next-line\n return Success ? <Success {...standard()} /> : null\n}\n\nexport default { title: 'Cells/ArticlesCell' }\n"))),(0,l.kt)(i.Z,{value:"ts",label:"TypeScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx",metastring:"title=web/src/components/ArticlesCell/ArticlesCell.stories.tsx",title:"web/src/components/ArticlesCell/ArticlesCell.stories.tsx"},"import { Success } from './ArticlesCell'\nimport { standard } from './ArticlesCell.mock'\n\nexport const success = () => {\n // highlight-next-line\n return Success ? <Success {...standard()} /> : null\n}\n\nexport default { title: 'Cells/ArticlesCell' }\n")))),(0,l.kt)("p",null,"\u3053\u306e\u69cb\u6587\u304c\u5c11\u3057\u7c21\u6f54 ",(0,l.kt)("em",{parentName:"p"},"\u904e\u304e\u308b")," \u3068\u611f\u3058\u308b\u4eba\u3082\u3044\u3066\u3001\u3067\u3042\u308c\u3070\u5b9f\u969b\u306e\u30b3\u30fc\u30c9\u3068\u540c\u3058\u3088\u3046\u306b ",(0,l.kt)("inlineCode",{parentName:"p"},"<Success>")," \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u547c\u3073\u51fa\u3055\u308c\u308b\u306e\u3092\u898b\u305f\u3044\u3068\u601d\u3046\u3067\u3057\u3087\u3046\u3002\u3082\u3057\u305d\u306e\u3088\u3046\u306a\u65b9\u304c\u3044\u308c\u3070\u3001\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u3092\u4f7f\u308f\u305a\u306b ",(0,l.kt)("inlineCode",{parentName:"p"},"standard()")," \u306e ",(0,l.kt)("inlineCode",{parentName:"p"},"articles")," \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u53e4\u3044\u65b9\u6cd5\u3067\u547c\u3073\u51fa\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff1a"),(0,l.kt)(s.Z,{groupId:"js-ts",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"js",label:"JavaScript",mdxType:"TabItem"}
1,(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"title=web/src/components/ArticlesCell/ArticlesCell.stories.js",title:"web/src/components/ArticlesCell/ArticlesCell.stories.js"},"import { Success } from './ArticlesCell'\nimport { standard } from './ArticlesCell.mock'\n\nexport const success = () => {\n // highlight-next-line\n return Success ? <Success articles={standard().articles} /> : null\n}\n\nexport default { title: 'Cells/ArticlesCell' }\n"))),(0,l.kt)(i.Z,{value:"ts",label:"TypeScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-tsx",metastring:"title=web/src/components/ArticlesCell/ArticlesCell.stories.tsx",title:"web/src/components/ArticlesCell/ArticlesCell.stories.tsx"},"import { Success } from './ArticlesCell'\nimport { standard } from './ArticlesCell.mock'\n\nexport const success = () => {\n // highlight-next-line\n return Success ? <Success articles={standard().articles} /> : null\n}\n\nexport default { title: 'Cells/ArticlesCell' }\n")))),(0,l.kt)("p",null,"\u30e2\u30c3\u30af\u306f\u597d\u304d\u306a\u3060\u3051\u7528\u610f\u3067\u304d\u307e\u3059\u3002\u5fc5\u8981\u306a\u30e2\u30c3\u30af\u306e\u540d\u524d\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306eprops\u3068\u3057\u3066\u9001\u4fe1\u3059\u308b\u3060\u3051\u3067\u3059\u3002"),(0,l.kt)("h3",{id:"testing-article"},"Testing Article"),(0,l.kt)("p",null,"\u30c6\u30b9\u30c8\u30b9\u30a4\u30fc\u30c8\u306f\u518d\u3073\u30d1\u30b9\uff08\u6210\u529f\uff09\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u30c8\u30ea\u30c3\u30af\u304c\u3042\u308a\u307e\u3059\uff01\u79c1\u305f\u3061\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u8ffd\u52a0\u3057\u305f\u5b9f\u969b\u306e ",(0,l.kt)("inlineCode",{parentName:"p"},"summary")," \uff08\u8981\u7d04\uff09\u6a5f\u80fd\u306e\u305f\u3081\u306e\u30c6\u30b9\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u79c1\u305f\u3061\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"ArticlesCell")," \u306e\u30ec\u30f3\u30c0\u30fc\uff08\u6700\u7d42\u7684\u306b ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u3092\u63cf\u753b\u3059\u308b\uff09\u304c\u8981\u7d04\u3092\u542b\u3080\u3053\u3068\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3057\u305f\u304c\u3001\u8981\u7d04\u3092\u63cf\u753b\u3059\u308b\u3053\u3068\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u3060\u3051\u304c\u6301\u3063\u3066\u3044\u308b\u77e5\u8b58\u3067\u3059\u3002"),(0,l.kt)("p",null,'\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\u3068\u304d\u3001\u3053\u306e\u3088\u3046\u306a\u6a5f\u80fd\u3092\u30c6\u30b9\u30c8\u3059\u308b\u306e\u3092\u5fd8\u308c\u304c\u3061\u3067\u3059\u3002\nWinston Churchill \u306f "a thorough test suite requires eternal vigilance"\uff08\u5fb9\u5e95\u7684\u306a\u30c6\u30b9\u30c8\u30b9\u30a4\u30fc\u30c8\u3092\u6210\u3059\u306b\u306f\u6c38\u9060\u306e\u8b66\u6212\u304c\u5fc5\u8981\u3060\uff09\u3068\u8a00\u3063\u305f\u306e\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\uff1f',(0,l.kt)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/Test-driven_development"},"Test Driven Development")," \uff08TDD\uff1a\u30c6\u30b9\u30c8\u99c6\u52d5\u958b\u767a\uff09 \u306e\u3088\u3046\u306a\u30c6\u30af\u30cb\u30c3\u30af\u306f\u3001\u3053\u306e\u50be\u5411\u306b\u5bfe\u6297\u3059\u308b\u305f\u3081\u306b\u78ba\u7acb\u3055\u308c\u307e\u3057\u305f\uff1a\u65b0\u3057\u3044\u6a5f\u80fd\u3092\u66f8\u304f\u3068\u304d\u3001\u307e\u305a\u30c6\u30b9\u30c8\u3092\u66f8\u304d\u3001\u305d\u308c\u304c\u5931\u6557\u3059\u308b\u306e\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001\u30c6\u30b9\u30c8\u306b\u5408\u683c\u3059\u308b\u3088\u3046\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u307e\u3059\u3002\u305d\u3046\u3059\u308c\u3070\u3001\u3042\u306a\u305f\u304c\u66f8\u304f\u5b9f\u969b\u306e\u30b3\u30fc\u30c9\u306e\u3059\u3079\u3066\u306e\u884c\u304c\u3001\u30c6\u30b9\u30c8\u306b\u3088\u3063\u3066\u88cf\u4ed8\u3051\u3089\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002\u79c1\u305f\u3061\u304c\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u306f\u3001\u89aa\u3057\u307f\u3092\u8fbc\u3081\u3066 ",(0,l.kt)("a",{parentName:"p",href:"https://medium.com/table-xi/development-driven-testing-673d3959dac2"},"Development Driven Testing")," \u3068\u547c\u3070\u308c\u3066\u3044\u307e\u3059\u3002\u3042\u306a\u305f\u306f\u304a\u305d\u3089\u304f\u3001\u3053\u306e\u9593\u306e\u3069\u3053\u304b\u306b\u843d\u3061\u7740\u304f\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u3042\u308b\u683c\u8a00\u306f\u5e38\u306b\u771f\u5b9f\u3067\u3059\uff1a\u30c6\u30b9\u30c8\u306f\u306a\u3044\u3088\u308a\u3042\u3063\u305f\u307b\u3046\u304c\u3044\u3044\u3002"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u8981\u7d04\u6a5f\u80fd\u306f\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u304c\u3001\u30c6\u30b9\u30c8\u3059\u308b\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\uff1a"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"}
1,"truncate()")," \u95a2\u6570\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u3066\u3001\u76f4\u63a5\u30c6\u30b9\u30c8\u3059\u308b"),(0,l.kt)("li",{parentName:"ul"},"\u6700\u7d42\u7684\u306a\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u305f\u72b6\u614b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30c6\u30b9\u30c8\u3059\u308b")),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"truncate()")," \u304c ",(0,l.kt)("inlineCode",{parentName:"p"},"Article"),' \u306b "\u5c5e\u3059\u308b"\uff08belongs to\uff09 \u5834\u5408\u306f\u3001\u5916\u90e8\u304c\u3053\u306e\u95a2\u6570\u306b\u3064\u3044\u3066\u5fc3\u914d\u3057\u305f\u308a\u3001\u305d\u306e\u5b58\u5728\u3092\u77e5\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n\u3082\u3057\u958b\u767a\u306e\u9014\u4e2d\u3067\u5225\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30c6\u30ad\u30b9\u30c8\u306e\u5207\u308a\u8a70\u3081\u3092\u5fc5\u8981\u3068\u3059\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u3089\u3001\u305d\u306e\u6642\u304c\u3001\u3053\u306e\u95a2\u6570\u3092\u5171\u6709\u306e\u5834\u6240\u306b\u79fb\u52d5\u3057\u3066\u3001\u305d\u308c\u3092\u5fc5\u8981\u3068\u3059\u308b\u4e21\u65b9\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u7d76\u597d\u306e\u6a5f\u4f1a\u306b\u306a\u308b\u3067\u3057\u3087\u3046\u3002\u305d\u3046\u3059\u308c\u3070 ',(0,l.kt)("inlineCode",{parentName:"p"},"truncate()"),' \u306f\u5c02\u7528\u306e\u30c6\u30b9\u30c8\u3092\u6301\u3064\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3057\u304b\u3057\u4eca\u306f\u3001\u95a2\u5fc3\u4e8b\u306e\u5206\u96e2\u3092\u7dad\u6301\u3057\u3001\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3064\u3044\u3066 "\u516c\u958b" \u3055\u308c\u3066\u3044\u308b\u3082\u306e -- \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u7d50\u679c -- \u3092\u30c6\u30b9\u30c8\u3057\u307e\u3057\u3087\u3046\u3002'),(0,l.kt)("p",null,"\u3053\u306e\u5834\u5408\u3001\u51fa\u529b\u304c\u53b3\u5bc6\u306b\u6587\u5b57\u5217\u4e00\u81f4\u3059\u308b\u3053\u3068\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3057\u3087\u3046\u3002\u8981\u7d04\u306e\u9577\u3055\u306b\u95a2\u3059\u308b\u77e5\u8b58\u306f ",(0,l.kt)("inlineCode",{parentName:"p"},"Article")," \u81ea\u8eab\u306b\u542b\u307e\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u6642\u70b9\u3067\u306f\u3001\u3053\u306e\u7279\u5b9a\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u7d50\u679c\u306b\u5bc6\u7d50\u5408\u306a\u30c6\u30b9\u30c8\u3067\u3042\u3063\u3066\u3082\u554f\u984c\u306a\u3044\u3067\u3057\u3087\u3046\uff08 ",(0,l.kt)("inlineCode",{parentName:"p"},"ArticlesCell")," \u81ea\u8eab\u306f\u5207\u308a\u8a70\u3081\u308b\u9577\u3055\u3092\u77e5\u3089\u306a\u3044\u306e\u3067\u3001\u5358\u306b ",(0,l.kt)("em",{parentName:"p"},"\u4f55\u304b")," \u304c\u30c6\u30ad\u30b9\u30c8\u3092\u77ed\u304f\u3057\u3066\u3044\u308b\u3060\u3051\u3067\u3059\uff09\u3002\u30b3\u30fc\u30c9\u3092\u5909\u66f4\u3057\u3066\u3082\u30c6\u30b9\u30c8\u304c\u58ca\u308c\u306a\u3044\u3088\u3046\u5b8c\u74a7\u306b\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3057\u7d9a\u3051\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u304c\u3001\u5b9f\u969b\u306b\u305d\u306e\u30ec\u30d9\u30eb\u306e\u67d4\u8edf\u6027\u304c\u5fc5\u8981\u3067\u3057\u3087\u3046\u304b\uff1f\u305d\u308c\u306f\u5e38\u306b\u30c8\u30ec\u30fc\u30c9\u30aa\u30d5\u306a\u306e\u3067\u3059\uff01"),(0,l.kt)("p",null,"\u30c6\u30b9\u30c8\u306b\u3042\u308b\u30b5\u30f3\u30d7\u30eb\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u30c7\u30fc\u30bf\u3092\u5b9a\u6570\u306b\u79fb\u52d5\u3057\u3066\u3001\u65e2\u5b58\u306e\u30c6\u30b9\u30c8\uff08 ",(0,l.kt)("inlineCode",{parentName:"p"},"summary")," props \u3092\u5168\u304f\u6e21\u3055\u306a\u3044\u3053\u3068\u3067\u5168\u6587\u304c\u63cf\u753b\u3055\u308c\u308b\u3053\u3068\u3092\u30c6\u30b9\u30c8\u3059\u308b) \u3068\u3001\u8981\u7d04\u304c\u63cf\u753b\u3055\u308c\u308b\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u65b0\u3057\u3044\u30c6\u30b9\u30c8\u306e\u4e21\u65b9\u3067\u305d\u308c\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\uff1a"),(0,l.kt)(s.Z,{groupId:"js-ts",mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"js",label:"JavaScript",mdxType:"TabItem"}
1,(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="web/src/components/Article/Article.test.js"',title:'"web/src/components/Article/Article.test.js"'},"import { render, screen } from '@redwoodjs/testing'\n\nimport Article from './Article'\n\n// highlight-start\nconst ARTICLE = {\n id: 1,\n title: 'First post',\n body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.`,\n createdAt: new Date().toISOString(),\n}\n// highlight-end\n\ndescribe('Article', () => {\n it('renders a blog post', () => {\n // highlight-next-line\n render(<Article article={ARTICLE} />)\n\n // highlight-start\n expect(screen.getByText(ARTICLE.title)).toBeInTheDocument()\n expect(screen.getByText(ARTICLE.body)).toBeInTheDocument()\n // highlight-end\n })\n\n // highlight-start\n it('renders a summary of a blog post', () => {\n render(<Article article={ARTICLE} summary={true} />)\n\n expect(screen.getByText(ARTICLE.title)).toBeInTheDocument()\n expect(\n screen.getByText(\n 'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Str...'\n )\n ).toBeInTheDocument()\n })\n // highlight-end\n})\n"))),(0,l.kt)(i.Z,{value:"ts",label:"TypeScript",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx",metastring:'title="web/src/components/Article/Article.test.tsx"',title:'"web/src/components/Article/Article.test.tsx"'},"import { render, screen } from '@redwoodjs/testing'\n\nimport Article from './Article'\n\n// highlight-start\nconst ARTICLE = {\n id: 1,\n title: 'First post',\n body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.`,\n createdAt: new Date().toISOString(),\n}\n// highlight-end\n\ndescribe('Article', () => {\n it('renders a blog post', () => {\n // highlight-next-line\n render(<Article article={ARTICLE} />)\n\n // highlight-start\n expect(screen.getByText(ARTICLE.title)).toBeInTheDocument()\n expect(screen.getByText(ARTICLE.body)).toBeInTheDocument()\n // highlight-end\n })\n\n // highlight-start\n it('renders a summary of a blog post', () => {\n render(<Article article={ARTICLE} summary={true} />)\n\n expect(screen.getByText(ARTICLE.title)).toBeInTheDocument()\n expect(\n screen.getByText(\n 'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Str...'\n )\n ).toBeInTheDocument()\n })\n // highlight-end\n})\n")))),(0,l.kt)("p",null,"\u3053\u306e\u5909\u66f4\u3092\u4fdd\u5b58\u3059\u308b\u3068\u30c6\u30b9\u30c8\u304c\u5b9f\u884c\u3055\u308c\u3001\u30a6\u30c1\u3089\u304c\u4eca\u3082happy\u3060\u3068\u308f\u304b\u308a\u307e\u3059\uff01"),(0,l.kt)("h3",{id:"one-last-thing"},"One Last Thing"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"summary")," props\u304c\u5b58\u5728\u3057\u306a\u3044\u5834\u5408\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067 ",(0,l.kt)("inlineCode",{parentName:"p"},"false")," \u306b\u306a\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u305f\u3053\u3068\u3092\u601d\u3044\u51fa\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u306f\u6700\u521d\u306e\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\uff08 ",(0,l.kt)("inlineCode",{parentName:"p"},"summary")," props \u3092\u5168\u304f\u6e21\u3055\u306a\u3044\uff09\u3067\u30c6\u30b9\u30c8\u3057\u307e\u3057\u305f\u3002\u3057\u304b\u3057 ",(0,l.kt)("inlineCode",{parentName:"p"},"false")," \u3092\u660e\u793a\u7684\u306b\u8a2d\u5b9a\u3057\u305f\u5834\u5408\u306b\u3069\u3046\u306a\u308b\u304b\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u30c6\u30b9\u30c8\u306f\u3042\u308a\u307e\u305b\u3093\u3002",(0,l.kt)("a",{parentName:"p",href:"https://www.functionize.com/blog/the-myth-of-100-code-coverage"},"100% Code Coverage")," \uff08\u30ab\u30d0\u30ec\u30c3\u30b8100%\uff09\u3092\u671b\u3080\u306a\u3089\u3001\u4eca\u3059\u3050\u81ea\u7531\u306b\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\uff01"))}g.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.