Jest|Enzyme 如何在输入中的 defaultValue 上期望任何字符串答案

【问题标题】：Jest|Enzyme How to expect any string on a defaultValue in inputJest|Enzyme 如何在输入中的 defaultValue 上期望任何字符串
【发布时间】：2019-04-19 23:29:58
【问题描述】：

我是整个测试的新手，并且一直在阅读 airbnb / jest 文档，试图弄清楚如何使这个测试工作，但目前没有想到可以成功运行。

我的快照中有一个 defaultValue，它等于每次运行测试时随机生成的新字符串。我很好奇如何定位此输入的 defaultValue 并将其设置为期望任何字符串。

测试：

expect(toJson(wrapper)).toMatchSnapshot({'[defaultValue]'.expect.any('string')});

来源：

<input
  ref={this.myInput}
  type="text"
  placeholder=" Enter your name..."
  defaultValue={getFunName()}
/>

【问题讨论】：

快照旨在检查任何东西是否发生了变化。如果该值是随机生成的，并且它改变了渲染的内容，则它永远不会*匹配快照。在这种情况下，您不想使用快照。
谢谢，输入是较大渲染的一小部分。我的目标是让快照测试整个组件，但是这个小智能是一个随机生成的字符串，理想情况下可以忽略。抱歉没有澄清。

标签： javascript reactjs jestjs enzyme

【解决方案1】：

只要您有随机生成的数据更改渲染结果，快照就会失败。快照旨在检查测试之间是否有任何变化。

当您想确保您的 UI 不会发生意外更改时，快照测试是一个非常有用的工具。 https://jestjs.io/docs/en/snapshot-testing

您可以选择性地检查渲染组件的属性，而不是快照。

it('should be super sweet', () => {
  // Render the component
  const wrapper = shallow(<App />)

  // Find a part of it you want to examine
  const input = wrapper.find('input').first()

  // Check that it looks the way you want
  expect(input.prop('type')).toBe('text')
  expect(input.prop('placeholder')).toBe(' Enter your name...')
});

当尝试对大型组件进行快照时，内部组件是无赖的，您可以查看模拟子组件（假设它们是导入的并且没有内联定义）。如果它是一个带有大量标记的大型渲染，您应该考虑将其解构为更小尺寸的组件，以使其更易于测试。

嵌套组件

给定一个您想要快照的组件具有不可预测的子级...

const getFunName = () => `${Math.random()} name`

const App = () => (
  <div>
    <h1>This component rocks my socks.</h1>
    <div>
      <input defaultValue={getFunName()} />
    </div>
  </div>
)

将子元素移动到它自己的组件中。

const UnpredictableChild = () => (
  <div>
    <input defaultValue={getFunName()} />
  </div>
)

const App = () => (
  <div>
    <h1>This component rocks my socks.</h1>
    <UnpredictableChild />
  </div>
)

然后移动到它自己的文件中。

import UnpredictableChild from './UnpredictableChild'

const App = () => (
  <div>
    <h1>This component rocks my socks.</h1>
    <UnpredictableChild />
  </div>
)

【讨论】：