Reactjs 开玩笑/不认识道具_Reactjs_Redux_Jestjs_React Hooks_Enzyme

Reactjs 开玩笑/不认识道具

reactjs redux jestjs

Reactjs 开玩笑/不认识道具,reactjs,redux,jestjs,react-hooks,enzyme,Reactjs,Redux,Jestjs,React Hooks,Enzyme,我正在尝试为使用Redux和hook的React功能组件编写一个测试我正在用Jest和酶进行测试供参考： import React from 'react'; import {useDispatch, useSelector} from "react-redux"; import * as actions from '../../actions/actions'; import { Button, Icon } from "@material-ui/core"; export const

我正在尝试为使用Redux和hook的React功能组件编写一个测试

我正在用Jest和酶进行测试

供参考：

import React from 'react';
import {useDispatch, useSelector} from "react-redux";
import * as actions from '../../actions/actions';
import { Button, Icon } from "@material-ui/core";


export const EditBatchHeaderComponent = (props) => {
  const dispatch = useDispatch();
  const { selectedBatch } = props;
  const { batchName } = selectedBatch;
  return (
    <div className="edit-header-container">
      <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>
        <Icon>arrow_back</Icon>
      </Button>
      <span>Edit Batch</span>&nbsp;
      <span>{batchName}</span>
    </div>
  );
};

import React from 'react';
import { BatchHeaderComponent } from './BatchHeaderComponent';
import { BatchTableComponent } from './BatchTableComponent';
import { EditBatchComponent } from './EditBatchComponent';
import {useSelector} from "react-redux";
import {EditBatchHeaderComponent} from "./EditBatchHeaderComponent";

export const BatchManagementComponent = () => {
  const { selectedBatch } = useSelector(state => state.batchManagementReducer);
  if (selectedBatch.length) {
    return (
      <div className="component-container">
        <EditBatchHeaderComponent selectedBatch={selectedBatch} />
        <EditBatchComponent selectedBatch={selectedBatch} />
      </div>
    );
  }
  return (
    <div className="component-container">
      <BatchHeaderComponent />
      <BatchTableComponent />
    </div>
  );
};

{
  sorting: {
    order: '',
    orderBy: ''
  },
  searchBy: 'batchName',
  searchText: '',
  filterByStatus: '--',
  filterByType: '--',
  waiting: false,
  batchData: [],
  selectedBatch: {
    batchName: '',
  },
}

import React from 'react';
import { EditBatchHeaderComponent } from '../../../components/batchManagement/EditBatchHeaderComponent';
import configureStore from '../../../store';
import {Provider} from "react-redux";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import {Button} from "@material-ui/core";

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

describe('EditBatchHeaderComponent', () => {
  it('mounts to the DOM successfully', () => {
    const wrapper = mount(<Provider store={configureStore()}>
      <EditBatchHeaderComponent />
    </Provider>);
    expect(wrapper.find(EditBatchHeaderComponent)).toBeDefined();
  });
  it('deselects the account and closes when the back button is clicked', () => {
    const props = {selectedBatch: {batchName: 'INFORM'}, dispatch: jest.fn()};
    const obj = {};
    const wrapper = mount(
      <Provider store={configureStore()}>
        <EditBatchHeaderComponent {...props} />
      </Provider>
    );
    console.log(wrapper.find(EditBatchHeaderComponent).props());
    wrapper.find(Button).first().simulate('click');
    expect(wrapper.find(EditBatchHeaderComponent)).toEqual(obj);
  });
});

