fix(html): correctly transforms html source when needed

Author: huafu

src/preprocessor.ts

@@ -29,7 +29,7 @@ export function process(
 
   // This is to support angular 2. See https://github.com/kulshekhar/ts-jest/pull/145
   if (isHtmlFile && jestConfig.globals.__TRANSFORM_HTML__) {
-    src = 'module.exports=`' + src + '`;';
+    src = 'module.exports=' + JSON.stringify(src) + ';';
   }
 
   const processFile =

tests/__tests__/__snapshots__/html-transform.spec.ts.snap

@@ -1,13 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Html transforms transforms html if config.globals.__TRANSFORM_HTML__ is set 1`] = `
-"module.exports=\`<div class=\\"html-test\\">
+exports[`Html transforms transforms html if config.globals.__TRANSFORM_HTML__ is set: module 1`] = `
+"<div class=\\"html-test\\">
   <span class=\\"html-test__element\\">This is element</span>
-</div>\`;"
+  <code>This is a backtilt \`</code>
+</div>"
 `;
 
-exports[`Html transforms transforms html if config.globals.__TRANSFORM_HTML__ is set 2`] = `
+exports[`Html transforms transforms html if config.globals.__TRANSFORM_HTML__ is set: source 1`] = `"module.exports=\\"<div class=\\\\\\"html-test\\\\\\">\\\\n  <span class=\\\\\\"html-test__element\\\\\\">This is element</span>\\\\n  <code>This is a backtilt \`</code>\\\\n</div>\\";"`;
+
+exports[`Html transforms transforms html if config.globals.__TRANSFORM_HTML__ is set: untransformed 1`] = `
 "<div class=\\"html-test\\">
   <span class=\\"html-test__element\\">This is element</span>
+  <code>This is a backtilt \`</code>
 </div>"
 `;

tests/__tests__/html-transform.spec.ts

@@ -1,19 +1,30 @@
 import { process } from '../../src/preprocessor';
 
+const path = '/path/to/file.html';
+const config = { globals: {} as any };
+// wrap a transformed source so that we can fake a `require()` on it by calling the returned wrapper
+const wrap = (src: string) =>
+  new Function(`var module={}; ${src} return module.exports;`) as any;
+
 const source = `<div class="html-test">
   <span class="html-test__element">This is element</span>
+  <code>This is a backtilt \`</code>
 </div>`;
-const path = '/path/to/file.html';
-const config = {
-  globals: {
-    __TRANSFORM_HTML__: true,
-  },
-};
 
 describe('Html transforms', () => {
   it('transforms html if config.globals.__TRANSFORM_HTML__ is set', () => {
-    expect(process(source, path, config)).toMatchSnapshot();
-    delete config.globals.__TRANSFORM_HTML__;
-    expect(process(source, path, config)).toMatchSnapshot();
+    // get the untransformed version
+    const untransformed = process(source, path, config);
+    // ... then the one which should be transformed
+    config.globals.__TRANSFORM_HTML__ = true;
+    const transformed = process(source, path, config) as string;
+    // ... finally the result of a `require('module-with-transformed-version')`
+    const exported = wrap(transformed)();
+
+    expect(exported).toMatchSnapshot('module');
+    expect(transformed).toMatchSnapshot('source');
+    expect(untransformed).toMatchSnapshot('untransformed');
+    // requiring the transformed version should return the same string as the untransformed version
+    expect(exported).toBe(untransformed);
   });
 });