bjankord / jest-serializer-stencil

A Jest snapshot serializer for Stencil components

jest-serializer-stencil

A Jest snapshot serializer for Stencil components

This is based on https://github.com/ionic-team/stencil/blob/master/src/testing/jest/jest-serializer.ts This is intended for teams using Stencil components in other frameworks where it doesn't make sense to use the Stencil CLI to run Jest, e.g. you might be using Stencil components in another framework (Vue, React, etc), you can still get the benefit from Stencil's serializer code for Stencil components.

Setup

Install with npm:

npm install --save-dev jest-serializer-stencil

Install with yarn:

yarn add --dev jest-serializer-stencil

Add it to your Jest config:

"jest": {
  "snapshotSerializers": ["jest-serializer-stencil"]
}

Example Test and Output

Test Input

// Input
describe('my-component', () => {
  it('renders with multiple attributes', async () => {
    const page = await newSpecPage({
      components: [MyComponent],
      html: '<my-component id="foo" first="First" middle="Middle" last="Last" data-attr="bar"></my-component>',
    });
    await page.waitForChanges();

    expect(page.root).toMatchSnapshot();
  });
});

Snapshot output

exports[`my-component renders with multiple attributes 1`] = `
<my-component
  data-attr="bar"
  first="First"
  id="foo"
  last="Last"
  middle="Middle"
>
  <mock:shadow-root>
    <div>
      Hello, World! I'm First Middle Last
    </div>
  </mock:shadow-root>
</my-component>
`;

You can view more test cases here: https://github.com/bjankord/jest-serializer-stencil/blob/main/components/my-component/my-component.spec.ts

You can view the sample snapshot output here: https://github.com/bjankord/jest-serializer-stencil/blob/main/components/my-component/__snapshots__/my-component.spec.ts.snap

Please refer to the Jest snapshotSerializers config docs for additional info.