路由器快照不起作用

Question

这与“enzyme-to-snapshot-render-object-as-json”不同，因为

在这里，我想使用对象的JSON 定义
生成快照 ，另一个我想仅为组件生成的 HTML 生成快照。

---

快照测试总是失败，因为属性每次都key在变化。history

// ComponentContainer.jsx
class ComponentContainer extends Component {
  render() { ... }
}
export { ComponentContainer };    
export default withRouter(ComponentContainer);

还有测试..

// ComponentContainer.test.jsx
import { ComponentContainer } from './ComponentContainer';

const minProps = {
  history: {
    push: jest.fn(),
  },
};

const wrapped = mount(
  <Router history={minProps.history}>
    <ComponentContainer.wrappedComponent {...mergedProps} {...mergedStores} />
  </Router>,
);

expect(toJson(wrapper)).toMatchSnapshot();

生成此快照..

// ComponentContainer.test.jsx.snap
<MemoryRouter
    history={
      Object {
        "push": [Function],
      }
    }
  >
    <Router
      history={
        Object {
          "action": "POP",
          "block": [Function],
          "canGo": [Function],
          "createHref": [Function],
          "entries": Array [
            Object {
              "hash": "",
              "key": "mmldr1", // THIS IS GENERATED ON EACH TEST
              "pathname": "/",
              "search": "",
              "state": undefined,
            },
          ],

尝试

我尝试使用记忆历史......

// ComponentContainer.test.jsx
import createHistory from 'history/createMemoryHistory';

const history = createHistory({
  initialEntries: [`/myapp/123`],
});

<Router history={history}>
  <ComponentContainer.wrappedComponent />
</Router>

但我最终遇到了同样的问题。

Answer 1

您需要使用enzyme.find(ComponentContainer)组件本身而不是路由器来制作快照。