路由器快照不起作用

Question

这个和这个不一样enzyme-to-snapshot-render-object-as-json因为

这里我想生成快照具有对象JSON定义
另一个我只想为组件生成的 HTML 生成快照 。

---

快照测试总是失败，因为 history 中的 key 属性 每次都会更改。

// 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) 从组件本身而不是路由器制作快照。