使用开玩笑和快照测试材料 UI 组件

Question

我无法使用jest和material-ui运行快照测试。

以材料 ui 文档中的代码为例(呈现具有多个值的选择字段(：

import React, { Component } from 'react'
import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'
const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
  'Ralph Hubbard',
  'Omar Alexander',
  'Carlos Abbott',
  'Miriam Wagner',
  'Bradley Wilkerson',
  'Virginia Andrews',
  'Kelly Snyder'
]
/**
 * `SelectField` can handle multiple selections. It is enabled with the `multiple` property.
 */
export default class SelectFieldExampleMultiSelect extends Component {
  state = {
    values: []
  };
  handleChange = (event, index, values) => this.setState({ values })
  menuItems(values) {
    return names.map((name) => (
      <MenuItem
        key={name}
        insetChildren={true}
        checked={values && values.includes(name)}
        value={name}
        primaryText={name}
      />
    ))
  }
  render() {
    const { values } = this.state
    return (
      <SelectField
        multiple={true}
        hintText='Select a name'
        value={values}
        onChange={this.handleChange}
      >
        {this.menuItems(values)}
      </SelectField>
    )
  }
}

这是我的测试：

import React from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import { setFilterItems } from 'containers/MaterialsView/actions'
import renderer from 'react-test-renderer'
import Component from '../SelectFieldExampleMultiSelect'

describe('<FilterSelect />', () => {
  it('renders correctly', () => {
    const props = {
      items: [{ value: 1, primaryText: 'test' }],
      floatingLabelText: 'Label text',
      values: [],
      filterType: 'License'
    }
    const tree = renderer.create(
      <MuiThemeProvider>
        <Component />
      </MuiThemeProvider>).toJSON()
    expect(tree).toMatchSnapshot()
  })
})

但是，我第一次运行测试(没有快照(时，它运行正常，但下次就不行了(它只是一个id属性，对于其他一些组件，htmlFor 属性(：

➜  node_modules/.bin/jest app/components/Filters/tests/SelectFieldExampleMultiSelect.test.js -u
 PASS  app/components/Filters/tests/SelectFieldExampleMultiSelect.test.js
  <FilterSelect />
    ✓ renders correctly (54ms)
Snapshot Summary
 › 1 snapshot updated in 1 test suite.
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 updated, 1 total
Time:        1.727s
Ran all test suites matching "app/components/Filters/tests/SelectFieldExampleMultiSelect.test.js".

➜  node_modules/.bin/jest app/components/Filters/tests/SelectFieldExampleMultiSelect.test.js   
 FAIL  app/components/Filters/tests/SelectFieldExampleMultiSelect.test.js
  ● <FilterSelect /> › renders correctly
    expect(value).toMatchSnapshot()
    Received value does not match stored snapshot 1.
    - Snapshot
    + Received
    @@ -28,11 +28,11 @@
         }>
         Select a name
       </div>
       <div
         className={undefined}
    -    id="undefined-Selectaname-undefined-45429"
    +    id="undefined-Selectaname-undefined-64546"
         onBlur={[Function]}
         onChange={[Function]}
         onFocus={[Function]}
         style={
           Object {
      at Object.<anonymous> (app/components/Filters/tests/SelectFieldExampleMultiSelect.test.js:20:18)
      at process._tickCallback (node.js:377:9)
  <FilterSelect />
    ✕ renders correctly (57ms)
Snapshot Summary
 › 1 snapshot test failed in 1 test suite. Inspect your code changes or re-run with `-u` to update them.
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   1 failed, 1 total
Time:        1.693s
Ran all test suites matching "app/components/Filters/tests/SelectFieldExampleMultiSelect.test.js".

Answer 1

现在(见：https://github.com/callemall/material-ui/issues/6834(ID 属性应该是必需的。否则，它将使用随机值生成。