Is it possible to test the Component in isolation without the HTML template?

It seems that TestBed.configureTestingModule({ provider: MyComponent }).createComponents() is being called for each shallow render. Is it possible to call it without TestBed.configureTestingModule({ provider: MyComponent }).createComponents()? So it will look like this: TestBed.configureTestingModule({ provider: MyComponent })

I quite like the mocking ability with this library so it would be great if I could not call .createComponents() in my tests. This is so I can test the component in isolation.

[azaeng04]

Thanks so much @getsaf!

See the Renderer2 is included as a dependency. constructor MyComponent(private Renderer2) So when running the tests. The TestBed complains that it is not being provided. How do I work around this with shallow.render()?

Thanks for the tip! I am still just playing around with the lib to get an idea of how it works.

Side note: I would love to invite you to this Angular community I recently joined: https://www.angularnation.net/. It would be great if you could do a talk on this amazing lib you wrote. I find it REALLY helpful and I am sure other devs would too!

[getsaf]

The console in your screenshot says that the Renderer2 class is abstract, those can’t be used as Angular providers. I think Renderer2 is an internal Angular thing that you should not need to provide it manually. I’m also pretty sure you don’t need to use provideMock in your shallow options.

IMO, rendering the component in a beforeEach is likely gonna cost you more code/headache than just calling shallow.render() it in each test because you lose access all the built-into shallow-render tools like mocking/query/fixture, etc when you render before your test executes.

Just suggestions here, but this kind of refactor could save you time and is more in-line with shallow-render’s intended use:

let shallow: Shallow<MyComponent>;
beforeEach(() => {
  // Only define your baseline setup but do not render here...
  shallow = new Shallow(MyComponent, MyModule);
});

it('displays the service total when the button is clicked', async () => {
  const { find, fixture } = await shallow
    .mock(MyService, { getResponse: () => ({ total: 10000 }) })
    .render();

  find('button').click();
  fixture.detectChanges();

  expect(find('label').nativeElement.innerText).toContain('Response was 10,000');
});