Jest TypeError: Cannot read 'store' of undefined

reactjs unit-testing redux jest

574 观看

1回复

436 作者的声誉

I've always got following error, while I try running following test case, which should validate the URL. If necessary the function validateUrl should add the prefix "http://" to the URL. I do this because the API I use haven't this prefix:

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 looks like this:

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

I have no clue, what's my mistake in the definition.

My first thought that the function validateUrl isn't accessible, but it should be.

The output looks like this:

joshii@laptop ~/dev/User-Manager/UserManagement $ npm test

user-management@1.0.0 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.

作者: joshii_h 的来源 发布者: 2017 年 12 月 27 日

回应 1


0

379 作者的声誉

You validateUrl function looks more like library function rather than a class member (you don't use this anywhere it it) so I'd suggest you move it to a separate lib file (and maybe reuse it somewhere else in your code). Testing would be way easier then ;)

However, if you just want to test your validateUrl function without the Redux part try exporting the class separately (e.g. add export to your class definition like export class UserDetail extends Component {....}) and then in your test case:

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")
    })
})
作者: Razvan Pocaznoi 发布者: 2017 年 12 月 27 日
32x32