How to test?

[simonhaenisch]

I have a component page-first.tsx

@Component({ tag: 'first-page' })
export class FirstPage {
  render = () => (
    <Tunnel.Consumer>
      {(state: State) => <h1>{state.message}</h1>}
    </Tunnel.Consumer>
  );
}

with a tunnel state-tunnel.tsx

export interface State {
  message: string;
}

export default createProviderConsumer<State>(
  { message: '' },
  (s, r) => <context-consumer subscribe={s} renderer={r} />
);

and a spec page-first.spec.tsx

import { FirstPage } from './page-first';

describe('First Page', () => {
  it('should build', () => {
    expect(new FirstPage()).toBeTruthy();
  });
});

When I run the test, I get this error from the state-tunnel.tsx file:

TypeError: state_tunnel_1.createProviderConsumer is not a function

Any hints on why this happens?

[MattMcFarland]

I have the same problem but found a workaround. I am using jest's mock feature and mocking state_tunnel, but state_tunnel is completely a copy paste of the TSX file right into my __mocks__ folder and the issue is gone.

@simonhaenisch I think the reason why this is happening is jest is pulling in the transpiled version instead of the version that you pull in from source. This is because from my experience the transpilation plugins used for jest are usually different then the ones compiled for builds.

You might be able to get around this using require() instead, but what I did was mock it with the source version, which isn't a good long term solution. If you want more info I'm happy to elaborate more but only if youre interested.

Ideally, we would probably want to fix this issue by diving a bit more into whats going on with transpilation specifically in the realm of jest.

[joelalejandro]

@MattMcFarland Would you mind sharing how you managed to mock the state_tunnel? I stumbled upon the same issue.

[MattMcFarland]

@joelalejandro so jest will automatically mock any modules you put in your __mocks__ folder.

1. create a folder in your project root directory called __mocks__
2. copy the file stencil-state-tunnel/packages/state-tunnel/src/utils/state-tunnel.tsx to __mocks__/@stencil/state-tunnel
3. PROFIT!!

[simonhaenisch]

@MattMcFarland would that also work if the __mocks__ folder was inside the npm package? I. e. would it be possible to provide the mocks along with the package?

[Alonski]

Edit:
Got it working!

@MattMcFarland Could you share a screenshot or another example of the folder structure? It seems to not be working for me.

[MattMcFarland]

@simonhaenisch I don't think it should, but it might if you put it in a yarn workspace root and run all your tests from the root. More info here: https://jestjs.io/docs/en/manual-mocks

[joelalejandro]

@jthoms1 It'd be nice that this issue becomes the foundation for a doc entry regarding tests on State Tunnels, what do you think?

[MattMcFarland]

I think you might be able to try this: https://github.com/ionic-team/stencil/blob/master/package.json#L157-L159

Looks like they expose their mock functions but I'm not exactly sure why or if it would work.

Also this might be worth a gander: jestjs/jest#4262

[jthoms1]

There are some changes in stencil coming soon that should make testing this very easy. Once they are released I will add a section to the Wiki on how to test. Leaving this open to track the documentation updated that will be needed.

[simonhaenisch]

I think I haven't had any issues with this anymore since Stencil One, so I'm closing this now.