material-ui - 使用 Jest 和快照测试 material-ui 组件

Question

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

以 material-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 属性应该是必需的。否则，它会生成一个随机值。