2017-10-11 64 views
1

我試圖將jest快照測試引入到我的應用程序中。警告:失敗的道具類型:道具打開在Snackbar中被標記爲需要,但其值不確定

LoginForm的部件

render() { 
    return (
    ... 
    <DynamicSnack 
     dialogOpen={this.props.dialogOpen} 
     snackOpen={this.props.snackOpen} 
     snackTimer={this.props.snackTimer} 
     snackMessage={this.props.snackMessage} 
    /> 
    ) 
} 

DynamicSnack部件

import Snackbar from 'material-ui/Snackbar'; 

render() { 
    let { snackOpen, snackTimer, snackMessage } = this.props 

    return (
     <Snackbar 
      open={snackOpen} 
      message={snackMessage} 
      autoHideDuration={snackTimer} 
      onRequestClose={this.closeSnack} 
     /> 
    ) 
} 

LoginForm.spec.js

import React from 'react' 
import renderer from 'react-test-renderer' 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 

import LoginForm from '../../app/components/loginComponents/loginForm' 

describe('LoginForm',() => { 
    it('should render snapshot',() => { 
     const component = renderer.create(
      <MuiThemeProvider> 
       <LoginForm /> 
      </MuiThemeProvider> 
     ) 
     const tree = component.toJSON() 
     expect(tree).toMatchSnapshot() 
    }) 
}) 

警告

enter image description here

警告:無法丙類型:該道具messageSnackbar需要被標記,但其值是undefined
警告:道具類型失敗:道具open被標記爲Snackbar中的要求,但其值爲undefined

我試過直接導入DynamicSnack組件甚至是Snackbar,並手動添加屬性open={false} message={'w00f'},但沒有任何變化。

我是新來的單元測試,並試圖從學習開始jest

我該如何擺脫這些警告?

回答

2

的解決方案很簡單,測試LoginForm當你不及格的Snackbar需要的道具。通過他們作爲

const component = renderer.create(
     <MuiThemeProvider> 
      <LoginForm snackOpen={true} 
    snackMessage={'Wrong info'}/> 
     </MuiThemeProvider> 
    ) 
+0

我發誓我至少嘗試過一次之前,但也許別的是不同的。現在它的工作原理:-)謝謝! –

+0

也許你增加了'open'和'message'而不是'snackOpen'和'snackMessage' –

+0

我確信我嘗試了這兩個,但是當時它可能沒有包含在'MuiThemeProvider'中。將來,我會嘗試以一種不那麼混亂的方式使用絕望的嘗試:-D –

相關問題