Skip to content

Commit 52ccdf5

Browse files
luhc228luhc228
authored
feat: support test (#489)
* feat: add define config * feat: add jest config * feat: support jest test * feat: add rax unit test * test: support css * chore: add test script * feat: add test docs * chore: add exclude test dir * fix: lint * chore: add @vitest/coverage-c8 dependency * fix: tests failed * feat: add transformIgnorePatterns * chore: changeset
1 parent aeecd79 commit 52ccdf5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+5224
-543
lines changed

‎.changeset/tame-pears-search.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@ice/pkg': patch
3+
---
4+
5+
feat: support UI or unit test

‎examples/rax-component/.eslintrc.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const { getESLintConfig } = require('@iceworks/spec');
2+
3+
module.exports = getESLintConfig('rax-ts');

‎examples/rax-component/__mocks__/styleMock.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
module.exports = {};
2+

‎examples/rax-component/babel.config.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-typescript",
5+
{
6+
"onlyRemoveTypeImports": true
7+
}
8+
],
9+
["@babel/preset-env", {
10+
"loose": true
11+
}],
12+
["@babel/preset-react", {
13+
"pragma": "createElement"
14+
}]
15+
]
16+
}

‎examples/rax-component/enzyme-setup.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as enzyme from 'enzyme';
2+
import Adapter from 'enzyme-adapter-rax';
3+
4+
// Setup Enzyme
5+
enzyme.configure({ adapter: new Adapter() });

‎examples/rax-component/jest.config.mjs

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import pkgService, { defineJestConfig } from '@ice/pkg';
2+
3+
export default defineJestConfig(pkgService, {
4+
setupFilesAfterEnv: ['<rootDir>/enzyme-setup.ts'],
5+
moduleNameMapper: {
6+
'\\.(css|less|scss)$': '<rootDir>/__mocks__/styleMock.js',
7+
},
8+
transformIgnorePatterns: ['<rootDir>/node_modules/rax-*'],
9+
});

‎examples/rax-component/package.json

+15-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@
3838
"eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./",
3939
"eslint:fix": "npm run eslint -- --fix",
4040
"stylelint": "stylelint \"**/*.{css,scss,less}\"",
41-
"lint": "npm run eslint && npm run stylelint"
41+
"lint": "npm run eslint && npm run stylelint",
42+
"test": "jest"
4243
},
4344
"keywords": [
4445
"ice",
@@ -47,15 +48,27 @@
4748
],
4849
"dependencies": {
4950
"@swc/helpers": "^0.4.14",
50-
"babel-runtime-jsx-plus": "^0.1.5"
51+
"babel-runtime-jsx-plus": "^0.1.5",
52+
"rax-view": "^2.3.0"
5153
},
5254
"devDependencies": {
55+
"@babel/core": "^7.17.5",
56+
"@babel/preset-env": "^7.20.2",
57+
"@babel/preset-react": "^7.18.6",
58+
"@babel/preset-typescript": "^7.18.6",
5359
"@ice/pkg": "workspace:*",
5460
"@ice/pkg-plugin-docusaurus": "workspace:*",
5561
"@ice/pkg-plugin-jsx-plus": "workspace:*",
5662
"@ice/pkg-plugin-rax-component": "workspace:*",
63+
"@testing-library/jest-dom": "^5.16.5",
64+
"@types/enzyme": "^3.10.12",
5765
"@types/rax": "^1.0.0",
66+
"@types/testing-library__jest-dom": "^5.14.5",
67+
"enzyme": "^3.11.0",
68+
"enzyme-adapter-rax": "^1.0.3",
69+
"jest": "^28.0.0",
5870
"rax": "^1.2.2",
71+
"rax-test-renderer": "^1.1.0",
5972
"react": "^18.0.0",
6073
"react-dom": "^18.0.0"
6174
},

‎examples/rax-component/src/components/Header/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
div {
2+
color: red
3+
}

