如何模拟移动部件 - 快照测试 - 反应

Question

>我正在做快照测试，由于随机生成的时间和 id 不同，我得到了 false 失败。那么，我如何在测试中忽略这些部分或模拟它们以下是测试给出的一些错误：

<span>
    -           Today at 10:21 AM
    +           Today at 12:34 PM
              </span>

和

<input
                disabled={false}
    -           id="undefined-Search-undefined-24783"
    +           id="undefined-Search-undefined-63537"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}

这是代码中的部分，输出时间

 <p style={profileStyle}>
              <span>
                {moment().
                  subtract(20, 'm').
                  calendar()}
              </span>

和

<span>{moment('1/12/14').calendar()}</span>

这个输出随机生成的 ID

<TextField
              hintText="Search"
              fullWidth
            />

这是我的测试代码

test('renders correctly', () => {
  const component = renderer.create(<MuiThemeProvider muiTheme={getMuiTheme()}>
    <CheckinHistory/></MuiThemeProvider>);
  const tree = component.toJSON();
  console.log('tree is : ', tree);
  expect(tree).toMatchSnapshot();
});

我试图用这个来嘲笑

  moment().subtract(20, 'm').calendar() = jest.fn()

但是棉绒给出了错误，似乎也不正确。那么，我哪里出错了？

Answer 1

这就是关注点分离派上用场的地方。

如果你让你的 UI 组件只接收 props 中的计算结果，并使用父组件进行计算，则可以对 UI 组件进行快照测试(这将停止更改(，并单独测试函数。