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

Question

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

TestingLibraryElementError:找不到文本为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",

页眉.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));

Header.test.tsx

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

Answer 1

在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" } }
});