‎examples/rax-component/src/components/Header/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createElement } from 'rax';
2+
import View from 'rax-view';
3+
import './index.css';
4+
5+
export default function Header() {
6+
return (
7+
<View data-testid="header">Header</View>
8+
);
9+
}

‎examples/rax-component/src/index.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createElement, Fragment } from 'rax';
22
import styles from './index.module.css';
3+
import Header from './components/Header';
34

45
interface ComponentProps {
56
/** Title for ExampleRaxComponent. */
@@ -8,12 +9,14 @@ interface ComponentProps {
89

910
export default function ExampleRaxComponent(props: ComponentProps) {
1011
const { title = 'Hello World!' } = props;
11-
12+
console.log(__DEV__);
13+
const role = 'admin';
1214
return (
1315
<div className={styles.ExampleRaxComponent}>
16+
<Header />
1417
{title}
1518
<>xxxxxxxx</>
16-
<div x-if={true}>admin</div>
19+
<div x-if={role === 'admin'}>admin</div>
1720
<div x-else>guest</div>
1821
</div>
1922
);

‎examples/rax-component/tests/Header.spec.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { createElement } from 'rax';
2+
import renderer from 'rax-test-renderer';
3+
import Header from '../src/components/Header';
4+
5+
test('test <Button /> component', () => {
6+
const tree = renderer.create(<Header />);
7+
expect(tree.toJSON().children[0]).toBe('Header')
8+
});

‎examples/rax-component/tests/types.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare module 'rax-test-renderer';
2+
declare module 'enzyme-adapter-rax';

‎examples/rax-component/tsconfig.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"noImplicitReturns": true,
1313
"noImplicitThis": true,
1414
"noImplicitAny": true,
15-
"skipLibCheck": true
15+
"skipLibCheck": true,
16+
"types": ["vitest/globals"]
1617
},
17-
"include": ["src"],
18+
"include": ["src", "tests"],
1819
}

‎examples/react-component/__mocks__/styleMock.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
module.exports = {};
2+

‎examples/react-component/jest-setup.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom';

‎examples/react-component/jest.config.mjs

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import pkgService, { defineJestConfig } from '@ice/pkg';
2+
3+
export default defineJestConfig(pkgService, {
4+
preset: 'ts-jest',
5+
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
6+
testEnvironment: 'jest-environment-jsdom',
7+
moduleNameMapper: {
8+
'\\.module\\.(css|scss|less)$': 'identity-obj-proxy',
9+
'\\.(css|less|scss)$': '<rootDir>/__mocks__/styleMock.js',
10+
},
11+
});

‎examples/react-component/package.json

+14-3
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@
2626
"scripts": {
2727
"start": "ice-pkg start",
2828
"build": "ice-pkg build",
29-
"prepublishOnly": "npm run build"
29+
"prepublishOnly": "npm run build",
30+
"vitest": "vitest",
31+
"jest": "jest"
3032
},
3133
"dependencies": {
3234
"@ice/jsx-runtime": "^0.2.0",
@@ -37,13 +39,22 @@
3739
"@ice/pkg": "workspace:*",
3840
"@ice/pkg-plugin-docusaurus": "workspace:*",
3941
"@ice/pkg-plugin-jsx-plus": "workspace:*",
42+
"@testing-library/jest-dom": "^5.16.5",
43+
"@testing-library/react": "^14.0.0",
4044
"@types/react": "^18.0.0",
4145
"@types/react-dom": "^18.0.0",
46+
"@types/testing-library__jest-dom": "^5.14.5",
47+
"identity-obj-proxy": "^3.0.0",
48+
"jest": "^29.0.0",
49+
"jest-environment-jsdom": "^29.0.0",
50+
"jsdom": "^21.1.0",
4251
"react": "^18.2.0",
4352
"react-dom": "^18.2.0",
44-
"style-unit": "^3.0.4",
4553
"sass": "^1.58.3",
46-
"sass-loader": "^13.2.0"
54+
"sass-loader": "^13.2.0",
55+
"style-unit": "^3.0.4",
56+
"ts-jest": "^29.0.0",
57+
"vitest": "^0.28.5"
4758
},
4859
"peerDependencies": {
4960
"react": "^17 || ^18"

‎examples/react-component/src/components/Button.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface ButtonProps {
77

88
const Button: React.FunctionComponent<React.PropsWithChildren<ButtonProps>> = (props) => {
99
return (
10-
<button className={styles.button} onClick={props.onClick}>{props.children}</button>
10+
<button className={styles.button} onClick={props.onClick} data-testid="normal-button">{props.children}</button>
1111
);
1212
};
1313

‎examples/react-component/src/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Component() {
99
const [visible, setVisible] = React.useState(false);
1010
return (
1111
<>
12-
<h1 style={{ fontSize: '100rpx' }}>Hello World</h1>
12+
<h1 style={{ fontSize: '100rpx' }} data-testid="title">Hello World</h1>
1313
<Button onClick={() => setVisible(!visible)}>Click Me to Set Visible</Button>
1414

1515
<div>

‎examples/react-component/tests/Button.spec.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import Button from '../src/components/Button';
4+
5+
test('test <Button /> component', () => {
6+
render(<Button>PKG</Button>);
7+
expect(screen.getByTestId('normal-button')).toHaveTextContent('PKG');
8+
});

‎examples/react-component/tests/Index.spec.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import Index from '../src/index';
4+
5+
test('test <Button /> component', () => {
6+
render(<Index />);
7+
expect(screen.getByTestId('title')).toHaveTextContent('Hello World');
8+
});

‎examples/react-component/vitest-setup.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import matchers from '@testing-library/jest-dom/matchers';
2+
import { expect } from 'vitest';
3+
4+
expect.extend(matchers);

‎examples/react-component/vitest.config.mts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import pkgService, { defineVitestConfig } from '@ice/pkg';
2+
3+
export default defineVitestConfig(pkgService, () => ({
4+
test: {
5+
environment: 'jsdom',
6+
setupFiles: ['./vitest-setup.ts'],
7+
globals: true,
8+
},
9+
}));

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@changesets/cli": "^2.26.0",
2525
"@commitlint/cli": "^15.0.0",
2626
"@iceworks/spec": "^1.6.0",
27+
"@vitest/coverage-c8": "^0.28.5",
2728
"eslint": "^8.19.0",
2829
"fs-extra": "^10.1.0",
2930
"ice-npm-utils": "workspace:^3.0.2",
@@ -38,6 +39,6 @@
3839
"axios": "^0.23.0",
3940
"c8": "^7.11.3",
4041
"ts-node": "^10.8.2",
41-
"vitest": "^0.7.13"
42+
"vitest": "^0.28.5"
4243
}
4344
}

‎packages/pkg/bin/cli.mjs

+3-8
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,10 @@ import consola from 'consola';
55
import { cac } from 'cac';
66
import { readFileSync } from 'fs';
77
import { join, dirname } from 'path';
8-
import { require } from '../lib/utils.js';
9-
import componentService from '../lib/index.js';
8+
import pkgService, { getBuiltInPlugins } from '../lib/index.js';
109

1110
const __dirname = dirname(fileURLToPath(import.meta.url));
1211

13-
const getBuiltInPlugins = () => [
14-
require.resolve('./plugins/component'),
15-
];
16-
1712
const cli = cac('ice-pkg');
1813

1914
(async () => {
@@ -32,7 +27,7 @@ const cli = cac('ice-pkg');
3227
delete options['--'];
3328
const { rootDir, ...commandArgs } = options;
3429

35-
await componentService.run({
30+
await pkgService.run({
3631
command: 'build',
3732
commandArgs,
3833
getBuiltInPlugins,
@@ -55,7 +50,7 @@ const cli = cac('ice-pkg');
5550
delete options['--'];
5651
const { rootDir, ...commandArgs } = options;
5752

58-
await componentService.run({
53+
await pkgService.run({
5954
command: 'start',
6055
commandArgs,
6156
getBuiltInPlugins,

‎packages/pkg/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"fs-extra": "^10.0.0",
5050
"globby": "^11.0.4",
5151
"gzip-size": "^7.0.0",
52+
"lodash.merge": "^4.6.2",
5253
"magic-string": "^0.25.7",
5354
"picocolors": "^1.0.0",
5455
"postcss": "^8.4.6",
@@ -61,10 +62,13 @@
6162
"devDependencies": {
6263
"@types/babel__core": "^7.1.20",
6364
"@types/fs-extra": "^9.0.13",
65+
"@types/lodash.merge": "^4.6.7",
6466
"@types/node": "^17.0.2",
67+
"jest": "^29.4.3",
6568
"cssnano": "^5.1.15",
6669
"sass": "^1.49.8",
67-
"source-map": "0.6.1"
70+
"source-map": "0.6.1",
71+
"vitest": "^0.28.5"
6872
},
6973
"publishConfig": {
7074
"access": "public",

‎packages/pkg/src/build.ts ‎packages/pkg/src/commands/build.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import fse from 'fs-extra';
22
import { RollupOptions } from 'rollup';
3-
import { getBuildTasks } from './helpers/getBuildTasks.js';
4-
import { getRollupOptions } from './helpers/getRollupOptions.js';
5-
import { buildBundleTasks } from './tasks/bundle.js';
6-
import { buildTransformTasks } from './tasks/transform.js';
3+
import { getBuildTasks } from '../helpers/getBuildTasks.js';
4+
import { getRollupOptions } from '../helpers/getRollupOptions.js';
5+
import { buildBundleTasks } from '../tasks/bundle.js';
6+
import { buildTransformTasks } from '../tasks/transform.js';
77

8-
import type { Context, OutputResult, TaskRunnerContext } from './types.js';
8+
import type { Context, OutputResult, TaskRunnerContext } from '../types.js';
99

1010
export default async function build(context: Context) {
1111
const { applyHook, commandArgs } = context;

‎packages/pkg/src/start.ts ‎packages/pkg/src/commands/start.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import consola from 'consola';
22
import { RollupOptions } from 'rollup';
3-
import { getBuildTasks } from './helpers/getBuildTasks.js';
4-
import { getRollupOptions } from './helpers/getRollupOptions.js';
5-
import { createWatcher } from './helpers/watcher.js';
6-
import { watchBundleTasks } from './tasks/bundle.js';
7-
import { watchTransformTasks } from './tasks/transform.js';
3+
import { getBuildTasks } from '../helpers/getBuildTasks.js';
4+
import { getRollupOptions } from '../helpers/getRollupOptions.js';
5+
import { createWatcher } from '../helpers/watcher.js';
6+
import { watchBundleTasks } from '../tasks/bundle.js';
7+
import { watchTransformTasks } from '../tasks/transform.js';
88

99
import type {
1010
OutputResult,
1111
Context,
1212
WatchEvent,
1313
TaskRunnerContext,
14-
} from './types.js';
14+
} from '../types.js';
1515

1616
export default async function start(context: Context) {
1717
const { applyHook, commandArgs } = context;

‎packages/pkg/src/commands/test.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { getBuildTasks } from '../helpers/getBuildTasks.js';
2+
3+
import type { Context } from '../types.js';
4+
5+
export default async function test(context: Context) {
6+
const buildTasks = getBuildTasks(context);
7+
const taskConfigs = buildTasks.map(({ config }) => config);
8+
9+
return {
10+
taskConfigs,
11+
context,
12+
};
13+
}

0 commit comments

Comments
 (0)