Question

这是我的应用程序的入口点（我初始化并通过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();

这是我将商店传递给组件的App组件：

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>}

从我在这里看到的，我的测试发现的唯一道具是儿童，但不是商店。我怎样才能测试破坏的道具？

Answer 1

您没有在测试中为您的App组件提供商店，就像您在代码中一样。如果您执行以下操作，它应该可以工作：

const wrapper = mount(<App stores={{ uiStore }}/>);

Jest酶mobx，测试商店被传递给提供者

1 个答案: