add css module

yinsang · Feb 23, 2023 · c4c93d8 · c4c93d8
1 parent 3e3ac75
commit c4c93d8
Show file tree

Hide file tree

Showing 17 changed files with 271 additions and 22 deletions.
diff --git a/demo.zip b/demo.zip
diff --git a/demo/babel.config.js b/demo/babel.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}],
+  '@babel/preset-react',
+  // '@babel/preset-typescript',
+],
+
+};
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+<script src="./dist/main.js"></script>  
+</body>
+</html>
diff --git a/...ck-eslint-Jest-unitTest/package-lock.json → demo/package-lock.json b/...ck-eslint-Jest-unitTest/package-lock.json → demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "react-webpack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest",
+    "w": "jest --watch",
+    "dev": "webpack-dev-server --config webpack.dev.config.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "jest": {
+    "transform": {
+      "\\.[jt]sx?$": "babel-jest"
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.1",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.0.2",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "eslint": "^5.5.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-html": "^4.0.5",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "jest": "^26.6.3",
+    "mocha": "^5.2.0",
+    "react-test-renderer": "^17.0.2",
+    "webpack": "^4.16.3",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.8",
+    "webpack-merge": "^4.1.4"
+  },
+  "dependencies": {
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0"
+  }
+}
diff --git a/demo/unit/test/study.test.js b/demo/unit/test/study.test.js
@@ -0,0 +1,69 @@
+
+function add (a,b){
+  return a+b
+}
+// describe('describe order', ()=>{
+//   console.log(1);
+//   describe('add', ()=>{
+//     console.log(2);
+//   })
+
+//   it('it ', ()=>{
+//     console.log(3);
+//     expect(add(1,2)).toBe(3)
+//     console.log(4);
+//   })
+//   console.log(5);
+// })
+// describe.each()
+// describe('add', ()=>{
+//   it('it ', ()=>{
+//     expect(add(1,2)).toBe(3)
+//   })
+// })
+// describe.each([
+//   [1, 1, 2],
+//   [1, 2, 3],
+//   [2, 2, 4],
+// ])('.add(%i, %j)', (a, b, expected) => {
+//   // console.log(a,b,expected);
+//   test('a',()=>{
+//     expect(a+b).toBe(expected)
+//   })
+// });
+// describe.skip('my beverage', () => {
+//   console.log('firest desc');
+//   test('is delicious', () => {
+//     console.log('first');
+//     expect(add(1,2)).toBe(3);
+//   });
+
+//   test('is not sour', () => {
+//     console.log('object');
+//     expect(add(1,23)).toBe(24);
+//   });
+//   test.todo('todo sth')
+// });
+// describe('my other beverage', () => {
+//   console.log('after');
+
+//   test('is not souraaaaa', () => {
+//     console.log('object33');
+//     expect(add(1,23)).toBe(24);
+//   });
+//   // ... will be skipped
+// });
+describe('study jest', () => {
+  test('result white also be a constructor',  () => {
+    const fn = jest.fn((val)=>{
+      return val*2
+    })
+    fn(2)
+    // this underline make expect wrong
+    var f = new fn();
+    expect(fn.mock.results).toEqual([{
+      type: 'return',
+      value: 4,
+    }]);
+  });
+});
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /.jsx?$/,
+        use: {
+          loader: 'babel-loader'
+        }
+      }
+    ]
+  }
+}
diff --git a/demo/webpack.dev.config.js b/demo/webpack.dev.config.js
@@ -0,0 +1,8 @@
+const merge = require('webpack-merge')
+const webpackBase = require('./webpack.config')
+module.exports = merge(webpackBase, {
+  mode: 'development',
+  output: {
+    filename: 'dist/main.js'
+  }
+})
diff --git a/react-webpack-eslint-Jest-unitTest/babel.config.js b/react-webpack-eslint-Jest-unitTest/babel.config.js
@@ -2,7 +2,22 @@ module.exports = {
 
   presets: [['@babel/preset-env', {targets: {node: 'current'}}],
   '@babel/preset-react',
+
   // '@babel/preset-typescript',
 ],
+"plugins": [
+["babel-plugin-react-css-modules",
+{
+  "generateScopedName": "[name]__[local]-[hash:base64:5]",
+  // "exclude": "node_modules",
+  "handleMissingStyleName": "warn",
+  "webpackHotModuleReloading": true,
+  "filetypes": {
+    ".scss": {
+      "syntax": "postcss-scss"
+    }
+  }
+}],
+]
 
 };
diff --git a/react-webpack-eslint-Jest-unitTest/package.json b/react-webpack-eslint-Jest-unitTest/package.json
@@ -19,9 +19,11 @@
     "@babel/core": "^7.0.1",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "axios": "^0.21.1",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.2",
-    "chai": "^4.1.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "css-loader": "^3.6.0",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^5.5.0",
@@ -33,14 +35,21 @@
     "eslint-plugin-standard": "^4.0.0",
     "jest": "^26.6.3",
     "mocha": "^5.2.0",
