nvh95 · nvh95 · Jul 2, 2022 · Jul 2, 2022 · Jul 2, 2022 · Jul 2, 2022
diff --git a/demo/__tests__/file.test.tsx b/demo/__tests__/file.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+
+import App from '../App';
+
+describe('File', () => {
+  it('should render file correctly in JSDOM', () => {
+    render(<App />);
+    expect((screen.getByAltText('logo') as HTMLImageElement).src).toContain(
+      '/logo.svg',
+    );
+    expect((screen.getByAltText('logo2') as HTMLImageElement).src).toContain(
+      '/demo/assets/images/logo.svg',
+    );
+  });
+});
diff --git a/demo/__tests__/style.test.tsx b/demo/__tests__/style.test.tsx
@@ -53,13 +53,5 @@ describe('Style', () => {
     // TODO: Not implemented yet
     // loadPaths
     // TODO: Not implemented yet
-
-    // Can see images
-    expect(document.documentElement.outerHTML).toContain(
-      `<img src="/logo.svg" class="App-logo" alt="logo">`,
-    );
-    expect(document.documentElement.outerHTML).toContain(
-      `<img src="/demo/assets/images/logo.svg" class="logo2" alt="logo2">`,
-    );
   });
 });
diff --git a/examples/create-react-app/src/App.tsx b/examples/create-react-app/src/App.tsx
@@ -2,6 +2,9 @@ import { useState } from 'react';
 import { ReactComponent as Logo } from './logo.svg';
 import logo from './logo.svg';
 import logo2 from './assets/images/logo.svg';
+// @ts-expect-error Ignore ts error for importing .ico file
+import staticReact from './assets/images/favicon.ico';
+
 import styles from './style.module.css';
 
 import './App.css';
@@ -15,7 +18,10 @@ function App() {
       <header className="App-header">
         <Logo className="svg-component" />
         <img src={logo} className="App-logo" alt="logo" />
-        <img src={logo2} className="logo2" alt="logo2" />
+        <div>
+          <img src={logo2} className="logo2" alt="logo2" />
+          <img src={staticReact} alt="static react" />
+        </div>
         <p>Create React App example</p>
         <p className={styles.textOrange}>Styled by CSS Modules</p>
         <p className="global-configured-sass">

diff --git a/examples/create-react-app/src/__tests__/transform.test.tsx b/examples/create-react-app/src/__tests__/transform.test.tsx
@@ -7,7 +7,7 @@ describe('transform', () => {
     render(<App />);
 
     expect(document.body.outerHTML).toMatchInlineSnapshot(
-      `"<body><div><div class=\\"App\\"><header class=\\"App-header\\"><svg class=\\"svg-component\\">/src/logo.svg</svg><img src=\\"/src/logo.svg\\" class=\\"App-logo\\" alt=\\"logo\\"><img src=\\"/src/assets/images/logo.svg\\" class=\\"logo2\\" alt=\\"logo2\\"><p>Create React App example</p><p class=\\"_textOrange_p6ddy_1\\">Styled by CSS Modules</p><p class=\\"global-configured-sass\\">This text is styled by global configured SASS</p><p class=\\"imported-sass\\">This text is styled by imported SASS</p><p class=\\"load-path-sass\\">This text is styled by SASS from load paths</p><div class=\\"animated fadeIn\\"><p>An animated element style using @import ~</p><p>Watch me fade in!</p></div><button data-testid=\\"increase\\" type=\\"button\\">count is: <div data-testid=\\"count\\">0</div></button><a class=\\"App-link\\" href=\\"https://reactjs.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn React</a></header></div></div></body>"`,
+      `"<body><div><div class=\\"App\\"><header class=\\"App-header\\"><svg class=\\"svg-component\\">/src/logo.svg</svg><img src=\\"/src/logo.svg\\" class=\\"App-logo\\" alt=\\"logo\\"><div><img src=\\"/src/assets/images/logo.svg\\" class=\\"logo2\\" alt=\\"logo2\\"><img src=\\"/src/assets/images/favicon.ico\\" alt=\\"static react\\"></div><p>Create React App example</p><p class=\\"_textOrange_p6ddy_1\\">Styled by CSS Modules</p><p class=\\"global-configured-sass\\">This text is styled by global configured SASS</p><p class=\\"imported-sass\\">This text is styled by imported SASS</p><p class=\\"load-path-sass\\">This text is styled by SASS from load paths</p><div class=\\"animated fadeIn\\"><p>An animated element style using @import ~</p><p>Watch me fade in!</p></div><button data-testid=\\"increase\\" type=\\"button\\">count is: <div data-testid=\\"count\\">0</div></button><a class=\\"App-link\\" href=\\"https://reactjs.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn React</a></header></div></div></body>"`,
     );
   });
 });
