在react js中为容器编写单元测试用例

Question

我正在为使用连接功能的react容器编写单元测试用例。

import React, { Component } from 'react';
import '../css/header.css';
import SignInInstruction from '../components/SingInInstruction';
import { connect } from 'react-redux';
import { fetchUserJd } from '../actions/index';
import NavBar from '../components/NavBar';
import { logoutUser } from '../../login/actions/index';
import { withRouter } from 'react-router-dom';
import { matchPath } from "react-router";
import { jdNameChange } from '../actions/index';
import history from '../../../history';


class Header extends Component {
    constructor(props) {
        super(props);
        let job = '';
        const match = matchPath(props.history.location.pathname, {
            path: "/quiz-setup/:jobs",
            exact: true,
            strict: false
        });
        if (match && match.params.jobs) {
            job = match.params.jobs;
        }
        this.state = {
            job: job
        }
        this.imageClick = this.imageClick.bind(this);
    }


    componentDidMount() {
        if (this.state.job) {
            this.props.jdNameChange('', this.state.job);
        }
    }

    handleLogout = () => {
        this.props.logoutUser();
    }
    imageClick() {
        history.push('/');
    }


    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.jobs.length <= 0) {
            if (localStorage.getItem("access_token")) {
                nextProps.fetchUserJd();
            }
        }
    }

    render() {
        return (
            <div >
                <NavBar handleLogout={this.handleLogout}
                    imageClick={this.imageClick}
                    hasuserLogin={localStorage.getItem("access_token") !== null ? true : false}
                />
                <SignInInstruction
                    hasuserLogin={localStorage.getItem("access_token") !== null ? true : false}
                    disablejob={this.props.disablejob}
                    jobs={this.props.jobs}
                    selectedJd={this.props.selectedJd}
                    jdId={this.props.jdId} />
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        hasuserLogin: state.LoginReducer.hasUserLogIn,
        jobs: state.UserJobs.response,
        selectedJd: state.UserJobs.selectedJdName,
        jdId: state.UserJobs.jdId,
        disablejob : state.UserJobs.disablejob
    }
}

export default connect(mapStateToProps, { logoutUser, fetchUserJd, jdNameChange })(Header);

我有这个容器，现在我想为此组件编写单元测试用例。

import Header from './Header';
import configureStore from 'redux-mock-store';
const mockStore = configureStore();
import React from 'react';
import { Provider } from 'react-redux';
import NavBar from '../components/NavBar';
import SignInInstruction from '../components/SingInInstruction';



const storeFake = state => {
  return {
    default: jest.fn(),
    subscribe: jest.fn(),
    dispatch: jest.fn(),
    getState: () => state,
  };
};

describe('container <App />', () => {
  let wrapper;
  let component;
  let container;

  beforeEach(() => {
    jest.resetAllMocks();

    const store = storeFake({});

    wrapper = mount(
      <Provider store={store}>
        <Header />
      </Provider>
    );

    container = wrapper.find(Header);
    component = container.find(NavBar);
  });

  it('should render both the container and the component ', () => {
    expect(container.length).toBeTruthy();
    expect(component.length).toBeTruthy();
  });

  it('should map state to props', () => {
    const expectedPropKeys = [
      'hasuserLogin',
      'jobs',
      'selectedJd',
      'jdId',
      'disablejob'
    ];

    expect(Object.keys(component.props())).toEqual(expect.arrayContaining(expectedPropKeys));
  });
});

所以，但是这里却给了错误，例如无法读取未定义的属性。因此，我不明白如何编写此测试用例？