Question

我正在尝试编写用于渲染车把组件的单元测试。当测试运行时，对象为空并且不生成HTML。我使用其他组件遵循相同的布局，并且它们正确呈现。我很困惑为什么返回的对象是null / undefined

这是我的余烬测试代码：

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('csv-upload', 'Integration | Component | csv upload', {
     integration: true
});

test('it renders', function(assert) {
assert.expect(2);


this.render(hbs`{{csv-upload}}`);

assert.equal(this.$().text().trim(), '');

// Template block usage:
this.render(hbs`
  {{#csv-upload}}
   template block text
  {{/csv-upload}}
`);

assert.equal(this.$().text().trim(), '');
});

测试的输出是：

ok 32 PhantomJS 2.1 - JSHint - integration/pods/components/csv-upload/component-test.js: should pass jshint
not ok 33 PhantomJS 2.1 - Integration | Component | device actions: it renders
---
    actual: >
        null

输出中的另一件事：

undefined is not an object (evaluating 'this.get('selected').isAny')

Answer 1

在我们的示例中，您的组件看起来需要设置一些属性（selected）。由于未定义，组件将无法正确呈现，从而导致测试失败。尝试将selected属性传递给您的组件，看看是否有帮助。

注意：这是原始评论转换为答案。

Answer 2

来自Jesper Haug Karsrud 的评论是正确答案！谢谢！

要解决此问题，必须在呈现之前为组件设置属性。更正以纠正问题：

this.set('myProperty', 'fakedata');
this.render(hbs`{{csv-upload data=myProperty}}`);
assert.equal(this.$().html(), '<input id="ember580" type="file" class="ember-view ember-text-field">');

Ember单元测试渲染手柄返回null或undefined

2 个答案: