路由器无法正常运行的快照

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)从组件本身创建快照，而不是从路由器创建快照。