Question

我正在尝试为使用Redux和Hooks的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>
  );
};

这是reducer的默认状态：

{
  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())} }>

我已经在运行并覆盖适当代码的相似组件上进行了几乎相同的测试。我似乎无法弄清为什么不认识道具。

非常感谢您的协助。

开玩笑/酶无法识别道具

0 个答案: