如何测试道具初始值？

Question

I have a header component which listens for loggedInUser data from Redux store. I want to unit test for redux prop values. Like i have mocked a redux store for initial values and want to test for those values in props of the connected component.

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faShoppingCart } from '@fortawesome/free-solid-svg-icons';
import { NavLink, useHistory } from 'react-router-dom';

import Cart from './../Cart/Cart.component';
import { signOutStart } from './../../redux/user/user.actions';

import './Header.styles.scss';

export const Header = ({ noOfItemsInCart, loggedInUser, signOut }) => {
    const [isUserDropDownVisible, setUserDropDownVisibility] = useState(false);
    const [isCartDropDownVisible, setCartDropDownVisibility] = useState(false);
    const history = useHistory();
    console.log(loggedInUser);
    return (
        <header className = 'header' id = 'header'>
            <NavLink to = '/'><p className = 'title'>Kart</p></NavLink>
            {loggedInUser ? (
                <div className = 'header__options' id = 'header__options'>
                    <div className = 'cart__options'>
                        <FontAwesomeIcon 
                            icon={faShoppingCart} 
                            onClick = {() => {
                                setUserDropDownVisibility(false);
                                setCartDropDownVisibility(prevState => {return !prevState})}
                            } />
                        <span><sup>{noOfItemsInCart}</sup></span>
                        {isCartDropDownVisible ? (
                            <div className="dropdown">
                                <Cart />
                            </div> 
                        ) : null} 
                    </div>
                    <div className = 'user__options'>
                        <FontAwesomeIcon 
                            icon={faUser} 
                            onClick = {() => {
                                setCartDropDownVisibility(false);
                                setUserDropDownVisibility(prevState => {return !prevState})}
                            } />
                        {isUserDropDownVisible ? (
                            <div className="dropdown" onClick = {() => setUserDropDownVisibility(false)}>
                                <NavLink to = '/orders'>My Orders</NavLink>
                                <span onClick = { async () => { 
                                    await signOut(); 
                                    history.push('/auth');
                                } }>Logout</span>
                            </div> 
                        ) : null} 
                    </div>
                </div>
            ) : null}
        </header>
    )
}

const mapStateToProps = state => {
    return {
        loggedInUser: state.user.loggedInUser,
        noOfItemsInCart: state.cart.noOfItemsInCart
    }
}

const mapDispatchToProps = dispatch => {
    return {
        signOut: () => dispatch(signOutStart())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

I had implemented an unit test as follows, by using a shallow render of component and tried accessing the props using .props()

import React from 'react';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';

import Header from './Header.component';

const mockStore = configureMockStore();

describe('<Header />', () => {
    let wrapper, store;

beforeEach(() => {
    const initialState = {
        user: {
            loggedInUser: 'user1',
            error: null
        },
        cart: {
            noOfCartItemsInCart: 0
        }
    }
    store = mockStore(initialState);

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

it('should have valid props', () => {
    expect(wrapper.props().loggedInUser).toBe('user1');
})
})

I am getting prop values a undefined or null values. How to test for prop values to an redux connected component?

Answer 1

你有没有从文档中尝试过这个？

wrapper.instance().props