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

Help Requests
1

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
2

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
3

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
4

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
5

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
6

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
7

Has anybody found a solid solution for this besides use scss. I am running into this issue still as well. WE tried implementing both the Mocking CSS Modules and the Handling Static Assets sections on https://jestjs.io/docs/en/webpack.html#mocking-css-modules and neither seemed to have any effect. I read somewhere that Aurelia uses npm to do imports directly from the view.

We have to use stage component because we are using aurelia validation and we need to be able to include add the validation as a plugin.