FAIL src/spec/components/batchManagement/EditBatchHeaderComponent.test.js (7.182s)
  ● EditBatchHeaderComponent › mounts to the DOM successfully

    TypeError: Cannot read property 'batchName' of undefined

       8 |   const dispatch = useDispatch();
       9 |   const { selectedBatch } = props;
    > 10 |   const { batchName } = selectedBatch;
         |           ^
      11 |   return (
      12 |     <div className="edit-header-container">
      13 |       <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>

这是正在测试的功能组件：

import React from 'react';
import {useDispatch, useSelector} from "react-redux";
import * as actions from '../../actions/actions';
import { Button, Icon } from "@material-ui/core";


export const EditBatchHeaderComponent = (props) => {
  const dispatch = useDispatch();
  const { selectedBatch } = props;
  const { batchName } = selectedBatch;
  return (
    <div className="edit-header-container">
      <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>
        <Icon>arrow_back</Icon>
      </Button>
      <span>Edit Batch</span>&nbsp;
      <span>{batchName}</span>
    </div>
  );
};

import React from 'react';
import { BatchHeaderComponent } from './BatchHeaderComponent';
import { BatchTableComponent } from './BatchTableComponent';
import { EditBatchComponent } from './EditBatchComponent';
import {useSelector} from "react-redux";
import {EditBatchHeaderComponent} from "./EditBatchHeaderComponent";

export const BatchManagementComponent = () => {
  const { selectedBatch } = useSelector(state => state.batchManagementReducer);
  if (selectedBatch.length) {
    return (
      <div className="component-container">
        <EditBatchHeaderComponent selectedBatch={selectedBatch} />
        <EditBatchComponent selectedBatch={selectedBatch} />
      </div>
    );
  }
  return (
    <div className="component-container">
      <BatchHeaderComponent />
      <BatchTableComponent />
    </div>
  );
};

{
  sorting: {
    order: '',
    orderBy: ''
  },
  searchBy: 'batchName',
  searchText: '',
  filterByStatus: '--',
  filterByType: '--',
  waiting: false,
  batchData: [],
  selectedBatch: {
    batchName: '',
  },
}

import React from 'react';
import { EditBatchHeaderComponent } from '../../../components/batchManagement/EditBatchHeaderComponent';
import configureStore from '../../../store';
import {Provider} from "react-redux";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import {Button} from "@material-ui/core";

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

describe('EditBatchHeaderComponent', () => {
  it('mounts to the DOM successfully', () => {
    const wrapper = mount(<Provider store={configureStore()}>
      <EditBatchHeaderComponent />
    </Provider>);
    expect(wrapper.find(EditBatchHeaderComponent)).toBeDefined();
  });
  it('deselects the account and closes when the back button is clicked', () => {
    const props = {selectedBatch: {batchName: 'INFORM'}, dispatch: jest.fn()};
    const obj = {};
    const wrapper = mount(
      <Provider store={configureStore()}>
        <EditBatchHeaderComponent {...props} />
      </Provider>
    );
    console.log(wrapper.find(EditBatchHeaderComponent).props());
    wrapper.find(Button).first().simulate('click');
    expect(wrapper.find(EditBatchHeaderComponent)).toEqual(obj);
  });
});

FAIL src/spec/components/batchManagement/EditBatchHeaderComponent.test.js (7.182s)
  ● EditBatchHeaderComponent › mounts to the DOM successfully

    TypeError: Cannot read property 'batchName' of undefined

       8 |   const dispatch = useDispatch();
       9 |   const { selectedBatch } = props;
    > 10 |   const { batchName } = selectedBatch;
         |           ^
      11 |   return (
      12 |     <div className="edit-header-container">
      13 |       <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>

这是无法识别道具的测试文件：

import React from 'react';
import {useDispatch, useSelector} from "react-redux";
import * as actions from '../../actions/actions';
import { Button, Icon } from "@material-ui/core";


export const EditBatchHeaderComponent = (props) => {
  const dispatch = useDispatch();
  const { selectedBatch } = props;
  const { batchName } = selectedBatch;
  return (
    <div className="edit-header-container">
      <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>
        <Icon>arrow_back</Icon>
      </Button>
      <span>Edit Batch</span>&nbsp;
      <span>{batchName}</span>
    </div>
  );
};

import React from 'react';
import { BatchHeaderComponent } from './BatchHeaderComponent';
import { BatchTableComponent } from './BatchTableComponent';
import { EditBatchComponent } from './EditBatchComponent';
import {useSelector} from "react-redux";
import {EditBatchHeaderComponent} from "./EditBatchHeaderComponent";

export const BatchManagementComponent = () => {
  const { selectedBatch } = useSelector(state => state.batchManagementReducer);
  if (selectedBatch.length) {
    return (
      <div className="component-container">
        <EditBatchHeaderComponent selectedBatch={selectedBatch} />
        <EditBatchComponent selectedBatch={selectedBatch} />
      </div>
    );
  }
  return (
    <div className="component-container">
      <BatchHeaderComponent />
      <BatchTableComponent />
    </div>
  );
};

{
  sorting: {
    order: '',
    orderBy: ''
  },
  searchBy: 'batchName',
  searchText: '',
  filterByStatus: '--',
  filterByType: '--',
  waiting: false,
  batchData: [],
  selectedBatch: {
    batchName: '',
  },
}

import React from 'react';
import { EditBatchHeaderComponent } from '../../../components/batchManagement/EditBatchHeaderComponent';
import configureStore from '../../../store';
import {Provider} from "react-redux";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import {Button} from "@material-ui/core";

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

describe('EditBatchHeaderComponent', () => {
  it('mounts to the DOM successfully', () => {
    const wrapper = mount(<Provider store={configureStore()}>
      <EditBatchHeaderComponent />
    </Provider>);
    expect(wrapper.find(EditBatchHeaderComponent)).toBeDefined();
  });
  it('deselects the account and closes when the back button is clicked', () => {
    const props = {selectedBatch: {batchName: 'INFORM'}, dispatch: jest.fn()};
    const obj = {};
    const wrapper = mount(
      <Provider store={configureStore()}>
        <EditBatchHeaderComponent {...props} />
      </Provider>
    );
    console.log(wrapper.find(EditBatchHeaderComponent).props());
    wrapper.find(Button).first().simulate('click');
    expect(wrapper.find(EditBatchHeaderComponent)).toEqual(obj);
  });
});

FAIL src/spec/components/batchManagement/EditBatchHeaderComponent.test.js (7.182s)
  ● EditBatchHeaderComponent › mounts to the DOM successfully

    TypeError: Cannot read property 'batchName' of undefined

       8 |   const dispatch = useDispatch();
       9 |   const { selectedBatch } = props;
    > 10 |   const { batchName } = selectedBatch;
         |           ^
      11 |   return (
      12 |     <div className="edit-header-container">
      13 |       <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>

从“React”导入React；
从“../../../components/batchManagement/EditBatchHeaderComponent”导入{EditBatchHeaderComponent}；
从“../../../store”导入configureStore；
从“react redux”导入{Provider}；
从“酶”中导入酶，{mount}；
从“酶-适配器-反应-16”导入适配器；
从“@material ui/core”导入{Button}”；
configure（{adapter:newadapter（）}）；
描述（'EditBatchHeaderComponent'，（）=>{
它（'成功装载到DOM'，（）=>{
常量包装器=装入(
);
expect（wrapper.find（EditBatchHeaderComponent））.toBeDefined（）；
});
它（'取消选择帐户并在单击后退按钮时关闭'，（）=>{
const props={selectedBatch:{batchName:'INFORM'}，dispatch:jest.fn（）}；
常量obj={}；
常量包装器=装入(
);
log（wrapper.find（EditBatchHeaderComponent.props（））；
wrapper.find（Button.first（）.simulate（'click'）；
expect（wrapper.find（editbackheadercomponent））.toEqual（obj）；
});
});

