fix: jest config

.babelrc

@@ -9,6 +9,7 @@
         "@babel/plugin-transform-property-literals",
         "@babel/plugin-transform-spread",
         "@babel/plugin-transform-template-literals",
+        "@babel/plugin-transform-modules-commonjs",
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-proposal-export-namespace-from",
         "@babel/plugin-proposal-object-rest-spread",

.jest.js

@@ -2,6 +2,8 @@ const libDir = process.env.LIB_DIR;
 
 const transformIgnorePatterns = [
   '/dist/',
+  '<rootDir>/node_modules/(?!lodash-es)',
+  '<rootDir>/node_modules/(?!.*?/es/.*\\.js)',
   // Ignore modules without es dir.
   // Update: @babel/runtime should also be transformed
   'node_modules/(?!.*(@babel|lodash-es))[^/]+?/(?!(es|node_modules)/)',
@@ -14,14 +16,16 @@ module.exports = {
   modulePathIgnorePatterns: ['/_site/'],
   transform: {
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
-    '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
-    '^.+\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest',
+    '.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '.+\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
   },
   testRegex: libDir === 'dist' ? 'demo\\.test\\.ts$' : '.*\\.test\\.tsx$',
   testEnvironment: 'jest-environment-jsdom-fifteen',
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
+    // '^.*lodash-es.*\\.js': '<rootDir>/node_modules/babel-jest',
+    '^.*ant-design-vue.*[.]?style|css|less.*$': 'jest-transform-stub',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   collectCoverage: process.env.COVERAGE === 'true',
@@ -30,8 +34,16 @@ module.exports = {
   transformIgnorePatterns,
   verbose: true,
   globals: {
+    stubs: {
+      transition: false,
+      'transition-group': false,
+    },
     'ts-jest': {
       babelConfig: true,
+      tsconfig: {
+        // allow js in typescript
+        allowJs: true,
+      },
     },
   },
 };

package.json

@@ -30,6 +30,7 @@
     "@ant-design-vue/tools": "^3.0.4",
     "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/plugin-transform-object-assign": "^7.12.1",
     "@types/fs-extra": "^9.0.2",
     "@types/jest": "^24.0.17",

src/PageContainer/index.tsx

@@ -7,14 +7,14 @@ import { AffixProps } from './interfaces/Affix';
 /* replace antd ts define end */
 import { useRouteContext, RouteContextProps } from '../RouteContext';
 import { useProProvider } from '../ProProvider';
-import 'ant-design-vue/es/affix/style';
-import Affix from 'ant-design-vue/es/affix';
-import 'ant-design-vue/es/page-header/style';
-import PageHeader from 'ant-design-vue/es/page-header';
-import 'ant-design-vue/es/tabs/style';
-import Tabs from 'ant-design-vue/es/tabs';
-import 'ant-design-vue/es/spin/style';
-import Spin from 'ant-design-vue/es/spin';
+import 'ant-design-vue/lib/affix/style';
+import Affix from 'ant-design-vue/lib/affix';
+import 'ant-design-vue/lib/page-header/style';
+import PageHeader from 'ant-design-vue/lib/page-header';
+import 'ant-design-vue/lib/tabs/style';
+import Tabs from 'ant-design-vue/lib/tabs';
+import 'ant-design-vue/lib/spin/style';
+import Spin from 'ant-design-vue/lib/spin';
 import GridContent from '../GridContent';
 import FooterToolbar from '../FooterToolbar';
 import './index.less';

tests/page-container.test.tsx

+import { mount } from '@vue/test-utils';
+import { PageContainer } from '../src/PageContainer';
+import { Tag, Button } from 'ant-design-vue';
+
+describe('PageContainer', () => {
+
+  const routes = [
+    {
+      path: 'index',
+      breadcrumbName: 'First-level Menu',
+    },
+    {
+      path: 'first',
+      breadcrumbName: 'Second-level Menu',
+    },
+    {
+      path: 'second',
+      breadcrumbName: 'Third-level Menu',
+    },
+  ];
+  const props = {
+    title: 'Title',
+    subTitle: "This is a subtitle",
+    breadcrumb: { routes },
+    onBack: () => {},
+    tags: ['Tag 1', 'Tag 2'].map(tag => (<Tag color="blue">{tag}</Tag>)),
+    extra: [<Button key="1" type="primary">主操作</Button>,],
+    content: (<div>content</div>),
+    extraContent: (<div>extraContent</div>),
+    footer: [
+      <Button key="3">重置</Button>,
+      <Button key="2" type="primary">
+        提交
+      </Button>,
+    ],
+  }
+
+  it('🥩 base use', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <PageContainer {...props}>
+            <div>Page Content</div>
+          </PageContainer>
+        );
+      },
+    });
+    console.log(wrapper.html());
+  });
+
+});