{"id":4736,"date":"2016-07-19T02:41:48","date_gmt":"2016-07-19T02:41:48","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=4736"},"modified":"2016-07-19T02:41:48","modified_gmt":"2016-07-19T02:41:48","slug":"using-jest-typescript","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/using-jest-typescript\/","title":{"rendered":"Using Jest with TypeScript"},"content":{"rendered":"<p>Jest<sup><a href=\"#footnote_0_4736\" id=\"identifier_0_4736\" class=\"footnote-link footnote-identifier-link\" title=\"https:\/\/facebook.github.io\/jest\/\">1<\/a><\/sup> is something like one of a hundred different unit testing frameworks for Javascript. I&#8217;ve set it up, because the React team is using it.<\/p>\n<pre lang=\"bash\">\nnpm install --save-dev jest-cli\ntypings install 'dt!jest' --ambient --save\n<\/pre>\n<p>I set this up with TypeScript, but found it required some time fiddling to get it to work.<\/p>\n<p>First, I set up tsconfig.json to put the compiled Javascript files somewhere out of the way, and in CommonJS:<\/p>\n<pre lang=\"javascript\">\n{\n    \"compilerOptions\": {\n        \"module\": \"commonjs\",\n        \"target\": \"es6\",\n        \"noImplicitAny\": false,\n        \"sourceMap\": false,\n        \"outDir\": \"dist\"\n    },\n    \"exclude\": [\n        \"node_modules\"\n    ]\n}\n<\/pre>\n<p>Your package.json needs a &#8220;jest&#8221; section added as well &#8211; once you set it up, this is what it should look like:<\/p>\n<pre lang=\"javascript\">\n{\n  \"name\": \"books\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"import-editions.ts\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"jest\": {\n    \"testPathDirs\": [\n      \"dist\/\"\n    ],\n    \"testRegex\": \"__tests__\/.*$\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n  },\n  \"devDependencies\": {\n    \"jest-cli\": \"^13.2.3\"\n  }\n}\n<\/pre>\n<p>Your code can just go in it&#8217;s own file, like you&#8217;d normally expect (this is import-editions.ts):<\/p>\n<pre lang=\"javascript\">\nfunction parseLine(line: string) {\n  return 'abc'\n}\n\nexport { parseLine }\n<\/pre>\n<p>Then you can write a test file (put this in __tests__\/import-editions-tests.ts):<\/p>\n<pre lang=javascript\">\nimport { parseLine } from '..\/import-editions';\n\njest.unmock('..\/import-editions');\ndescribe('parseLine', () => {\n  it('parses the header part of the line', () => {\n    expect(parseLine('test data')).toBe('abc');\n  });\n});\n<\/pre>\n<p>Once you compile the tests, you can run them without issue. <\/p>\n<p>There are some people out there who use babel as a preprocessor, but I haven&#8217;t seen a way to make this work with TypeScript. Some people also use webpack &#8211; this is probably the way to go, if you don&#8217;t like my approach.<\/p>\n<ol class=\"footnotes\"><li id=\"footnote_0_4736\" class=\"footnote\">https:\/\/facebook.github.io\/jest\/<span class=\"footnote-back-link-wrapper\"> [<a href=\"#identifier_0_4736\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>A way of combining TypeScript and Jest unit tests<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[302,557],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4736"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=4736"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4736\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=4736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=4736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=4736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}