[How to use with nested components] Cannot read property 'bind' of undefined

[dereklin]

I am trying to understand how this library works.

I am trying to test some nested components like this:

describe('shallow render', () => {
  let shallow: Shallow<MyWrapperComponent>;

  beforeEach(() => {
      shallow = new Shallow(MyWrapperComponent, MyModule);
  });

  it('just trying it out', async () => {
      const myComponentPropVal = 'someVal';
      const handleSomeAction = () => {};
      const handleSomeComponentAction = () => {};

      const { find } = await shallow.render(`<app-my-wrapper
[someProp]="true"
(someAction)="handleSomeAction()"
>
<app-my-component
    [someProp]="myComponentPropVal"
    (someAction)="handleSomeComponentAction()"
></app-my-component>
</app-my-wrapper>`);

      expect(find('h1').nativeElement.textContent).toBe('FOO!!');
  });
});

I get:

TypeError: Cannot read property 'bind' of undefined

      at new Rendering (node_modules/shallow-render/lib/models/rendering.ts:82:36)
      at Renderer.<anonymous> (node_modules/shallow-render/lib/models/renderer.ts:159:12)
      at step (node_modules/shallow-render/dist/lib/models/renderer.js:57:23)
      at Object.next (node_modules/shallow-render/dist/lib/models/renderer.js:38:53)

Could you point out the mistakes I am making?

[getsaf]

Thanks for the post.

Shallow does allow multiple ways of testing nested components. There are a few issues going on in your post though:

1. The bind error looks to be because you are using shallow-render 9 on an Angular 8 or lower. See the Readme for Angular version compatibility.
2. You should be passing you bind variables into the render method like so:

   const { find } = await shallow.render(`
   <my-component [someProp]="somePropVal" (someAction)="handleSomeAction()">
   </my-component>
   `, 
   { bind: { somePropVal: 'foo', someAction: () => {} } }
   );

3. You seem to be rendering two components in your test and there is not enough context in your post to understand what the goal of the test is. If you could make a StackBlitz of your issue to better illustrate what you're trying to accomplish, I can help further. Just start with the official shallow-render project, add a test and save the fork.

Here are some example tests with nested components that may help: https://stackblitz.com/github/getsaf/shallow-render-stackblitz?file=examples%2Fmultiple-components.spec.ts https://stackblitz.com/github/getsaf/shallow-render-stackblitz?file=examples%2Fcomponent-with-content-child.spec.ts

[dereklin]

@getsaf Thanks for the reply and hints. I am using version 8.5.2 now. Now I am getting:

MockOfEmptyAnchor cannot be used as an entry component.

My usual angular testbed looks like:

TestBed.configureTestingModule({
  imports: [MyTestingModule, MyModule],
  declarations: [TestComponent] // I am creating a Test component as a host for testing
}).compileComponents();

My shallow-render set up looks like:

let shallow: Shallow<TestComponent>;

beforeEach(() => {
    shallow = new Shallow(TestComponent, MyModule);
});

Is the error because I am not importing the mock module MyTestingModule? How to import the whole module instead of mocking individual services like

    shallow = new Shallow(ColorLabelComponent, ColorModule.forRoot()).mock(RedService, { color: () => 'MOCKED COLOR' });

?

[getsaf]

You cannot use shallow render and TestBed at the same time. Shallow handles all test module configuration for you. You also should not use test modules or host components. Shallow was designed to eliminate the need for all those things.

I would recommend looking at the docs and the example tests. Your answers are in there.

Also there's a StackBlitz with live examples: https://stackblitz.com/github/getsaf/shallow-render-stackblitz

Here's an example test with multiple components: https://github.com/getsaf/shallow-render/blob/master/lib/examples/multiple-components.spec.ts