Merge pull request #8 from rrigato/dev

jest configuration to transpile react using jsdom
rrigato · Nov 4, 2023 · 697f4c2 · 697f4c2
2 parents ac0c815 + 9a8ada3
commit 697f4c2
Show file tree

Hide file tree

Showing 9 changed files with 1,941 additions and 93 deletions.
diff --git a/static/App.jsx b/static/App.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function App(){
+    return(
+        <h1>react initial setup</h1>
+    );
+}
diff --git a/static/__mocks__/fileMocks.js b/static/__mocks__/fileMocks.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/static/__mocks__/stylesMocks.js b/static/__mocks__/stylesMocks.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/static/babel.config.js b/static/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        '@babel/preset-env',
+        ['@babel/preset-react', {runtime: 'automatic'}],
+    ],
+};
diff --git a/static/js/index.js b/static/js/index.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { App } from '../App.jsx';
 
 
 
 const root = createRoot(
     document.getElementById('app-entry-point')
 );
-root.render(<h1>react initial setup</h1>);
+root.render(<App/>);
diff --git a/static/package-lock.json b/static/package-lock.json
diff --git a/static/package.json b/static/package.json
@@ -6,12 +6,14 @@
     "description": "personal homepage",
     "devDependencies": {
         "@babel/core": "^7.23.2",
+        "@babel/preset-env": "^7.23.2",
         "@babel/preset-react": "^7.22.15",
         "@testing-library/react": "^14.0.0",
         "babel-loader": "^9.1.3",
         "html-loader": "^4.2.0",
         "html-webpack-plugin": "^5.5.3",
         "jest": "^29.6.4",
+        "jest-environment-jsdom": "^29.7.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1",
@@ -20,6 +22,9 @@
     "directories": {
         "test": "tests"
     },
+    "jest": {
+        "testEnvironment": "jsdom"
+    },
     "homepage": "https://github.com/rrigato/homepage#readme",
     "name": "homepage",
     "repository": {

diff --git a/static/tests/App.test.js b/static/tests/App.test.js
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import {App} from '../App.jsx';
 
 describe('entry point for app', () => {
-    test.skip('HomePageToggle called', () => {
+    test('HomePageToggle called', () => {
 
 
         const renderedHomepage = render(<App/>);

diff --git a/static/webpack.config.js b/static/webpack.config.js
@@ -10,7 +10,7 @@ module.exports = {
                 loader: 'html-loader',
             },
             {
-                test: /\.(?:js|cjs)$/,
+                test: /\.(?:js|jsx)$/,
                 exclude: /node_modules/,
                 use: {
                   loader: 'babel-loader',