Ember.js 余烬测试/幻影未找到DOM元素

我正在尝试使用Mirage在Ember中进行一些基本的验收测试。我现在只使用固定装置来填充测试环境，只是为了找到我的脚。当我在测试环境中运行ember（即使用-e测试）时，我可以看到我的应用程序正在填充预期的数据。DOM有一些按钮等等，一切都很好

但是，当我运行一个测试来访问一个页面并单击一个按钮时，测试告诉我它找不到按钮。换句话说，运行-e测试并检查localhost表明应用程序似乎很好。但是，检查localhost/tests时，有一个测试失败，说明它找不到在-e测试屏幕中肯定存在的按钮

我已经确认该按钮存在于-e测试环境中，使用了inspector和控制台行中的基本jqueryselect

所以我假设在设置或配置中有什么错误

特别是：

module('Acceptance | basic tests', {
  beforeEach: function() {
    this.application = startApp();
  },

  afterEach: function() {
    Ember.run(this.application, 'destroy');
  }
});

test('visiting /orders', function(assert) {
  visit('/orders');

  andThen(function() {
    assert.equal(currentURL(), '/orders');
  });
});

test('visiting /basic', function(assert) {
  visit('/orders');
  click('top-row-orders-button'); //button.top-row-orders-button fails too
  andThen(function() {
    assert.equal(currentURL(), '/orders');
  });
});

第一个测试（仅访问url）通过。第二个测试是它说找不到按钮。同样，当我为-e测试服务时，并在控制台中输入：$（“.top row orders button”） 它返回有问题的按钮

很乐意提供任何人需要的更多信息。非常感谢您的帮助。这几天来我一直在搞这个，运气都不好

编辑以添加：

---

更一般地说，在使用Mirage时，是否有办法查看/tests环境中的DOM（即实际测试运行的DOM）？也就是说，DOM在每个Mirage测试中是什么样子的？

我浏览了你的存储库，发现你把Mirage工厂的配置搞错了……当使用Mirage时，你应该准确地定义应用程序期望的内容

例如：在运行应用程序时，api ur调用返回

Search

对象中的电影。在测试中，它返回电影列表对象作为响应。如果没有搜索对象，您可以使用checkin adapters->query函数返回[]

海市蜃楼所做的是api模拟。调用api时，它返回您在其config.js中定义的响应，并且它仍然会执行您在

适配器中的查询函数中定义的承诺。由于模型为空，因此没有任何可渲染的内容，测试失败

将mirage配置文件更改为

this.get('http://www.omdbapi.com/', function(db, request) {
  return { Search: db.movies };
});

并相应地更改工厂/电影以返回对象键（例如，在您的情况下为'imdbID'而不是'id'）。
我在您的存储库中运行，发现您使mirage工厂配置错误…使用mirage时，您应该准确定义应用程序期望的内容

例如：在运行应用程序时，api ur调用返回
Search
对象中的电影。在测试中，它返回电影列表对象作为响应。如果没有搜索对象，您可以使用checkin adapters->query函数返回[]

海市蜃楼所做的是api模拟。调用api时，它返回您在其config.js中定义的响应，并且它仍然会执行您在
适配器中的查询函数中定义的承诺。由于模型为空，因此没有任何可渲染的内容，测试失败

将mirage配置文件更改为

this.get('http://www.omdbapi.com/', function(db, request) {
  return { Search: db.movies };
});

还可以更改工厂/电影以相应地返回对象键（例如在您的示例中为'imdbID'而不是'id'）。
单击帮助器（
click（'top-row-orders-button'）
）使用CSS选择器，因此如果您正在寻找具有类
top-row-orders button
的DOM节点，您应该使用它

click('.top-row-orders-button');

如果找不到该按钮，请尝试将
调试器
放在
单击
帮助程序之前，并在console中键入
$（'.top row orders button'）

你能澄清一下
-e test
是什么意思吗？人们通常有两种方式在浏览器中查看测试运行程序。首先，如果您已经完成了
ember-service
，您可以访问
localhost:4200/tests
。但是，建议使用
ember测试--server
。这将使用testem并在控制台中启动TestRunner，但它也会向您显示一个链接，如

Open the URL below in a browser to connect.
http://localhost:7357/

您可以访问它来查看测试运行程序

首选第二种方法的原因是，
ember-test
命令使用一个具有
test
的构建时（节点）环境以及
test
的运行时环境（即
config/environment.js
下的环境变量）的ember应用程序，而使用
ember-service
然后访问
/tests
则使用
开发的构建时环境和
测试的运行时环境

通常，您不需要指定
--environment test
——只需使用
ember test--server
命令即可

最后，关于你的最后一个问题，实际上没有所谓的“海市蜃楼测试”。在验收测试中，Mirage的服务器与您的Ember应用程序一起启动。但是海市蜃楼对你的余烬应用程序一无所知，甚至不知道它正在测试中。它基本上只是模拟了XMLHttpRequest，然后停在那里。
单击帮助器（
click（'top-row-orders-button'）
）使用CSS选择器，因此如果您正在寻找具有类
top-row-orders button
的DOM节点，您应该使用

click('.top-row-orders-button');

如果找不到该按钮，请尝试将
调试器
放在
单击
帮助程序之前，并在console中键入
$（'.top row orders button'）

你能澄清一下
-e test
是什么意思吗？人们通常有两种方式在浏览器中查看测试运行程序。首先，如果您已经完成了
ember-service
，您可以访问
localhost:4200/tests
。但是，建议使用
ember测试--server
。这将使用testem并在控制台中启动TestRunner，但它也会向您显示一个链接，如

Open the URL below in a browser to connect.
http://localhost:7357/

你可以去看看