Ember component test fails. Asking to call setupRenderingContext

1

I get this strange error message when I tried to run a test for my component. Promise rejected during “MY_COMPONENT_TEST”: Cannot call render without having first called setupRenderingContext. I followed what has been mentioned in the ember component test documentation. I have called setupRenderingTest(hooks). But still getting this weird error message when running tests. But the test works fine when I remove rendering the component using the render method. I also get the following error messages Promise rejected before “MY_COMPONENT_TEST”: appContainer is undefined, Promise rejected before “MY_COMPONENT_TEST”: owner is undefined, Promise rejected before “MY_COMPONENT_TEST”: right-hand side of ‘in’ should be an object, got undefined.

I found an error and may be due to this why ember fails to get a context to render the component when I run component test.

export function initialize( application) {
  let appContainer = application.__container__;
  console.log("AppContainer is", appContainer); //undefined
}

export default {
  initialize
};

This is my initializer file where when I access the __container__ of the application I get undefined. This code is part of an addon.

2

Are you using an instance-initializer? The code makes it look more like an application initializer but IIRC the container is only available in an instance initializer. Also I’m not totally sure what you’re trying to do with the container but if you’re trying to look up items from the registry I think you’d want to use the lookup method per the example in the guides:

export function initialize(applicationInstance) {
  let logger = applicationInstance.lookup('logger:main');
  logger.log('Hello from the instance initializer!');
}

export default {
  initialize
};
1 Like
3

The code is part of intializer and not instance-initializer as it is present in the intializer folder of the addon.

It has only been 2 months that I started learning Ember. I still don’t understand how the EmberJs works internally. I read the documentation and found that initializer recieves application and instance-intializer recieves applicationInstance. I don’t understand the difference between application and applicationInstance. And also what the __container__ is.

The snippet I added above is part of a codebase that I was asked to learn. Could you please tell me what all these application, applicationInstance and __container__ really are.

4

Sure thing. In the guides it says:

Essentially, the Application defines your application while the ApplicationInstance manages its state .

So you can think of an Application as kind of the “blueprint” for your app and an Application Instance as a specific running instance of your app. Say you had 3 browser windows open all with the same app. They’re all running the same Application, but each has its own Application Instance with unique state, etc.

In many programming languages there are the concepts of a class and a class instance. For example you could write a class “Building” with attributes like “name” and “address” and “type” and maybe a method like “calculateHeight”. Then you could have an instance of the “Building” class with name “CityView Tower” address “1234 W Main St. New York, NY” and type “condominum”, for example. Building would then be the class and the CityView Tower specific building would be the building instance. It’s basically the same thing with Application and ApplicationInstance, except that Application is your entire app and Application Instance is a specific running “instance” of your app.

So what does that mean for initializers? Well, in the guides page on initializers it says:

Application initializers are run as your application boots, and provide the primary means to configure dependency injections in your application. Application instance initializers are run as an application instance is loaded. They provide a way to configure the initial state of your application

Given the context you provided in the other thread it sounds like you’re using this initializer to call an initialization method on a service, and I think you’ll want to change this initializer to be an instance initializer and not an application initializer. You need an instance initializer because for that service to be initialized with any state it must be in an application instance. I think your initializer could look something like this:

export function initialize(applicationInstance) {
  let myService = applicationInstance.lookup('service:my-service');
  myService.myInitializationMethod();
}

export default {
  initialize
};

As for why this was originally just an initializer, I could be remembering this wrong but I don’t think there was always a distinction between application and instance initializers, so I think if the addon was written back then it could have been performing the function of an instance initializer even if it was in the regular initializer directory.

2 Likes
5

I changed the autoboot flag to true for the test environment and now I can access the __container__ API of the application in the addon during the integration test. But this caused another error which says

You cannot use the same root element (DIV) multiple times in an Ember.Application

What is that error about?