这是测试套件提供的错误文本：

import React from 'react';
import {useDispatch, useSelector} from "react-redux";
import * as actions from '../../actions/actions';
import { Button, Icon } from "@material-ui/core";


export const EditBatchHeaderComponent = (props) => {
  const dispatch = useDispatch();
  const { selectedBatch } = props;
  const { batchName } = selectedBatch;
  return (
    <div className="edit-header-container">
      <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>
        <Icon>arrow_back</Icon>
      </Button>
      <span>Edit Batch</span>&nbsp;
      <span>{batchName}</span>
    </div>
  );
};

import React from 'react';
import { BatchHeaderComponent } from './BatchHeaderComponent';
import { BatchTableComponent } from './BatchTableComponent';
import { EditBatchComponent } from './EditBatchComponent';
import {useSelector} from "react-redux";
import {EditBatchHeaderComponent} from "./EditBatchHeaderComponent";

export const BatchManagementComponent = () => {
  const { selectedBatch } = useSelector(state => state.batchManagementReducer);
  if (selectedBatch.length) {
    return (
      <div className="component-container">
        <EditBatchHeaderComponent selectedBatch={selectedBatch} />
        <EditBatchComponent selectedBatch={selectedBatch} />
      </div>
    );
  }
  return (
    <div className="component-container">
      <BatchHeaderComponent />
      <BatchTableComponent />
    </div>
  );
};

