How to mock css that is loaded via html require when testing components

Hi,

I’m hoping to mock a component that loads some css using a require tag:

foo.html

<template>
    <require from="./some.css"></require>
... other stuff foo does
</template>

If I try to test this with the following setup…

			componentTester = StageComponent
				.withResources('foo')
				.inView('<foo></foo>')

I get this error from jest:

Failed loading required CSS file: some.css

I’d prefer not to load this css in my javascript, is it possible for the component tester to load css via the require tag? If not, is it possible to mock that dependency? I’ve tried adding withResources('src/some.css') but that didn’t work.

1 Like

If you are using Jest, you should be able to do this:

That works for me for plain .css files.

But I have not been able to get it to work .scss files directly. Anyone solved that?

Found an open bug ticket at:

1 Like

Did anyone solved this problem? My webpack.config.js is ok but I still can’t load .scss in my test.

module: {
rules: [

{
test: /.scss$/,
use: [‘style-loader’, ‘css-loader’, ‘sass-loader’],
issuer: /.[tj]s$/i
},
{
test: /.scss$/,
use: [‘css-loader’, ‘sass-loader’],
issuer: /.html?$/i
}

1 Like

I just created a new app with au new and picked scss + jest and have the view like this for app.html:

<template>
  <require from="./app.scss"></require>
  <h1 class="message">${message}</h1>
</template>

It seems to work fine for me, maybe you can adopt some config from a new app? Or post your config here so folks can help spot the issues?

1 Like

I found another solution by testing only JS, not using StageComponent. I want to test method calls, and I think I can’t do that using StageComponent, am I right?

1 Like

StageComponent is to help you simulate your app/custom elements/custom attributes/etc… running in normal condition, by starting up a semi-app, with necessary setup to help you reduce boiler plate and test what is important to your code: lifecycle, change handler, binding, template behavior. If you just want to test some method, the answer could be either use StageComponent or just instantiate a class and call the method yourself. But it any case, having StageComponent should get you more ready for full blown integration testing, which is more beneficial in the end.

1 Like