Reactjs 使用jest和react测试库测试连接的组件

我想测试连接的组件。我正在使用Jest、React测试库和redux模拟存储。当我试图获取某些元素时，会出现一个错误：

TestingLibraryElement错误：找不到文本为Test的元素。这可能是因为文本被多个元素分割。在这种情况下，您可以为文本匹配器提供一个功能，使匹配器更加灵活

package.json

"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.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));

import React from "react";
import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import Header from "../../components/header/Header";
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const store = mockStore({
    sidebar: { toggle: false },
    settingsUi: { title: "Test" },
});

describe("<Header/>", () => {
    it("test title", () => {
        const { getByText } = render(
            <Provider store={store}>
                <Header />
            </Provider>,
        );
        expect(getByText("Test")).toBeInTheDocument();
    });
});

import React，{FunctionComponent，useffect}来自“React”；
从“@material ui/core”导入{Box，Grid，Link}”；
从“../../redux/reducers/IndexReducer”导入{AppState}”；
从“../../redux/actions/actions”导入{AppDispatch}”；
从“react redux”导入{connect}；
从“../../redux/actions/SidebarActions”导入{getSettingsUi}”；
从“../../redux/reducers/SidebarMenuReducer”导入{SettingsUi}”；
界面道具{
settingsUi：settingsUi；
}
导出接口事件{
initUiSettings（）：void；
}
const Header:FunctionComponent=props=>{
const{settingsUi}=作为道具的道具；
const{initUiSettings}=作为事件的道具；
useffect（（）=>{
初始化设置（）；
}, []);
返回(
{settingsUi&&settingsUi.title}
{settingsUi&&settingsUi.subtitle}
);
};
常量mapStateToProps=（状态：AppState）：Props=>({
settingsUi:状态。侧边栏。settingsUi！，
});
const mapDispatchToProps=（调度：AppDispatch）：事件=>({
初始化设置：（）=>调度（getSettingsUi（）），
});
导出默认的React.memo（connect（mapStateToProps，mapsDispatchToprops）（Header））；

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));

import React from "react";
import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import Header from "../../components/header/Header";
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const store = mockStore({
    sidebar: { toggle: false },
    settingsUi: { title: "Test" },
});

describe("<Header/>", () => {
    it("test title", () => {
        const { getByText } = render(
            <Provider store={store}>
                <Header />
            </Provider>,
        );
        expect(getByText("Test")).toBeInTheDocument();
    });
});

从“React”导入React；
从“@testing library/react”导入{render}”；
从“react redux”导入{Provider}；
从“../../components/Header/Header”导入标题；
从“redux模拟存储”导入configureMockStore；
从“redux thunk”导入thunk；
const middleware=[thunk]；
const mockStore=configureMockStore（中间件）；
常量存储=模拟存储({
边栏：{toggle:false}，
settingsUi:{title:“Test”}，
});
描述（“，（）=>{
它（“测试标题”，（）=>{
常量{getByText}=render(
,
);
expect（getByText（“Test”））.toBeInTheDocument（）；
});
});

在

MapStateTops

函数中，

设置sui

是

侧栏的属性

const-mapStateToProps=（状态：AppState）：Props=>({
settingsUi:状态。侧边栏。settingsUi！，
});

mapStateToProps
使用了错误的选择器，或者您的模拟存储错误

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

或

在
MapStateTops
函数中，
settingsUi
是
侧栏的属性

const-mapStateToProps=（状态：AppState）：Props=>({
settingsUi:状态。侧边栏。settingsUi！，
});

mapStateToProps
使用了错误的选择器，或者您的模拟存储错误

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

或

您正在从
state.sidebar.settingsUi
检索标题，但是您的mockStore正在为
sidebar
和
settingsUi
使用单独的属性。您正在从
state.sidebar.settingsUi
检索标题，但是您的mockStore正在为
sidebar
和
settingsUi
使用单独的属性。