如何解决用玩笑和反应测试库测试连接的组件
我想测试连接的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" } }
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。