时间戳

首页 > 解决方案 > 如何在快照测试中模拟动态值？

reactjs - 如何在快照测试中模拟动态值？

问题描述

我必须对测试进行快照：

  1. 我使用自定义路由器（登录用户的保护）从路由器页面创建快照，每次运行此测试时，我都会生成不同的密钥。

  2. 我在日期选择器中有新的 Date()，我该如何模拟它？重新分配 global.Date 对我不起作用

    3. 1. 
const ProtectedRoute = ({ isAllowed, ...props }) => (isAllowed
  ? <Route {...props} />
  : <Redirect to="/login" />);

const LoginProtectedRoute = ({ isAllowed, ...props }) => (isAllowed
  ? <Route {...props} />
  : <Redirect to="/" />);

const WebClient = (props: any) => {
  const { userTokenController } = props;
  return (
    <Router>
      <div>
        <Switch>
          <ProtectedRoute
            exact
            path="/"
            component={HomePage}
            isAllowed={UserTokenRepo().getUserAuth(userTokenController)}
          />
          {/* <Route path="/login" component={Login} /> */}
          <LoginProtectedRoute
            path="/login"
            component={Login}
            isAllowed={!UserTokenRepo().getUserAuth(userTokenController)}
          />
          <ProtectedRoute
            path="/ResourceManagement"
            component={ResourceManagement}
            isAllowed={UserTokenRepo().getUserAuth(userTokenController)}
          />
        </Switch>
      </div>
    </Router>
  );
};


                        "goForward": [Function],
                        "length": 1,
                        "listen": [Function],
                        "location": Object {
                          "hash": "",
    -                     "key": "gsde51",
    +                     "key": "q67i5b",
                          "pathname": "/login",
                          "search": "",
                          "state": undefined,
                        },


  1.                 <Calendar readOnlyInput view="month" dateFormat="mm/yy" value={startDate} onChange={this.handleChange} yearNavigator yearRange="2010:2030" />


    -                   value={2019-09-12T11:16:56.134Z}
    +                   value={2019-09-12T13:31:32.598Z}

标签： reactjsunit-testingjestjssnapshot

解决方案

将实际值与实际快照测试分离。

从这篇中等文章中无耻地拉出来..

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import renderer from 'react-test-renderer';
import moment from 'moment-timezone';


it('renders without crashing', () => {
  moment.tz.setDefault('EST');
  let props = {
    currentDay: moment("2017-09-15 09:30:00").format("MMM Do YYYY h:mm:ss a")
  };

  const tree = renderer.create(<App {...props} />).toJSON();
  expect(tree).toMatchSnapshot();
});

推荐阅读