-    "react-test-renderer": "^17.0.2",
-    "webpack": "^4.16.3",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.0.2",
+    "postcss-scss": "^4.0.6",
+    "react-test-renderer": "^16.14.0",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.75.0",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.8",
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0"
+    "@ali/sm-toolkit": "^3.0.4",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "url-search-params-polyfill": "^8.1.1"
   }
 }
diff --git a/react-webpack-eslint-Jest-unitTest/src/App.jsx b/react-webpack-eslint-Jest-unitTest/src/App.jsx
@@ -1,4 +1,6 @@
 import React from 'react'
+import './index.module.scss';
+
 export default class App extends React.Component {
   constructor(props){
     super(props)
@@ -16,12 +18,19 @@ export default class App extends React.Component {
   render () {
     const {framework} = this.state;
     return (
-      <div className="welcome-framework">
-        hello, {framework}
-        <button className="btn" onClick={this.handleBtnClick}>
-          改变state
-        </button>
-      </div>
+      <>
+        <div
+        //  className={styles['is-invalid']}
+        styleName="is-invalid"
+        >
+
+        </div>
+        <div>11</div>
+        <div  
+        // className={styles.validationError}
+        styleName="validationError"
+        >123</div>
+      </>
     )
   }
 }
diff --git a/react-webpack-eslint-Jest-unitTest/src/Slot.jsx b/react-webpack-eslint-Jest-unitTest/src/Slot.jsx
@@ -1,6 +1,8 @@
 import React from 'react'
 export default (props)=>{
-  <div>
+  return (
+    <div>
     {props.children}
   </div>
+  )
 }
diff --git a/react-webpack-eslint-Jest-unitTest/src/index.js b/react-webpack-eslint-Jest-unitTest/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App.jsx'
+import 'url-search-params-polyfill'
 ReactDOM.render(
   <App/>,
   document.getElementById('root')

diff --git a/react-webpack-eslint-Jest-unitTest/src/index.module.scss b/react-webpack-eslint-Jest-unitTest/src/index.module.scss
@@ -0,0 +1,7 @@
+.is-invalid{
+  color:red
+}
+.is-invalid~.validationError {
+  display: inline !important;
+  // color:red;
+}
diff --git a/react-webpack-eslint-Jest-unitTest/unit/test/Slot.test.js b/react-webpack-eslint-Jest-unitTest/unit/test/Slot.test.js
@@ -5,19 +5,27 @@ import Enzyme from 'enzyme';
 
 import {shallow, mount} from 'enzyme';
 import ShallowRenderer from 'react-test-renderer/shallow';
+import renderer from 'react-test-renderer';
 import  ReactTestUtils  from  'react-dom/test-utils';
 import Adapter from 'enzyme-adapter-react-16';
 import Slot from './../../src/Slot'
-import { expect } from 'chai';
 const Child = ()=><div>child</div>
 Enzyme.configure({ adapter: new Adapter() });
 describe('React state render', () => {
-  it('props children render', () => {
-    const Parent = mount(
-      <Slot >
-        <Child />
-      </Slot>
-    )
-    expect(Parent.contains(Child)).toBe(true)
-  });
+
+it('renders correctly', () => {
+  const component = renderer.create(
+    <Slot >Facebook</Slot>,
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchInlineSnapshot();
+});
+  // it('props children render', () => {
+  //   const Parent = mount(
+  //     <Slot >
+  //       <Child />
+  //     </Slot>
+  //   )
+  //   expect(Parent.contains(Child)).toBe(true)
+  // });
 });
diff --git a/react-webpack-eslint-Jest-unitTest/unit/test/study.test.js b/react-webpack-eslint-Jest-unitTest/unit/test/study.test.js
@@ -0,0 +1,26 @@
+
+function add (a,b){
+  return a+b
+}
+import axios from 'axios'
+jest.mock('axios');
+describe('study jest', () => {
+  test('result white also be a constructor',  () => {
+    const mockFn = jest.fn((val)=>val);
+    // console.log(mockFn());
+
+// const a = new mockFn();
+// const b = new mockFn();
+mockFn(222)
+
+    expect(mockFn.mock.calls).toEqual([[222]])
+//     expect(mockFn.mock.instances[1] === b).toBeTruthy()
+    mockFn.mockReset()
+    // expect(mockFn.mock.calls).toEqual([[222]])
+    // console.log(mockFn.mock.instances);
+    console.log('bb', mockFn());
+    // expect(mockFn.mock.instances[0] === a).toBeTruthy()
+    // expect(mockFn.mock.instances[1] === b).toBeTruthy()
+
+  });
+});
diff --git a/react-webpack-eslint-Jest-unitTest/webpack.config.js b/react-webpack-eslint-Jest-unitTest/webpack.config.js
@@ -6,7 +6,24 @@ module.exports = {
         use: {
           loader: 'babel-loader'
         }
-      }
+      },
+      {
+        test: /\.module\.(scss|css)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]-[hash:base64:5]'
+              }
+            }
+          },
+          'postcss-loader',
+
+          'sass-loader',
+        ]
+      },
     ]
   }
 }