2017-12-27 26 views
0

次のエラーが発生しました。次のテストケースを実行しようとしていますが、URLを検証する必要があります。必要であれば、関数validateUrlは接頭辞「http://」をURLに追加する必要があります。Jest TypeError:未定義の 'store'を読み取ることができません

import userDetail from '../src/container/user-detail' 

describe('UrlValidation',() => { 
    it('should be a valid string',() => { 
    var result = new userDetail() 
    result.validateUrl("google.com") 
    exept (result).toBe("http://google.com") 
    }) 
}) 

userDetailは次のようになります:

import React, { Component } from 'react'; 
import { connect } from "react-redux"; 

class UserDetail extends Component { 
    renderUser(userData){ 
    return (
     <tr key={userData.id}> 
     <td> 
      {userData.name} 
     </td> 
     <td> 
      <a target="_blank" href={this.validateUrl(userData.website)}>{userData.website}</a> 
     </td> 
     <td> 
      {userData.address.city} 
     </td> 
     <td> 
      <a> 
       <img alt="edit" src="./media/edit-icon.svg" className="edit-img"></img> 
      </a> 
     </td> 

     </tr> 
    ); 
    } 
    validateUrl(providedUrl){ 
     var url = providedUrl; 
     var r = new RegExp('/^(http|https):\/\/[^ "]+$/'); 
     if (!r.test(url)) { 
      return "http://" + providedUrl 
     } else { 
      return providedUrl 
     } 
    } 
    render() { 
     const {users} = this.props 
     console.log(users.map(user => this.renderUser(user))); 
     return (
      <table className="table table-hover"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Website</th> 
         <th>City</th> 
         <th>Edit</th> 
        </tr> 
       </thead> 
       <tbody> 
        {users.map(user => this.renderUser(user))} 
       </tbody> 
      </table> 
    )} 
    } 

    function mapStateToProps({ users }){ 
    return { users }; // { user } == { user: user } 
    } 

    export default connect(mapStateToProps)(UserDetail); 

私が持っていないの手掛かり、定義の中で私のミスだ私が使用するAPIはありません。この接頭辞を持っているので、私はこれを行います。

私の最初の考えでは、関数validateUrlはアクセス可能ではありませんが、そうでなければなりません。

出力は次のようになります。

[email protected] ~/dev/User-Manager/UserManagement $ npm test

[email protected] test /home/joshii/dev/User-Manager/UserManagement jest

FAIL tests/app.test.jsx UrlValidation ✕ should be a valid string (3ms)

● UrlValidation › should be a valid string

TypeError: Cannot read property 'store' of undefined 

    3 | describe('UrlValidation',() => { 
    4 |  it('should be a valid string',() => { 
    >5 |  var result = new userDetail() 
    6 |  result.validateUrl("google.com") 
    7 |  exept (result).toBe("http://google.com") 
    8 |  }) 
    9 | }) 

    at new Connect (node_modules/react-redux/lib/components/connect.js:102:29) 
    at Object.<anonymous> (__tests__/app.test.jsx:5:18) 

Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 0 total Time: 0.744s, estimated 1s Ran all test suites. npm ERR! Test failed. See above for more details.

+0

あなたは冗談を渡すことを試みましたか? –

+0

@JohnKennedyいいえ、私はこのクラスを使用して、それに文字列を与えます。それはredux店から何も使用していない、または私は間違っていますか? –

+0

あなたのルートコンポーネントは 'store'を小道具とする' Provider'コンポーネントでラップされています。 –

答えて

0

あなたはvalidateUrl機能は、より多くのライブラリ機能ではなく、クラスのメンバーのように見えます(あなたはそれをどこでそれをthisを使用していない)ので、私はあなたがそれを動かすことをお勧めしたいです別のlibファイル(そしておそらくあなたのコードのどこかでそれを再利用する)。 )

しかし、Reduxの部分を使わずにvalidateUrl関数をテストしたい場合は、クラスを別にエクスポートしてください(例えば、export class UserDetail extends Component {....}のようなクラス定義にエクスポートを追加してください)。

import {UserDetail} from ''../src/container/user-detail' 

describe('UrlValidation',() => { 
    it('should be a valid string',() => { 
    var result = new UserDetail() 
    result.validateUrl("google.com") 
    expect(result).toBe("http://google.com") 
    }) 
}) 
+0

ありがとう、私はこれを試してみましょうし、後で私のステータスを更新します。 :) –

+0

''は 'user.map'であるため、クラスをエクスポートすることはできません。私はconnectメソッドを使用しないと使用できません。 –

+0

クラスをエクスポートするだけで済みます。あなたが言及した 'user.map'を含む' 'は、テストによって呼び出されない' render() '関数にあります。 あなたは小道具に依存する関数をレンダリングしたりテストしたりするだけで小道具を気にする必要があります(また 'new UserDetail({users:mockedUsersArray}) 'でインスタンス化して小道具をモックすることもできます) –

関連する問題