{"id":1323,"date":"2021-05-13T23:49:43","date_gmt":"2021-05-13T14:49:43","guid":{"rendered":"https:\/\/ito-u-oti.com\/?p=1323"},"modified":"2021-05-13T23:49:47","modified_gmt":"2021-05-13T14:49:47","slug":"react-jest-html-reporters","status":"publish","type":"post","link":"https:\/\/ito-u-oti.com\/?p=1323","title":{"rendered":"[React.js]jest\u3068jest-html-reporters\u306e\u5c0e\u5165"},"content":{"rendered":"\n<p>create-react-app\u3067\u4f5c\u6210\u3057\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067test\u30b9\u30af\u30ea\u30d7\u30c8\u306freact-scripts\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u5f62\u5f0f\u3092jest\u306b\u5909\u66f4\u3057\u3001\u306a\u304a\u304b\u3064test\u306e\u7d50\u679c\u3092html\u3067\u51fa\u529b\u3067\u304d\u308bjest-html-reporters\u306e\u5c0e\u5165\u3092\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__1\" class=\"wp-block-heading\">\u5c0e\u5165<\/h2>\n\n\n\n<h3 id=\"outline__1_1\" class=\"wp-block-heading\">\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n<p>React test\u306b\u6709\u52b9\u306aEnzyme\u3068\u305d\u306e\u95a2\u9023\u30d1\u30c3\u30b1\u30fc\u30b8\u3001jest-html-reporters\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nyarn add -D @types\/enzyme enzyme @types\/enzyme-adapter-react-16 enzyme-adapter-react-16 ts-jest\nyarn add -D jest-html-reporters\n<\/pre><\/div>\n\n\n<h3 id=\"outline__1_2\" class=\"wp-block-heading\">package.json\u306e\u4fee\u6b63<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>test script\u3092react-scripts\u304b\u3089jest\u306b\u5909\u66f4<\/li><li>jest\u306e\u95a2\u9023\u8a2d\u5b9a\u3092\u8ffd\u52a0<\/li><li>jest-html-reporters\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n  {\n    ...\n    &quot;scripts&quot;: {\n      &quot;test&quot;: &quot;dotenv -e ..\/..\/env\/.env.test jest&quot;,\n    },\n    &quot;jest&quot;: {\n      &quot;preset&quot;: &quot;ts-jest&quot;,\n      &quot;globals&quot;: {\n        &quot;ts-jest&quot;: {\n          &quot;tsconfig&quot;: &quot;tsconfig.json&quot;\n        }\n      },\n      &quot;moduleNameMapper&quot;: {\n        &quot;\\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$&quot;: &quot;&amp;lt;rootDir&gt;\/__mocks__\/fileMock.js&quot;,\n        &quot;\\\\.(css|less|scss|sass)$&quot;: &quot;identity-obj-proxy&quot;,\n        &quot;src(.*)&quot;:&quot;&amp;lt;rootDir&gt;\/src\/$1&quot;,\n        \n        ---- \u2193 monorepo\u74b0\u5883\u306b\u3066\u5171\u901a\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u304c\u3042\u308b\u5834\u5408\u306f\u8a2d\u5b9a\u3059\u308b\u2193----\n        &quot;@common\/(.*)&quot;:&quot;&amp;lt;rootDir&gt;\/..\/common\/src\/$1&quot;\n        ---- \u2191 ----\n      },\n      &quot;reporters&quot;: &#x5B;\n        &quot;default&quot;,\n        &#x5B;\n          &quot;jest-html-reporters&quot;,\n          {\n            &quot;hideIcon&quot;: true,\n            &quot;pageTitle&quot;: &quot;UT test report&quot;,\n            &quot;publicPath&quot;: &quot;.\/testreport&quot;,\n            &quot;filename&quot;: &quot;report.html&quot;,\n            &quot;expand&quot;: true\n          }\n        ]\n      ],\n      &quot;snapshotSerializers&quot;: &#x5B;\n        &quot;enzyme-to-json\/serializer&quot;\n      ],\n      &quot;setupFilesAfterEnv&quot;: &#x5B;\n        &quot;&amp;lt;rootDir&gt;\/src\/setupEnzyme.ts&quot;\n      ],\n    }\n    ...\n  }\n<\/pre><\/div>\n\n\n<h3 id=\"outline__1_3\" class=\"wp-block-heading\"><code>fileMock.js<\/code>\u306e\u4f5c\u6210<\/h3>\n\n\n\n<p>project\u306e\u4e0b\u306bfileMock.js\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3084\u52d5\u753b\u30d5\u30a1\u30a4\u30eb\u306e\u30e2\u30c3\u30af\u3092\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/__mocks__\/fileMock.js\nmodule.exports = 'test-file-stub';\n<\/pre><\/div>\n\n\n<h3 id=\"outline__1_4\" class=\"wp-block-heading\">setupEnzyme.ts\u306e\u4f5c\u6210<\/h3>\n\n\n\n<p>Enzyme\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ src\/setupEnzyme.ts\nimport { configure } from 'enzyme';\nimport EnzymeAdapter from 'enzyme-adapter-react-16';\nconfigure({ adapter: new EnzymeAdapter() });\n<\/pre><\/div>\n\n\n<h3 id=\"outline__1_5\" class=\"wp-block-heading\">\u6700\u7d42\u7684\u306a\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nproject\/\n\u3000\u251c __mocks__\/\n\u3000\u2502\u3000\u2514 fileMock.js\n\u3000\u251c src\/\n\u3000\u2502\u3000\u251c App.tsx\n\u3000\u2502\u3000\u251c App.test.tsx\n\u3000\u2502\u3000\u2514 setupEnzyme.ts\n\u3000\u2514 package.json\n<\/pre><\/div>\n\n\n<h2 id=\"outline__2\" class=\"wp-block-heading\">\u5b9f\u884c<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nyarn test\n<\/pre><\/div>\n\n\n<p>jest-html-reporters\u306b\u3088\u3063\u3066\u3001testreport\/report.html\u304c\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"987\" height=\"646\" src=\"https:\/\/ito-u-oti.com\/wp-content\/uploads\/2021\/05\/image-32.png\" alt=\"\" class=\"wp-image-1325\"\/><\/figure>\n\n\n\n<h2 id=\"outline__3\" class=\"wp-block-heading\">\u95a2\u9023<\/h2>\n\n\n\n<p><a href=\"https:\/\/ito-u-oti.com\/react-monorepo\">[React.js]monorepo\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b+typescript<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/ito-u-oti.com\/react-dotenv\/\">[React.js]dotenv\u3092\u5229\u7528\u3057\u3066\u74b0\u5883\u5dee\u5206\u3092\u5438\u53ce\u3059\u308b<\/a><\/p>\n\n\n\n<h2 id=\"outline__4\" class=\"wp-block-heading\">\u53c2\u8003<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.npmjs.com\/package\/jest-html-reporters\">jest-html-reporters<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>create-react-app\u3067\u4f5c\u6210\u3057\u305fReact\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067test\u30b9\u30af\u30ea\u30d7\u30c8\u306f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1314,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[298],"tags":[300,295,296,283],"class_list":["post-1323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-jest-html-reporters","tag-react-js","tag-typescript","tag-yarn"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/1323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1323"}],"version-history":[{"count":1,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/1323\/revisions"}],"predecessor-version":[{"id":1326,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/1323\/revisions\/1326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/media\/1314"}],"wp:attachment":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}