用玩笑和反应测试库测试连接的组件

问题描述

我想测试连接的React组件。我正在使用Jest，React测试库和redux-mock-store。当我尝试获取一些元素时，出现错误：

TestingLibraryElementError：无法找到带有文本的元素：Test。这可能是因为文本被多个元素分解了。在这种情况下，您可以为文本匹配器提供一个功能，以使匹配器更加灵活。

package.json

static init() {
StripePayment.setoptions(StripeOptions(
    publishableKey:
        "my key",merchantId: "Test",androidPayMode: 'test'));

Header.tsx

"redux-mock-store": "^1.5.4","typescript": "^3.9.7","@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.0.4","@types/jest": "^26.0.13","@types/redux-mock-store": "^1.0.2","jest": "^26.4.2","ts-jest": "^26.3.0","react-redux": "5.0.7","react-router-dom": "^5.1.2","redux": "3.7.2",

Header.test.tsx

import React,{ FunctionComponent,useEffect } from "react";
import { Box,Grid,Link } from "@material-ui/core";
import { AppState } from "../../redux/reducers/IndexReducer";
import { Appdispatch } from "../../redux/actions/Actions";
import { connect } from "react-redux";
import { getSettingsUi } from "../../redux/actions/Sidebaractions";
import { SettingsUi } from "../../redux/reducers/SidebarMenuReducer";

interface Props {
    settingsUi: SettingsUi;
}

export interface Events {
    initUiSettings(): void;
}

const Header: FunctionComponent<Props & Events> = props => {
    const { settingsUi } = props as Props;
    const { initUiSettings } = props as Events;

    useEffect(() => {
        initUiSettings();
    },[]);

    return (
        <Grid item className="header">
            <Grid container alignItems="center" justify="space-between">
                <Grid item>
                    <Link href="#">
                        <Box fontWeight={700} fontSize={18}>
                            {settingsUi && settingsUi.title}
                        </Box>
                    </Link>
                    <Box>{settingsUi && settingsUi.subtitle}</Box>
                </Grid>
            </Grid>
        </Grid>
    );
};

const mapStatetoProps = (state: AppState): Props => ({
    settingsUi: state.sidebar.settingsUi!,});

const mapdispatchToProps = (dispatch: Appdispatch): Events => ({
    initUiSettings: () => dispatch(getSettingsUi()),});

export default React.memo(connect(mapStatetoProps,mapdispatchToProps)(Header));

解决方法

在您的mapStateToProps函数中，settingsUi是sidebar属性的一个属性。

const mapStateToProps = (state: AppState): Props => ({
    settingsUi: state.sidebar.settingsUi!,});

mapStateToProps使用的选择器错误或模拟存储错误。

const mapStateToProps = (state: AppState): Props => ({
    settingsUi: state.settingsUi!,});

或

const store = mockStore({
    sidebar: { toggle: false,settingsUi: { title: "Test" } }
});