javascript - Jest|Enzyme 如何期望输入中默认值上的任何字符串

Question

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

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

测试:

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

来源:

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

Answer 1

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

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. 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...')
});

当尝试拍摄大型组件的快照时，内部组件是无赖的，您可以考虑模拟子组件(假设它们是导入的而不是内联定义的)。如果它是一个带有大量标记的大渲染，您应该考虑将其解构为更小的组件，以使其更易于测试，还有许多其他原因。

嵌套组件

给定一个你想要快照的组件，它有不可预知的 child ......

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

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

将 child 移动到它自己的组件中。

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