我正在尝试使用带有Jest和React-testing-library的Mobx存储来测试我的React组件。
问题是我不知道如何为测试注入商店。
这是我的简化代码。
StaffInfo.js(component)
import React, { useState } from "react";
import { observer, inject } from "mobx-react";
const StaffInfo = props => {
const store = props.instituteStore;
const [staffs, setStaffs] = useState(store.staffs);
return (
<div>
....
</div>
);
}
export default inject(rootStore => ({
instituteStore : rootStore.instituteStore
}))(observer(StaffInfo));
index.js(根存储)
import LoginStore from "./LoginStore";
import InstituteStore from "./InstituteStore";
class RootStore {
constructor(){
this.loginStore = new LoginStore (this);
this.instituteStore = new InstituteStore(this);
}
}
export default RootStore;
InstituteStore.js(目标商店)
import { observable, action } from "mobx";
class InstituteStore {
constructor(root){
this.root = root;
}
@observable
staffs = [];
}
export default InstituteStore;
StaffInfo.test.js(测试文件)
import React from "react";
import ReactDom from "react-dom";
import { MemoryRouter } from "react-router-dom";
import { Provider } from "mobx-react";
import StaffInfo from "./StaffInfo";
import InstituteStore from "../stores/InstituteStore";
describe("Staff Component testing", () => {
test("should be rendered without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(
<MemoryRouter initialEntries={["/staff"]}>
<StaffInfo instituteStore={RootStore.instituteStore} />
</MemoryRouter>,
div
);
ReactDOM.unmountComponentAtNode(div);
});
});
运行此测试文件后,错误消息如下:
TypeError : Cannot read property 'staffs' of undefined
请告诉我代码的哪些部分有误。 提前非常感谢!
答案 0 :(得分:3)
Mobx-react
的{{1}}用于将存储插入深子组件。这些星星由基于上下文的API Inject
提供。
因此,无论您要为子组件提供商店的地方,都使用类似的东西。
Provider
答案 1 :(得分:0)
感谢@ uneet7:
传奇!最后有人给出了一个明智的答案:D 这就是我的组件的样子
@inject('routing', 'navigationStore')
@observer
export default class PageTitle extends React.Component<*> {...}
这就是我的工作方式:
let view = mount(
<Provider {...getStores()}>
<UserPage notificationStore={notificationStore} routing={routing} />
</Provider>
);
因此 UserPage 有许多组件,其中一个具有 PageTitle 组件。显然,PageTitle上面有@inject。没关系,因为提供商HOC将通过inject
函数向组件prop提供商店。