Reactjs 如何安装组件redux antd jest 从“React”导入React； 从“antd”导入{Breadcrumb as AntBreadcrumb，Breadcrumb}； 导入“/breadcrumb.scss”； 从“react router dom”导入{Link，withRouter，RouteComponentProps}； 从“/../../../redux/actions/baseLayout”导入{updatebreadcrump}； 从'react redux'导入{connect}； 从“@ant design/icons”导入{homeooutlined，rightsoutlined}； 界面新道具{ 面包屑：任何； } 类型Props=新建Props和路由组件Props； //@TODO 类Render扩展了React.Component{ 状态={ 路由：[{path:''，breadcrumbName:''}] }; //eslint禁用下一行反应/无弃用 组件将接收道具（下一步：任何）{ 这是我的国家({ 路线：this.props.breadcrumb }); } componentDidMount=（）=>{ 这是我的国家({ 路线：this.props.breadcrumb }); }; itemRender=（路由：任意、参数：任意、路由：任意、路径：任意）=>{ const last=routes.indexOf（route）==routes.length-1； 最后回来( {route.breadcrumbName} ) : ( {route.breadcrumbName} ); }; shouldComponentUpdate=（）=>{ 返回true； }; componentDidUpdate=（prevProps:RouteComponentProps）=>{ if（prevProps！==此.props）{ 这是我的国家({ 路线：this.props.breadcrumb }); } }; render（）{ 返回( {this.state.routes.map（（路由，索引）=>{ 返回( {`${route.breadcrumbName}`} {/* */} ); })} ); } } const mapDispatchToProps={ UpdateBradCrump:UpdateBradCrump }; 常量mapStateToProps=（状态：任意）=>{ 返回{ 面包屑：state.breadcrumb.breadcrumb | |[] }; }; 使用路由器导出默认值（连接（mapStateToProps、mapDispatchToProps）（渲染））；

上面的代码我想写测试用例，但我无法挂载我尝试挂载它，但它没有创建快照，它导致测试用例失败请指导我正确的方向或一些文档我对raect非常陌生，我的公司给了我这个任务来写测试用例，但我找不到任何相关的地方文件

import React from 'react';
import { Breadcrumb as AntBreadcrumb, Breadcrumb } from 'antd';
import './breadcrumb.scss';
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
import { updateBreadcrumb } from './../../../redux/actions/baseLayout';
import { connect } from 'react-redux';
import { HomeOutlined, RightOutlined } from '@ant-design/icons';
interface NewProps {
  breadcrumb: any;
}
type Props = NewProps & RouteComponentProps<{}>;

// @TODO
class Render extends React.Component<Props> {
  state = {
    routes: [{ path: '', breadcrumbName: '' }]
  };
  // eslint-disable-next-line react/no-deprecated
  componentWillReceiveProps(nextProps: any) {
    this.setState({
      routes: this.props.breadcrumb
    });
  }
  componentDidMount = () => {
    this.setState({
      routes: this.props.breadcrumb
    });
  };
  itemRender = (route: any, params: any, routes: any, paths: any) => {
    const last = routes.indexOf(route) === routes.length - 1;
    return last ? (
      <span>{route.breadcrumbName}</span>
    ) : (
      <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
    );
  };
  shouldComponentUpdate = () => {
    return true;
  };
  componentDidUpdate = (prevProps: RouteComponentProps) => {
    if (prevProps !== this.props) {
      this.setState({
        routes: this.props.breadcrumb
      });
    }
  };
  render() {
    return (
      <div style={{ color: 'red' }}>
        <Breadcrumb
          style={{ fontWeight: 600, fontSize: '15px', color: 'black' }}
          separator={
            <RightOutlined
              style={{ transform: 'scalex(0.7)', fontSize: '16px' }}
            />
          }
        >
          {this.state.routes.map((route, index) => {
            return (
              <Breadcrumb.Item key={index} href={`${route.path}`}>
                {`${route.breadcrumbName}`}
                {/* <HomeOutlined /> */}
              </Breadcrumb.Item>
            );
          })}
        </Breadcrumb>
      </div>
    );
  }
}

const mapDispatchToProps = {
  updateBreadcrumb: updateBreadcrumb
};
const mapStateToProps = (state: any) => {
  return {
    breadcrumb: state.breadcrumb.breadcrumb || []
  };
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Render));

从“React”导入React；
从“酶”中导入酶，{shall，mount}；
从“../breadcrumb”导入组件；
从“react Router dom”导入{BrowserRouter as Router}；
从“redux模拟存储”导入configureStore//ES6模块
从'react redux'导入{Provider}；
从“redux thunk”导入thunk；
从“反应测试渲染器”导入渲染器；
从'enzyme-Adapter-react-16'导入适配器；
酶配置({
适配器：新适配器（）
});
常量设置=（initprops:any）=>{
const wrapper=mount（）；
返回包装器；
};
描述（'登录组件'，（）=>{
const middleware=[thunk]；
const mockStore=configureStore（中间件）；
常量initialState={}；
const props=mockStore（initialState）；
let wrapper:any，instancewrapper:any；
在每个之前（（）=>{
包装器=设置（道具）；
instancewrapper=wrapper.instance（）；
});
它（'应该正确呈现'，（）=>{
const tree=renderer.create（）.toJSON（）；
expect（tree.toMatchSnapshot（）；
});
});

您仍然可以

浅层

呈现一个组件，并使用

.dive（）

函数来展开主组件。

您仍然可以

浅层

呈现一个组件，并使用

.dive（）

函数来展开主组件。

我已经尝试过它不起作用。此导出语句与Router and connect（redux）一起使用所以我完全混淆了“导出默认值与路由器（connect（MapStateTops，mapDispatchToProps）（Render））；“我已经试过了，它不起作用。这个导出语句是与路由器和connect（redux）一起导出的，所以我完全混淆了“导出默认值与路由器（connect（MapStateTops，mapDispatchToProps）（Render））；”

import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import Componnent from '../breadcrumb';
import { BrowserRouter as Router } from 'react-router-dom';
import configureStore from 'redux-mock-store'; //ES6 modules
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import renderer from 'react-test-renderer';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
    adapter: new Adapter()
});

const setUp = (initprops:any) => {
    const wrapper = mount(<Router><Provider store={initprops}><Componnent /></Provider></Router>);
    return wrapper;
};
    describe('Login Component', () => {
        const middlewares = [thunk];
        const mockStore = configureStore(middlewares);
        const initialState = {};
        const props = mockStore(initialState);

        let wrapper:any,instancewrapper:any;
        beforeEach(() => {
            wrapper = setUp(props); 
            instancewrapper = wrapper.instance();
        });

        it('should render correctly', () => {
            const tree = renderer.create(<Router><Provider store={props}><Componnent /></Provider></Router>).toJSON();
            expect(tree).toMatchSnapshot();
        });

    });