jestとスナップショットを使用したマテリアルUIコンポーネントのテスト

Question

jestとmaterial-uiを使用してスナップショットテストを実行することができません。材料-UIドキュメントからのサンプルコードのために取って

（複数の値を持つ選択フィールドをレンダリング）：私はテストを実行

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

しかし、初めて（：これは私のテスト

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

ですスナップショットはありません）、次回は表示されません（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属性が必要です。それ以外の場合は、ランダムな値で生成されます。