Jest 酶 mobx，测试存储是否传递给提供者

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

从我在这里看到的情况来看，我的测试找到的唯一道具是 children，而不是商店。我如何测试被破坏的道具？

Answer 1

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

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

Jest 酶 mobx，测试存储是否传递给提供者

Jest enzyme mobx, testing that stores are passed to a provider

reactjs

jestjs

enzyme

mobx

mobx-react