{"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":"

Jest1<\/a><\/sup> is something like one of a hundred different unit testing frameworks for Javascript. I’ve set it up, because the React team is using it.<\/p>\n

\nnpm install --save-dev jest-cli\ntypings install 'dt!jest' --ambient --save\n<\/pre>\n
I set this up with TypeScript, but found it required some time fiddling to get it to work.<\/p>\n
First, I set up tsconfig.json to put the compiled Javascript files somewhere out of the way, and in CommonJS:<\/p>\n
\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
Your package.json needs a “jest” section added as well – once you set it up, this is what it should look like:<\/p>\n
\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
Your code can just go in it’s own file, like you’d normally expect (this is import-editions.ts):<\/p>\n
\nfunction parseLine(line: string) {\n  return 'abc'\n}\n\nexport { parseLine }\n<\/pre>\n
Then you can write a test file (put this in __tests__\/import-editions-tests.ts):<\/p>\n
\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
Once you compile the tests, you can run them without issue. <\/p>\n
There are some people out there who use babel as a preprocessor, but I haven’t seen a way to make this work with TypeScript. Some people also use webpack – this is probably the way to go, if you don’t like my approach.<\/p>\n
  1. https:\/\/facebook.github.io\/jest\/ [↩<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"
    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,"footnotes":""},"categories":[12],"tags":[302,557],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t