Question

我正在使用Mocha和Zombie.js来测试我的应用程序，它使用require.js。

我在test.js文件中有以下内容：

process.env.NODE_ENV = 'test';

var express = require('express'),
  http =require('http'),
  assert = require('assert');

app = express();
app.use(express.static('src'));

const Browser = require('zombie');

describe('User visits signup page', function() {  
  before(function() {
    this.server = http.createServer(app).listen(3000);
    this.browser = new Browser({ site: 'http://localhost:3000', debug: true, runScripts: true });
  });

  before(function(done) {
    this.browser.visit('/index.html', done);
  });

  describe('submits form', function() {

    before(function() {
      return this.browser;
    });

    it('should be successful', function() {
      this.browser.assert.success();
    });

    it('should see welcome page', function() {
      this.browser.assert.text('title', 'Page Title');
    });
  });

  after(function(done) {
    this.server.close(done);
  });
});

当我启动测试时（使用命令行mocha test / test.js），我鼓励出现以下错误：

User visits signup page
    1) "before all" hook


  0 passing (341ms)
  1 failing

  1) User visits signup page "before all" hook:
     ReferenceError: requirejs is not defined
      at http://localhost:3000/index.html:script:2:10
      in http://localhost:3000/index.html

似乎Mocha / Zombie不会等待require.js脚本加载或类似的东西。你以前遇到过这个问题吗？非常感谢。

稍后编辑：

这是应用程序的index.html的代码：

<!DOCTYPE html>
<html lang="en">
   <head class="hbs-head-container"></head>

   <script id="hbs-head-template" type="text/x-handlebars-template">
   <meta charset="utf-8">
      <meta content="IE=edge" http-equiv="X-UA-Compatible">
      <meta content="{{metaContent}}">
      <meta content="width=device-width, initial-scale=1" name="viewport">
      <title>{{title}}</title>
      <link href="{{googleFonts}}" rel="stylesheet">
      <link href="{{materialIcons}}" rel="stylesheet">
      <link href="../bower_components/material-design-lite/material.min.css" rel="stylesheet">
      <link href="stylesheets/main.css" rel="stylesheet">
   </script>

   <body>
      <section class="hbs-body-container"></section>

      <script id="hbs-body-template" type="text/x-handlebars-template">
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
               <span class="mdl-layout-title">{{title}}</span>
            </div>
            <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
               {{#each tabs}}
                  <a class="{{classValue}}" href="{{hrefValue}}">{{text}}</a>    
               {{/each}}
            </div>
         </header>

         <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">{{title}}</span>
         </div>

         <main class="mdl-layout__content">
          {{#each sections}}
            <section class="mdl-layout__tab-panel {{#if @first}}is-active{{/if}}" id="{{sectionId}}">
               <div class="page-content">
                  <div class="mdl-cell mdl-cell--4-col" id=
                     "{{pageContentId}}">
                     <div class="demo-card-wide mdl-card mdl-shadow--2dp">
                        <div class="mdl-card__title">
                           <h2 class="mdl-card__title-text">{{pageContentTitle}}
                           </h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                           <input id="{{filesId}}" name="file" type="file">
                           <a class=
                              "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                              onclick="abortRead();">{{cancel}}</a>
                           <div id="{{progressBarId}}">
                              <div class="percent">
                                 0%
                              </div>
                           </div>
                           <div id="{{someInfoId}}">
                              {{someInfoValue}}
                           </div>
                           <div id="{{fileContentId}}">
                              {{fileContentValue}}
                           </div>
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                           {{#each buttons}}
                              <a class="{{classValue}}" id="{{idValue}}">{{text}}</a>    
                           {{/each}}
                        </div>
                        <div class="mdl-card__menu">
                        </div>
                     </div>
                  </div>

                  <div class="mdl-cell mdl-cell--8-col" id="{{outputCardId}}">
                     <div class="demo-card-wide mdl-card mdl-shadow--2dp">
                        <div class="mdl-card__title">
                           <h2 class="mdl-card__title-text">{{opText}}</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                           <div class="mdl-textfield mdl-js-textfield">
                              <textarea class="mdl-textfield__input" id=
                                 "{{resultsOutputId}}" rows="10">
                              None ...
                              </textarea>
                           </div>
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                           <a class=
                              "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                              data-clipboard-target="#{{resultsOutputId}}" id="{{ccId}}">{{ccText}}</a>
                        </div>
                        <div class="mdl-card__menu">
                        </div>
                     </div>
                  </div>
               </div>
            </section>
            {{/each}}
         </main>

         <footer class="demo-footer mdl-mini-footer">
            <div class="mdl-mini-footer--left-section">
               <ul class="mdl-mini-footer--link-list">
                  <li>
                     <a href={{footerLink}}>{{footerText}}</a>
                  </li>
               </ul>
            </div>
         </footer>
      </div>
      </script>
      <script src="../bower_components/material-design-lite/material.min.js"></script>

      <script src="../bower_components/requirejs/require.js"></script>
      <script type="text/javascript">
         requirejs.config({
             baseUrl: '../bower_components',
             paths: {
                 jquery: 'jquery/dist/jquery.min',
                 handlebars: 'handlebars/handlebars.min',
                 clipboard: 'clipboard/dist/clipboard.min',
                 underscore: 'underscore/underscore-min',
                 papaparse: 'papaparse/papaparse.min',
             }
         });
      </script>

      <script src="javascripts/templates/hbs-head.js"></script>
      <script src="javascripts/templates/hbs-body.js"></script>

      <script src="javascripts/main.js"></script>
   </body>
</html>

ReferenceError：未定义requirejs

0 个答案: