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

Question

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

以 material-ui 文档中的代码为例（呈现具有多个值的 select 字段）：

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 属性应该是必需的。否则它是用随机值生成的。

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

Testing material-ui component with jest and snapshots

jestjs

material-ui