为什么不能安装此组件？

Question

我试图将this tutorial 应用于测试以下React组件。

MainLoggedInPage.js

import React, { Component } from 'react'; 
import { Jumbotron, Button } from 'react-bootstrap'; 
import axios from 'axios'; 
var cookie = require('react-cookies') 

class MainLoggedInPage extends Component { 
    constructor(props) { 
    super(props) 
    this.logout = this.logout.bind(this) 
    this.unactivatedUserAccounts = this.unactivatedUserAccounts.bind(this) 
    this.submitCampaignData = this.submitCampaignData.bind(this) 
    this.insertSampleData = this.insertSampleData.bind(this) 
    this.ctrEstimates = this.ctrEstimates.bind(this) 
    } 
    componentDidMount() { 
    } 
    logout(evt) { 
    evt.preventDefault() 
    cookie.remove('userId', { path: '/' }) 
    cookie.remove('admin', { path: '/' }) 
    window.location.href = '/'; 
    } 
    insertSampleData(evt) { 
    evt.preventDefault() 
    axios.post(
     'http://localhost:3001/api/insert-sample-data', {}) 
     .then(res => { 
     console.log("Sample data insertion request has been executed") 
     }) 
     .catch(err => { 
      console.log("err:" + err); 
     }) 
    } 

    unactivatedUserAccounts(evt) { 
    evt.preventDefault() 
    window.location.href = '/unactivated-user-accounts' 
    } 
    submitCampaignData(evt) { 
    evt.preventDefault() 
    window.location.href = '/submit-campaign-data' 
    } 
    ctrEstimates(evt) { 
    evt.preventDefault() 
    window.location.href = '/ctr-estimates' 
    } 
    render() { 
    var usr = cookie.load('userId') 
    var admin = cookie.load('admin') 
    var unactivatedUserAccountsButton 
    var insertSampleDataButton 
    if (usr) { 
     if (admin === 'true') { 
     unactivatedUserAccountsButton = (
      <div> 
      <Button bsSize="large" onClick={this.unactivatedUserAccounts}>Unactivated User Accounts</Button> 
      </div> 
     ) 
     insertSampleDataButton = (
      <div> 
      <Button bsSize="large" onClick={this.insertSampleData}>Insert sample data</Button> 
      </div>   
     ) 
     } 
     return (
     <div> 
      <Jumbotron> 
      <h1>CTR Predictor</h1> 
      <p>CTR Predictor allows you to automatically estimate the optimal price for keyword combinations used in search engine marketing campaigns.</p> 
      </Jumbotron> 
      {unactivatedUserAccountsButton} 
      {insertSampleDataButton} 
      <Button bsSize="large" onClick={this.submitCampaignData}>Submit campaign data</Button> 
      <Button bsSize="large" onClick={this.ctrEstimates}>CTR estimates</Button> 
      <Button bsSize="large" onClick={this.logout}>Log out</Button> 
     </div> 
    ) 
    } else { 
     window.location.href = '/'; 
     return (
     <div></div> 
    ) 
    } 
    } 
} 

export default MainLoggedInPage; 

测试看起来是这样的：

MainLoggedInPage.test.js

import React from "react"; 
import { mount } from "enzyme"; 
import MainLoggedInPage from "./MainLoggedInPage"; 
var cookie = require('react-cookies') 

describe("MainLoggedInPage",() => { 
    let props; 
    let mountedMainLoggedInPage; 
    const mainLoggedInPage =() => { 
    if (!mountedMainLoggedInPage) { 
     mountedMainLoggedInPage => mount(
     <MainLoggedInPage {...props} /> 
    ); 
    } 
    return mountedMainLoggedInPage 
    } 
    beforeEach(() => { 
    props = {} 
    mountedMainLoggedInPage = undefined 
    }) 
    describe("when no user is logged",() => { 
    beforeEach(() => { 
     cookie.remove('userId', { path: '/' }) 
     cookie.remove('admin', { path: '/' }) 
    }); 
    it("should render an empty div",() => { 
     const x = mainLoggedInPage() 
     // x is undefined here 
    }) 
    }) 
}) 

在部分it("should render an empty div"mainLoggedInPage()返回undefined。

这里有什么错误？

请注意，我用完全相同的方法来测试另一个组件，并在那里工作。我使用npm test运行这些测试。

Answer 1

问题基本上是一个错字，但很难找到并且语法上有效。

let mountedMainLoggedInPage; // here you declare the variable 
    const mainLoggedInPage =() => { 
    if (!mountedMainLoggedInPage) { // if it's undefined, then... 
     /* here lies the problem. 
     you declare an arrow function expression, which has an argument 
     named mountedMainLoggedInPage, and it's just being declared in void. */ 
     mountedMainLoggedInPage => mount(
     <MainLoggedInPage {...props} /> 
    ); 
    } 
    return mountedMainLoggedInPage; // you still return the undefined variable 
    } 

解决办法是分配的mount()到mountedMainLoggedInPage结果：

let mountedMainLoggedInPage; 
    const mainLoggedInPage =() => { 
    if (!mountedMainLoggedInPage) { 
     mountedMainLoggedInPage = mount( // = not => 
     <MainLoggedInPage {...props} /> 
    ); 
    } 
    return mountedMainLoggedInPage 
    }