2017-12-27 40 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를 사용하지 않는 것이 IT) 그래서 당신이로 이동 좋을 것 같습니다 별도의 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

''은'connect.method'를 사용하지 않으면 사용할 수없는'user.map'이므로 클래스를 내보내기 만 가능하지 않습니다. –

+0

클래스를 내보낼 수 있습니다. 당신이 언급 한'user.map'을 포함하고있는''은 테스트에서 호출하지 않는'render()'함수에 있습니다. 소품에 의존하는 함수를 렌더링하거나 테스트하는 경우에만 소품을주의해야합니다 (물론'new UserDetail ({users : mockedUsersArray}) '로 인스턴스화하여 소품을 조롱 할 수도 있습니다) –