Merge pull request #118 from nvh95/fix/file-snapshot

Fix/file snapshot
nvh95 · May 25, 2022 · 6a4dbb7 · 6a4dbb7
2 parents 9b28ef8 + 8177796
commit 6a4dbb7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 6 deletions.
diff --git a/demo/__tests__/transform.test.tsx b/demo/__tests__/transform.test.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import App from '../App';
+
+describe('transform', () => {
+  it('should generate snapshots correctly in different OS', () => {
+    render(<App />);
+    expect(document.body.outerHTML).toMatchInlineSnapshot(
+      `"<body><div><div class=\\"App\\"><header class=\\"App-header\\"><img src=\\"/logo.svg\\" class=\\"App-logo\\" alt=\\"logo\\"><img src=\\"/demo/assets/images/logo.svg\\" class=\\"logo2\\" alt=\\"logo2\\"><p>Hello Vite + React!</p><p class=\\"sc-bczRLJ dgihId\\">This text is styled by styled-components</p><p class=\\"global-css\\">This text is styled by global css which is not imported to App.tsx</p><p class=\\"_cssModule_16r0j_1\\">This text is 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><button class=\\"css-s689uo-App\\">Hover to change color.</button><p class=\\"css-2m18qq\\">Styled by Emotion</p><p class=\\"c-gqdJwI\\">Styled by Stiches</p><p><button data-testid=\\"increase\\" type=\\"button\\">count is: <div data-testid=\\"count\\">0</div></button></p><p>Edit <code>App.tsx</code> and save to test HMR updates.</p><p><a class=\\"App-link\\" href=\\"https://reactjs.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn React</a> | <a class=\\"App-link\\" href=\\"https://vitejs.dev/guide/features.html\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Vite Docs</a></p></header></div></div></body>"`,
+    );
+  });
+});
diff --git a/examples/create-react-app/src/__tests__/transform.test.tsx b/examples/create-react-app/src/__tests__/transform.test.tsx
@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+
+import App from '../App';
+
+describe('transform', () => {
+  it('should generate snapshots correctly in different OS', () => {
+    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_1gpw2_1\\">Styled by CSS Modules</p><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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,8 +42,8 @@
     "preview": "vite preview",
     "server": "node cli/index.js",
     "server:watch": "nodemon cli/index.js",
-    "test:dev": "NODE_ENV=test jest --watch --no-cache App",
-    "test:ci": "NODE_ENV=test jest",
+    "test:dev": "cross-env NODE_ENV=test jest --watch --no-cache App",
+    "test:ci": "cross-env NODE_ENV=test jest",
     "clearCache": "rimraf node_modules/.cache/jest-preview && jest --clearCache",
     "test": "npm-run-all -p server test:dev",
     "prettier": "prettier server src --check",
@@ -61,6 +61,7 @@
     "postcss": "^8.4.12",
     "postcss-modules": "^4.3.1",
     "sirv": "^2.0.2",
+    "slash": "^3.0.0",
     "ws": "^8.5.0"
   },
   "devDependencies": {
@@ -76,6 +77,7 @@
     "@types/react-dom": "^17.0.10",
     "@types/styled-components": "^5.1.24",
     "@vitejs/plugin-react": "^1.3.0",
+    "cross-env": "^7.0.3",
     "jest": "^27.5.1",
     "jest-watch-typeahead": "^1.0.0",
     "nodemon": "^2.0.15",

diff --git a/src/transform.ts b/src/transform.ts
@@ -1,8 +1,9 @@
 import path from 'path';
 import camelcase from 'camelcase';
+import slash from 'slash';
 
 function getRelativeFilename(filename: string): string {
-  return filename.split(process.cwd())[1];
+  return slash(filename.split(process.cwd())[1]);
 }
 
 type TransformedSource = {