diff --git a/examples/create-react-app/src/assets/images/favicon.ico b/examples/create-react-app/src/assets/images/favicon.ico
diff --git a/examples/svelte/package.json b/examples/svelte/package.json
@@ -8,6 +8,7 @@
     "serve": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "jest --watch",
+    "test:nc": "npm run test -- --no-cache",
     "jest-preview": "jest-preview"
   },
   "devDependencies": {

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import Counter from './lib/Counter.svelte';
+  import jestPreviewIco from './favicon.ico';
   let counterComponent
 </script>
 
 <main>
   <div class="logo-wrapper">
-    <img src="./images/logo.svg" alt="Svelte">
+    <img src="./images/logo.svg" alt="Svelte logo">
+    <img src={jestPreviewIco} alt="Jest Preview logo">
   </div>
   <button on:click={() => counterComponent.increment()} >Increment with another button</button>
   <Counter bind:this = {counterComponent}/>

diff --git a/examples/svelte/src/favicon.ico b/examples/svelte/src/favicon.ico
diff --git a/src/transform.ts b/src/transform.ts
@@ -27,17 +27,28 @@ function getRelativeFilename(filename: string): string {
 type TransformedSource = {
   code: string;
 };
+
 export function processFile(src: string, filename: string): TransformedSource {
   const relativeFilename = getRelativeFilename(filename);
-  return { code: `module.exports = ${JSON.stringify(relativeFilename)};` };
+  return {
+    code: `module.exports = {
+      __esModule: true,
+      default: ${JSON.stringify(relativeFilename)},
+    };`,
+  };
 }
 
+// TODO: I think we can merge this with processFile
+// Still keep processFileCRA for backward compatible reason
+// To support https://github.com/jpkleemans/vite-svg-loader and https://github.com/pd4d10/vite-plugin-svgr (already supported) as well
 export function processFileCRA(
   src: string,
   filename: string,
 ): TransformedSource {
   // /Users/your-name/your-project/src/assets/image.png => /src/assets/image.png
-  const relativeFilename = JSON.stringify(getRelativeFilename(filename));
+  const relativeFilenameStringified = JSON.stringify(
+    getRelativeFilename(filename),
+  );
 
   if (filename.match(/\.svg$/)) {
     // Based on how SVGR generates a component name:
@@ -47,18 +58,19 @@ export function processFileCRA(
     });
     const componentName = `Svg${pascalCaseFilename}`;
     return {
+      // TODO: To render actual SVG to the snapshot
       code: `const React = require('react');
     module.exports = {
       __esModule: true,
-      default: ${relativeFilename},
+      default: ${relativeFilenameStringified},
       ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
         return {
           $$typeof: Symbol.for('react.element'),
           type: 'svg',
           ref: ref,
           key: null,
           props: Object.assign({}, props, {
-            children: ${relativeFilename}
+            children: ${relativeFilenameStringified}
           })
         };
       }),
@@ -67,7 +79,10 @@ export function processFileCRA(
   }
 
   return {
-    code: `module.exports = ${relativeFilename};`,
+    code: `module.exports = {
+      __esModule: true,
+      default: ${relativeFilenameStringified},
+    };`,
   };
 }
 
@@ -282,7 +297,9 @@ function processSass(filename: string): string {
       })
       .css.toString();
   } else {
-    throw new Error('Cannot compile sass to css: No compile method is available.');
+    throw new Error(
+      'Cannot compile sass to css: No compile method is available.',
+    );
   }
 
   return cssResult;