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
  }

为什么不能安装此组件？

1 个答案: