{"id":1006,"date":"2018-03-31T16:14:57","date_gmt":"2018-03-31T15:14:57","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=1006"},"modified":"2018-03-31T16:14:57","modified_gmt":"2018-03-31T15:14:57","slug":"mocking-the-css-webpack-imports-using-identity-obj-proxy","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2018\/03\/31\/mocking-the-css-webpack-imports-using-identity-obj-proxy\/","title":{"rendered":"Mocking the CSS webpack imports using identity-obj-proxy"},"content":{"rendered":"<p>I&#8217;m sure at some point you have encountered the <code>SyntaxError:\u00a0Unexpected token\u00a0.<\/code> error when preparing tests with Jest, it pointed at the dot of the CSS class name. <\/p>\n<blockquote><p>\n({&#8220;Object.<anonymous>&#8220;:function(module,exports,require,__dirname,__filename,global,jest){.my-class {<br \/>\n                                                                                         ^<br \/>\nSyntaxError: Unexpected token .<br \/>\n<\/anonymous><\/p><\/blockquote>\n<p>If you are familiar with it then probably you have resolved it and probably already are using the <code>identity-obj-proxy<\/code> dependency in your project. For those who are searching for a solution please read on.<br \/>\n<!--more--><\/p>\n<p>First install the <code>identity-obj-proxy<\/code> (dev) dependency in your project:<\/p>\n<pre class=\"brush: powershell; title: ; notranslate\" title=\"\">yarn add identity-obj-proxy --dev<\/pre>\n<p>After installation is complete you need to add the <code>moduleNameMapper<\/code> entry in the <code>jest.config.json<\/code> file:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    &quot;moduleNameMapper&quot;: {\r\n      &quot;\\\\.(s?css|less)$&quot;: &quot;identity-obj-proxy&quot;\r\n    },\r\n<\/pre>\n<p>Now you can run your tests without this error.<\/p>\n<p>More about this can be found in <a href=\"https:\/\/facebook.github.io\/jest\/docs\/en\/webpack.html\" rel=\"noopener\" target=\"_blank\">the Jest docs.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m sure at some point you have encountered the SyntaxError:\u00a0Unexpected token\u00a0. error when preparing tests with Jest, it pointed at the dot of the CSS class name. ({&#8220;Object.&#8220;:function(module,exports,require,__dirname,__filename,global,jest){.my-class { ^ SyntaxError: Unexpected token . If you are familiar with it &hellip; <a href=\"https:\/\/greladesign.co\/blog\/2018\/03\/31\/mocking-the-css-webpack-imports-using-identity-obj-proxy\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":""},"categories":[141,325],"tags":[343,344,341,342],"_links":{"self":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/1006"}],"collection":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/comments?post=1006"}],"version-history":[{"count":10,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/1006\/revisions"}],"predecessor-version":[{"id":1017,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/1006\/revisions\/1017"}],"wp:attachment":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/media?parent=1006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/categories?post=1006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/tags?post=1006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}