{
  sorting: {
    order: '',
    orderBy: ''
  },
  searchBy: 'batchName',
  searchText: '',
  filterByStatus: '--',
  filterByType: '--',
  waiting: false,
  batchData: [],
  selectedBatch: {
    batchName: '',
  },
}

import React from 'react';
import { EditBatchHeaderComponent } from '../../../components/batchManagement/EditBatchHeaderComponent';
import configureStore from '../../../store';
import {Provider} from "react-redux";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import {Button} from "@material-ui/core";

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

describe('EditBatchHeaderComponent', () => {
  it('mounts to the DOM successfully', () => {
    const wrapper = mount(<Provider store={configureStore()}>
      <EditBatchHeaderComponent />
    </Provider>);
    expect(wrapper.find(EditBatchHeaderComponent)).toBeDefined();
  });
  it('deselects the account and closes when the back button is clicked', () => {
    const props = {selectedBatch: {batchName: 'INFORM'}, dispatch: jest.fn()};
    const obj = {};
    const wrapper = mount(
      <Provider store={configureStore()}>
        <EditBatchHeaderComponent {...props} />
      </Provider>
    );
    console.log(wrapper.find(EditBatchHeaderComponent).props());
    wrapper.find(Button).first().simulate('click');
    expect(wrapper.find(EditBatchHeaderComponent)).toEqual(obj);
  });
});

FAIL src/spec/components/batchManagement/EditBatchHeaderComponent.test.js (7.182s)
  ● EditBatchHeaderComponent › mounts to the DOM successfully

    TypeError: Cannot read property 'batchName' of undefined

       8 |   const dispatch = useDispatch();
       9 |   const { selectedBatch } = props;
    > 10 |   const { batchName } = selectedBatch;
         |           ^
      11 |   return (
      12 |     <div className="edit-header-container">
      13 |       <Button disableRipple onClick={() => {dispatch(actions.unSelectBatch())} }>

src/spec/components/batchManagement/EditBatchHeaderComponent.test.js（7.182s）失败
● EditBatchHeaderComponent›成功装载到DOM
TypeError:无法读取未定义的属性“batchName”
8 | const dispatch=useDispatch（）；
9 | const{selectedBatch}=props；
>10 | const{batchName}=selectedBatch；
|           ^
11 |返回(
12 |     
13 |{dispatch（actions.unSelectBatch（））}>

我在一个类似的组件上运行了一个几乎相同的测试，该组件运行并适当地覆盖了代码。我似乎不明白为什么道具没有被认出来

非常感谢您的帮助。

当您直接测试不依赖于状态的组件时，为什么要使用

提供程序

？您可以通过道具（就像您在第二次测试中所做的那样）哦，哇，我一定是代码盲了。我确信这是第二次测试失败，而不是第一次。谢谢！