reactjs - Jest - 测试与多个 HOC 反应。Typescript 中的材料 IU、react-router、mobX
问题描述
我正在尝试为我拥有的项目编写单元测试。为了简化问题,我创建了一个显示问题的小型示例项目。你可以在这里从 github 上下载它:Github Sample
在浅渲染时,我得到的错误是:
TypeError:无法读取未定义的属性“displayName”
at createStoreInjector (node_modules/mobx-react/index.js:585:46)
at node_modules/mobx-react/index.js:698:16
at Object.<anonymous> (src/Home/Home.tsx:21:76)
at Object.<anonymous> (src/Home/Home.test.tsx:17:189)
我遇到的问题是我需要对具有多个 HOC 的组件进行单元测试。Material UI 中的样式有一种,react-router 有一种,mobX 注入和观察者有两种。您可以在文件 Home.test.tsx 中的 /src/Home 中看到失败的测试。
我不知道如何让一个笑话测试通过这个组件。我也有添加到主页组件的问题。它还具有相同的多个 HOC,因此也会失败。
必须有一种方法来测试这些类型的组件,但我似乎无法让它工作。任何帮助都是极好的!
对于那些不想拉项目的人,这里是被测组件和测试本身的摘要。
主页.tsx
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
import classNames from 'classnames';
import { inject, observer } from 'mobx-react';
import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import logo from '../logo.svg';
import { HomeStore } from '../Stores/HomeStore';
import { styles } from './Home.Styles';
interface IProps extends RouteComponentProps<{}> {
homeStore?: HomeStore;
}
export default withStyles(styles)(
inject('homeStore')(
withRouter(
observer(
class Home extends React.Component<
IProps & RouteComponentProps<{}> & WithStyles<typeof styles>,
{}
> {
public render() {
const { classes } = this.props;
return (
<div className={classes.app}>
<header className={classes.appHeader}>
<img src={logo} className={classNames(classes.appLogo, classes.spin)} alt='logo' />
<h1 className={classes.appTitle}>Welcome to React</h1>
</header>
<p className={classes.appIntro}>
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
</div>
);
}
}))));
主页.test.tsx
import { shallow, ShallowWrapper } from 'enzyme';
import * as React from 'react';
import { MemoryRouter } from 'react-router';
import { HomeStore } from '../Stores/HomeStore';
import Home from './Home';
jest.mock('react-router-dom');
jest.mock('./Home.styles');
const homeStore = {} as HomeStore;
const props = {
homeStore: homeStore,
history: {},
location: {},
match: {},
staticContext: {}
};
describe('Order Tests', () => {
let homeWrapper: ShallowWrapper;
beforeEach(() => {
homeWrapper = shallow(<MemoryRouter><Home {...props} /></MemoryRouter>).first().shallow().first().shallow();
console.log(homeWrapper.debug());
});
it('passes a test', () => {
expect(true).toBe(true);
});
});
解决方案
推荐阅读
- reactjs - 如何在页面渲染器/Formik之后保留输入的先前值
- python - 检索一个类模型数据并在另一个类模型 Django 中使用
- python - 具有相同结构的字典列表到单个键下的单个字典中
- javascript - 在javascript中一段时间后尝试将布尔值从false更改为true
- batch-file - 将不在文本文件中的文件复制到子文件夹
- sorting - Java 6 和 Java 8 中排序代码的不同输出
- javascript - 角度按键事件的第一个值未定义
- sql - 根据条件使用 Null 进行排名
- runtime-error - 只能在我的 CPU 上运行 ArrayFire,不能在集成 GPU 上运行
- graph-theory - 我们如何遍历连通有向图的所有节点(因为某些根可能无法访问)?