test(ui): add tmp test of button

Author: xiaokesong

package.json

@@ -47,7 +47,7 @@
     "@types/fs-extra": "^9.0.13",
     "@types/glob": "^8.0.0",
     "@types/inquirer": "^8.2.5",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "28.1.1",
     "@types/lodash": "^4.14.191",
     "@types/marked": "^4.0.8",
     "@types/node": "16.18.0",
@@ -59,7 +59,7 @@
     "@typescript-eslint/parser": "^5.46.1",
     "axios": "^1.2.1",
     "axios-mock-adapter": "^1.21.2",
-    "babel-jest": "^29.1.2",
+    "babel-jest": "28.1.1",
     "bootstrap": "^5.2.3",
     "codesandbox": "^2.2.3",
     "colors": "^1.4.0",
@@ -84,7 +84,7 @@
     "immer": "^9.0.16",
     "inquirer": "^8.2.5",
     "is-builtin-module": "^3.2.0",
-    "jest": "^27.5.1",
+    "jest": "28.1.1",
     "jest-environment-jsdom": "28.1.1",
     "jsurl": "^0.1.5",
     "lerna": "^6.1.0",
@@ -112,7 +112,7 @@
     "stylelint-config-standard": "^29.0.0",
     "stylelint-scss": "^4.3.0",
     "table": "^6.8.1",
-    "ts-jest": "^27.1.4",
+    "ts-jest": "28.0.5",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
     "typescript": "~4.9.4",

packages/ui/jest.config.js

@@ -20,7 +20,8 @@ module.exports = {
   displayName: 'ui',
   preset: '../../jest.preset.js',
   transform: {
-    '^.+\\.[tj]sx?$': 'babel-jest',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   collectCoverage: true,

packages/ui/src/__tests__/utils.ts

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { DRoot } from '../components/root';
+
+const AllTheProviders: React.JSXElementConstructor<{ children: React.ReactElement }> = ({ children }) => {
+  return React.createElement(DRoot, undefined, children);
+};
+
+const customRender = ((ui: any, options: any) => render(ui, { wrapper: AllTheProviders, ...options })) as typeof render;
+
+// re-export everything
+export * from '@testing-library/react';
+
+// override render method
+export { customRender as render };

packages/ui/src/components/button/Button.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '../../__tests__/utils';
+import { DButton } from './index';
+
+describe('DButton', () => {
+  const text = 'This is DButton';
+
+  it('should `children` work', () => {
+    const { getByText } = render(<DButton children={text} />);
+    expect(getByText(text)).toBeInTheDocument();
+  });
+});