Javascript Jest |如何在输入中的defaultValue上使用任何字符串

我对整个测试都是新手，一直在阅读airbnb/jest文档，试图找出如何让这个测试工作起来，但目前还没有想到会成功运行

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

测试：

资料来源：

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

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

当您希望确保UI不会意外更改时，快照测试是一个非常有用的工具。

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

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 UnpredictableChild = () => (
  <div>
    <input defaultValue={getFunName()} />
  </div>
)

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

it（'should super sweet'，（）=>{
//渲染组件
常量包装器=浅（）
//找到你想检查的部分
const input=wrapper.find（'input'）.first（）
//检查它是否符合您的要求
expect（input.prop（'type'））.toBe（'text'））
expect（input.prop（'placeholder'））.toBe（'enteryourname…'））
});

当尝试快照一个大型组件时，如果内部组件被冒充，您可以查看模拟子组件（假设它们是导入的，而不是内联定义的）。如果它是一个带有大量标记的大型呈现，那么您应该考虑将其解构为更小型的组件，以使其更易于测试

嵌套组件 如果要快照的组件具有不可预测的子级

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

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

const getFunName=（）=>`${Math.random（）}name`
常量应用=（）=>(
这个部件使我的袜子摇晃。
)

将子对象移动到其自己的组件中

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 UnpredictableChild = () => (
  <div>
    <input defaultValue={getFunName()} />
  </div>
)

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

const UnpredictableChild=（）=>(
)
常量应用=（）=>(
这个部件使我的袜子摇晃。
)

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

import UnpredictableChild from './UnpredictableChild'

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

从“./UnpredictableChild”导入UnpredictableChild
常量应用=（）=>(
这个部件使我的袜子摇晃。
)

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