1
これは、(私はmobxストアを初期化し、合格)私のアプリのエントリポイントである:これは私は、App成分通過していている冗談酵素mobxは、店がプロバイダに渡されていることをテストする
import React from "react";
import ReactDOM from "react-dom";
import registerServiceWorker from "./registerServiceWorker";
import App from "./App";
import UiStore from "./stores/UiStore";
const uiStore = new UiStore();
ReactDOM.render(<App stores={{ uiStore }} />, document.getElementById("root"));
registerServiceWorker();
コンポーネントに保存する:
import React, { Component } from "react";
import { observer, Provider } from "mobx-react";
import { BrowserRouter as Router } from "react-router-dom";
import Main from "./components/Main";
import Header from "./components/Header";
@observer
class App extends Component {
render() {
return (
<Provider {...this.props.stores}>
<Router>
<div className="app-container">
<Header />
<Main />
</div>
</Router>
</Provider>
);
}
}
export default App;
ここで、適切にmobxストアをプロバイダに渡していることをテストします。
これは私のテストです:
import React from "react";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { mount } from "enzyme";
import App from "./App";
import Header from "./components/Header";
import Main from "./components/Main";
Enzyme.configure({ adapter: new Adapter() });
describe("App.js",() => {
it("passes stores into the provider",() => {
const wrapper = mount(<App />);
expect(wrapper.find("Provider").props()).toBe("");
});
});
しかし、試験は次の結果で失敗します。私はここに表示されるものと
Expected value to be (using ===):
""
Received:
{"children": <BrowserRouter><div className="app-container"><Header /><Main /></div></BrowserRouter>}
、私のテストが見つかっのみ小道具が子供ではなく、店舗。どのように破壊された小道具をテストできますか?
あなたがコードにあるように、あなたの 'App'コンポーネントにテストのストアを与えているわけではありません。あなたは 'const wrapper = mount( );'試みたことがありますか? –
Tholle
@Tholleあなたは正しいです、Appコンポーネントに小道具を渡して私の問題を解決しました。すべて今意味があります:)。それをanswserとして書くと私はそれを受け入れるでしょうか? –