2017-10-07 9 views
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>} 

、私のテストが見つかっのみ小道具が子供ではなく、店舗。どのように破壊された小道具をテストできますか?

+0

あなたがコードにあるように、あなたの 'App'コンポーネントにテストのストアを与えているわけではありません。あなたは 'const wrapper = mount();'試みたことがありますか? – Tholle

+1

@Tholleあなたは正しいです、Appコンポーネントに小道具を渡して私の問題を解決しました。すべて今意味があります:)。それをanswserとして書くと私はそれを受け入れるでしょうか? –

答えて

0

コードにあるように、Appコンポーネントにテスト中のストアを提供していません。

const wrapper = mount(<App stores={{ uiStore }}/>); 
関連する問題