failing stencil unit test because of loading svg file

Question

How can I change stencil.config.ts to support loading SVG files?

I have a logo component that loads an SVG and show it. I imported the logo svg like this:

import darkLogo from '../../assets/svgs/logo-dark.svg';

Then I used this SVG in my component:

render() {
    return (
       <div>
          <img src={ darkLogo }/>
        </div>
    );
  }

I added a unit test for this component in logo-component.spec.ts file to make sure the component is rendered correctly.

But after running tests, I received a synctax error because of loading SVG:

Details:

/app/assets/svgs/logo-dark.svg:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<svg width="235" height="55" viewBox="0 0 235 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                  ^

SyntaxError: Unexpected token '<'

  3 | } from '@stencil/core';
> 5 | import darkLogo from '../../assets/svgs/logo-dark.svg';
    | ^

I realised that stencil uses Jest library for testing. And Jest can not load SVG files. We need to add transformer for svg files to jest.config.js (Jest cannot load svg file). I do not use Jest directly, so I can not change the jest.config.js. I need to add custom configuration to stencil.config.ts in testing property (https://stenciljs.com/docs/testing-overview#testing-configuration):

import { Config } from '@stencil/core';

export const config: Config = {
  testing: {
    ...
  }
};

The question is: How can I change stencil.config.ts to support loading SVG files?

failing stencil unit test because of loading svg file

0 Answers0