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

【问题标题】：how to mock the moving parts - snapshot test - react如何模拟运动部件 - 快照测试 - 反应
【发布时间】：2017-12-29 07:57:14
【问题描述】：

我正在进行快照测试，但由于随机生成的不同时间和 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 会出错，而且看起来也不正确。那么，我哪里错了？

【问题讨论】：

标签： reactjs unit-testing enzyme

【解决方案1】：

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

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

【讨论】：

嗯，好吧。还有其他想法吗？？
如果你开始模拟所有的移动部件，你会得到一个相当脆弱的测试，而且编写起来也会复杂得多。现在把事情分开会让你的生活更轻松。
好的，那么 TextField 生成的随机 id 呢。它是一个材料 ui 的东西，我无法将它与组件分开。那怎么样？
我会检查一个选项来覆盖 ID，如果这是不可能的，用我自己的组件包装文本字段，并将其作为子项传递。然后，您可以在测试中将其替换为简单的手动模拟。
那么，如何做到这一点？我的意思是嘲弄的部分。我不太明白用自己的组件包装文本字段并将其作为孩子传递的意思。请给个代码示例好吗？