# How do I test a Component with Block-Params?
**URL:** https://discuss.emberjs.com/t/how-do-i-test-a-component-with-block-params/7899
**Category:** Testing
**Created:** [April 30, 2015, 8:08pm UTC](https://discuss.emberjs.com/t/how-do-i-test-a-component-with-block-params/7899 "2015-04-30T20:08:32Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@jamesarosen](https://discuss.emberjs.com/u/jamesarosen)
#### Post date: [April 30, 2015, 8:08pm UTC](https://discuss.emberjs.com/t/how-do-i-test-a-component-with-block-params/7899/1 "2015-04-30T20:08:32Z")
### Background
I have a component that yields a block-param. It’s meant to be used like
```auto
{{#my-component as |x|}}
Use {{x}} somehow.
{{/my-component}}
```
### Can’t Use Test Helpers
I can’t use ember-test-helper’s [`test-module-for-component`](https://github.com/switchfly/ember-test-helpers/blob/master/lib/ember-test-helpers/test-module-for-component.js) (or ember-qunit’s [`moduleForComponent`](https://github.com/rwjblue/ember-qunit/blob/master/lib/ember-qunit/module-for-component.js)) because I need the as |x| in the _invocation_ of my-component.
(I’ve opened [Feature request: support for block-params · Issue #40 · emberjs/ember-test-helpers · GitHub](https://github.com/switchfly/ember-test-helpers/issues/40) as a feature-request for `test-module-for-component` to allow specifying block params, but I don’t know exactly how it would do that.
### My Unit Test
In the mean time, I’ve tried writing a test. Here’s what I have so far:
```auto
import Ember from "ember";
import { moduleFor, test } from "ember-qunit";
import startApp from '../../../../helpers/start-app';
var App;
const TEMPLATE = `
{{#my-component as |x|}}
{{x}}
{{/my-component}}`;
moduleFor('my-component', {
integration: true,
beforeEach: function(assert) {
App = startApp();
const View = App. __container__.lookupFactory('view:default');
this.view = View.create({
tagName: 'section',
template: Ember.Handlebars.compile(TEMPLATE)
});
Ember.run(this.view, 'append');
},
afterEach: function() {
Ember.run(this.view, 'destroy');
Ember.run(App, 'destroy');
App = null;
}
});
test('yields x value', function(assert) {
assert.equal(this.view.$('span').text(), 'x');
});
```
When I run that, I get
```auto
TypeError: Cannot read property 'element' of null
at Object.merge.default.$ (http://localhost:7357/assets/vendor.js:51942:42)
at CoreView.default.extend.$ (http://localhost:7357/assets/vendor.js:53179:32)
at Object. (http://localhost:7357/assets/my-app.js:10105:28)
at Object.wrapper (http://localhost:7357/assets/test-support.js:1785:29)
at Object.Test.run (http://localhost:7357/assets/test-support.js:3443:28)
at http://localhost:7357/assets/test-support.js:3572:11
at process (http://localhost:7357/assets/test-support.js:3131:24)
at begin (http://localhost:7357/assets/test-support.js:3176:2)
at http://localhost:7357/assets/test-support.js:3192:4
```
That error is happening in [`hasElement.$`](https://github.com/emberjs/ember.js/blob/v1.11.3/packages/ember-views/lib/views/states/has_element.js#L19).
### Things I Tried
- `Ember.View.create` instead of looking up `view:default` on the app, but then the view could find `my-component`
- `view.render()` instead of `view.append()`, but that instead gives the error “Cannot read property ‘innerContextualElement’ of undefined”
- not specifying `tagName`, but that instead gives the error “You cannot access this.$() on a component with `tagName: ''` specified.”
---
### Author:  [@xeppelin](https://discuss.emberjs.com/u/xeppelin)
#### Post date: [May 1, 2015, 8:28am UTC](https://discuss.emberjs.com/t/how-do-i-test-a-component-with-block-params/7899/2 "2015-05-01T08:28:43Z")
Didn’t dig in deeper (but hopefully will, as I’m very interested in the “why”), but extending an `Ember.View` with setting it’s `container` property to the App’s ` __container__ `, and then creating it seems to solve the problem:
```auto
beforeEach: function(assert) {
App = startApp();
this.view = Ember.View.extend({
container: App. __container__
}).create({
tagName: 'section',
template: Ember.Handlebars.compile(TEMPLATE)
});
Ember.run(this.view, 'append');
}
```
So basically the first thing you tried almost got you there 🙂
But like I said, I have no idea why `view:default` didn’t work, would love to find out…
---
### Author:  [@jamesarosen](https://discuss.emberjs.com/u/jamesarosen)
#### Post date: [May 5, 2015, 5:31pm UTC](https://discuss.emberjs.com/t/how-do-i-test-a-component-with-block-params/7899/3 "2015-05-05T17:31:10Z")
It looks like there’s an official solution for this coming: [https://github.com/switchfly/ember-test-helpers/pull/38](https://github.com/switchfly/ember-test-helpers/pull/38)