Question

我正在进行快照测试，并且由于随机生成的时间和ID不同而导致错误失败。那么，我如何忽略测试中的那些部分或模拟它们以下是测试给出的一些错误：

<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()

但是linter给出了错误，它看起来也不正确。那么，我哪里错了？

Answer 1

这就是分离问题的方法。

如果使UI组件仅接收道具中的计算结果，并使用父组件进行计算，则可以对UI组件（将停止更改）执行快照测试，并单独测试这些功能。 / p>

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

1 个答案: