基于antd开发的组件, 使用father-build 和dumi进行开发, jest 组件测试报错

基于antd 进行二次封装的组件,

import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react';
import { DatePicker, ConfigProvider } from 'antd';
import 'moment/locale/zh-cn';
import zhCN from 'antd/es/date-picker/locale/zh_CN';
import enUS from 'antd/es/date-picker/locale/en_US';
import moment from 'moment';
import './index.css';

export interface SelectTimeProps {
  startDate: string;
  endDate: string;
  name: string | undefined;
}

interface DatePcikersProps {
  labelText?: string;
  name?: string;
  handleChange: (date: SelectTimeProps) => void;
  [key: string]: any;
}

type Props = DatePcikersProps;

interface RefObject {
  changeLanguage: () => void;
}

const { RangePicker } = DatePicker;

const AntdPickers = forwardRef((props: Props, ref: Ref<RefObject>) => {
  const [local, setLocal] = useState(zhCN);
  const { labelText, name, handleChange, ...resetProps } = props;

  useImperativeHandle(ref, () => ({
    changeLanguage,
  }));

  const changeDate = (values: any, dateStrings: string[]) => {
    // const selectDate = {
    //   startDate: moment(dateStrings[0]).valueOf() || 0,
    //   endDate: moment(`${dateStrings[1]} 23:59:59:999`).valueOf() || 0,
    //   name: props.name
    // }
    const selectDate = {
      startDate: dateStrings[0],
      endDate: dateStrings[1],
      name: name,
    };
    handleChange(selectDate);
  };

  const disabledDate = (current: any) => {
    return current && current >= moment();
  };

  const changeLanguage = () => {
    setLocal(local === zhCN ? enUS : zhCN);
    // moment.locale('zh-cn');
  };

  return (
    <ConfigProvider
      getPopupContainer={(node) => {
        if (node) {
          return node.parentNode as HTMLElement;
        }
        return document.body;
      }}
    >
      <span>{labelText ? labelText + ' : ' : ''}</span>
      <RangePicker
        locale={local}
        onChange={changeDate}
        disabledDate={disabledDate}
        {...resetProps}
      />
    </ConfigProvider>
  );
});

export default AntdPickers;

jest.config.js文件代码

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/testSetUp.js'],
  testEnvironment: 'jsdom', // default: jsdom, 可配置: node
  "transformIgnorePatterns": [
    "/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$",
  ]
};

运行yarn test 报错
image.png
增加 .babelrc.js文件

module.exports = {
  presets: ['@babel/env', '@babel/typescript', '@babel/react'],
  // presets: ["@babel/react", "es2015", "stage-1"],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/proposal-class-properties',
  ],
  env: {
    test: {
      plugins: [
        ['babel-plugin-transform-require-ignore',
          {
            extensions: ['.less', '.scss', '.css'],
          },
        ],
        [
          "import",
          {
            "libraryName": "antd",
            "style": "css"
          }
        ]
      ]
    },
    esm: {
      presets: [
        [
          '@babel/env',
          {
            modules: false,
          },
        ],
      ],
      plugins: [
        [
          '@babel/plugin-transform-runtime',
          {
            useESModules: true,
          },
        ]
      ],
    },
  },
};

报错 .ant-picker 报错非法字符

应该是babelrc 和jest.config 配置问题, 但是实验多次还是报错, 请教大佬们!! 感谢!!

阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题