Jest TypeError：无法读取未定义的'store'

Question

我总是遇到以下错误，而我尝试运行以下测试用例，这应该验证URL。如有必要，函数validateUrl应该在URL中添加前缀“http：//”。我这样做是因为我使用的API没有这个前缀：

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

我不知道，我在定义中的错误是什么。

我首先想到函数validateUrl是不可访问的，但它应该是。

输出如下所示：

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

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

FAIL tests / app.test.jsxUrlValidation✕应该是一个有效的字符串（3ms）

●UrlValidation>应为有效字符串

 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)

测试套件：1次失败，1次测试：1次失败，1次快照：0总时间：0.744s，估计1s跑完所有测试套件。错误的ERR！测试失败。请参阅上文了解更多详情。

Answer 1

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