diff --git a/examples/rax-component/__mocks__/styleMock.js b/examples/rax-component/__mocks__/styleMock.js new file mode 100644 index 00000000..85dfb349 --- /dev/null +++ b/examples/rax-component/__mocks__/styleMock.js @@ -0,0 +1,2 @@ +module.exports = {}; + diff --git a/examples/rax-component/babel.config.json b/examples/rax-component/babel.config.json new file mode 100644 index 00000000..fedbb698 --- /dev/null +++ b/examples/rax-component/babel.config.json @@ -0,0 +1,16 @@ +{ + "presets": [ + [ + "@babel/preset-typescript", + { + "onlyRemoveTypeImports": true + } + ], + ["@babel/preset-env", { + "loose": true + }], + ["@babel/preset-react", { + "pragma": "createElement" + }] + ] +} \ No newline at end of file diff --git a/examples/rax-component/enzyme-setup.ts b/examples/rax-component/enzyme-setup.ts new file mode 100644 index 00000000..26fe0afe --- /dev/null +++ b/examples/rax-component/enzyme-setup.ts @@ -0,0 +1,5 @@ +import * as enzyme from 'enzyme'; +import Adapter from 'enzyme-adapter-rax'; + +// Setup Enzyme +enzyme.configure({ adapter: new Adapter() }); diff --git a/examples/rax-component/jest.config.mjs b/examples/rax-component/jest.config.mjs new file mode 100644 index 00000000..625e9ab1 --- /dev/null +++ b/examples/rax-component/jest.config.mjs @@ -0,0 +1,9 @@ +import pkgService, { defineJestConfig } from '@ice/pkg'; + +export default defineJestConfig(pkgService, { + setupFilesAfterEnv: ['/enzyme-setup.ts'], + moduleNameMapper: { + '\\.(css|less|scss)$': '/__mocks__/styleMock.js', + }, + transformIgnorePatterns: ['/node_modules/rax-*'], +}); diff --git a/examples/rax-component/package.json b/examples/rax-component/package.json index 50073de3..e4705f76 100644 --- a/examples/rax-component/package.json +++ b/examples/rax-component/package.json @@ -38,7 +38,8 @@ "eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./", "eslint:fix": "npm run eslint -- --fix", "stylelint": "stylelint \"**/*.{css,scss,less}\"", - "lint": "npm run eslint && npm run stylelint" + "lint": "npm run eslint && npm run stylelint", + "test": "jest" }, "keywords": [ "ice", @@ -47,15 +48,27 @@ ], "dependencies": { "@swc/helpers": "^0.4.14", - "babel-runtime-jsx-plus": "^0.1.5" + "babel-runtime-jsx-plus": "^0.1.5", + "rax-view": "^2.3.0" }, "devDependencies": { + "@babel/core": "^7.17.5", + "@babel/preset-env": "^7.20.2", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", "@ice/pkg": "workspace:*", "@ice/pkg-plugin-docusaurus": "workspace:*", "@ice/pkg-plugin-jsx-plus": "workspace:*", "@ice/pkg-plugin-rax-component": "workspace:*", + "@testing-library/jest-dom": "^5.16.5", + "@types/enzyme": "^3.10.12", "@types/rax": "^1.0.0", + "@types/testing-library__jest-dom": "^5.14.5", + "enzyme": "^3.11.0", + "enzyme-adapter-rax": "^1.0.3", + "jest": "^28.0.0", "rax": "^1.2.2", + "rax-test-renderer": "^1.1.0", "react": "^18.0.0", "react-dom": "^18.0.0" }, diff --git a/examples/rax-component/src/components/Header/index.css b/examples/rax-component/src/components/Header/index.css new file mode 100644 index 00000000..efabcab0 --- /dev/null +++ b/examples/rax-component/src/components/Header/index.css @@ -0,0 +1,3 @@ +div { + color: red +} \ No newline at end of file diff --git a/examples/rax-component/src/components/Header/index.tsx b/examples/rax-component/src/components/Header/index.tsx new file mode 100644 index 00000000..d296849d --- /dev/null +++ b/examples/rax-component/src/components/Header/index.tsx @@ -0,0 +1,9 @@ +import { createElement } from 'rax'; +import View from 'rax-view'; +import './index.css'; + +export default function Header() { + return ( + Header + ); +} diff --git a/examples/rax-component/src/index.tsx b/examples/rax-component/src/index.tsx index 8a705bb9..cfae2bd9 100644 --- a/examples/rax-component/src/index.tsx +++ b/examples/rax-component/src/index.tsx @@ -1,5 +1,6 @@ import { createElement, Fragment } from 'rax'; import styles from './index.module.css'; +import Header from './components/Header'; interface ComponentProps { /** Title for ExampleRaxComponent. */ @@ -8,12 +9,14 @@ interface ComponentProps { export default function ExampleRaxComponent(props: ComponentProps) { const { title = 'Hello World!' } = props; - + console.log(__DEV__); + const role = 'admin'; return (
+
{title} <>xxxxxxxx -
admin
+
admin
guest
); diff --git a/examples/rax-component/tests/Header.spec.tsx b/examples/rax-component/tests/Header.spec.tsx new file mode 100644 index 00000000..18b1e969 --- /dev/null +++ b/examples/rax-component/tests/Header.spec.tsx @@ -0,0 +1,8 @@ +import { createElement } from 'rax'; +import renderer from 'rax-test-renderer'; +import Header from '../src/components/Header'; + +test('test + ); }; diff --git a/examples/react-component/src/components/index.module.scss b/examples/react-component/src/components/index.module.scss new file mode 100644 index 00000000..61639bae --- /dev/null +++ b/examples/react-component/src/components/index.module.scss @@ -0,0 +1,3 @@ +.button { + background: lightskyblue; +} \ No newline at end of file diff --git a/examples/react-component/src/index.css b/examples/react-component/src/index.css new file mode 100644 index 00000000..ba1071d3 --- /dev/null +++ b/examples/react-component/src/index.css @@ -0,0 +1,4 @@ +/* This is comment */ +.title { + color: red; +} diff --git a/examples/react-component/src/index.tsx b/examples/react-component/src/index.tsx index 916f1c87..857e3645 100644 --- a/examples/react-component/src/index.tsx +++ b/examples/react-component/src/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import Button from '@/components/Button'; +import './index.css'; export default function Component() { console.log(__DEV__); @@ -8,7 +9,7 @@ export default function Component() { const [visible, setVisible] = React.useState(false); return ( <> -

Hello World

+

Hello World

diff --git a/examples/react-component/tests/Button.spec.tsx b/examples/react-component/tests/Button.spec.tsx new file mode 100644 index 00000000..fc0b1f97 --- /dev/null +++ b/examples/react-component/tests/Button.spec.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import Button from '../src/components/Button'; + +test('test ); + expect(screen.getByTestId('normal-button')).toHaveTextContent('PKG'); +}); diff --git a/examples/react-component/tests/Index.spec.tsx b/examples/react-component/tests/Index.spec.tsx new file mode 100644 index 00000000..3648e98c --- /dev/null +++ b/examples/react-component/tests/Index.spec.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import Index from '../src/index'; + +test('test
@@ -56,15 +57,18 @@ function MobilePreview({ code, url }) {
 刷新
+ >  刷新 +
 全屏模式
+ >  全屏模式 +
 二维码
+ >  二维码 +