Possible problem with import of .SCSS

[ghost]

Hi again,

I've created a simple test but is running into issues with my .SCSS imports. You can see the error in the screenshot below:

UIButtonIcon refers to another .SCSS files in another directory:

@import '../../styles/main.scss';

The file structure is as follows:

And the UIButtonIcon component looks like the following:

import * as React from 'react';
import { UIIcon } from '../UIIcon';
import * as T from './types';
import './ui-button-icon.scss';

const getClasses = (props: T.IProps) => {
  return `ui-button-icon
      ${props.theme ? `ui-button-icon--${props.theme}` : ''}
      ${props.flat ? `ui-button-icon--flat` : ''}
      ${props.disabled ? `ui-button-icon--disabled` : ''}
    `;
};

export const UIButtonIcon = (props: T.IProps) => {
  return (
    <button className={ getClasses(props) }
            id={ props.id }
            { ...(props.onClick && {onClick: props.onClick}) }
            disabled={ props.disabled }
            type={ props.type }>
      { <UIIcon id={ props.icon } size="medium" /> }
    </button>
  );
};

My Jest config file looks as follows:

module.exports = {
  roots: [
    "../../src",
  ],
  testEnvironment: "node",
  globalSetup: "react-screenshot-test/global-setup",
  globalTeardown: "react-screenshot-test/global-teardown",
  testMatch: ["**/?(*.)+(screenshot).[jt]s?(x)"],
  transform: {
    "^.+\\.[t|j]sx?$": "ts-jest",
    "^.+\\.css$": "react-screenshot-test/css-transform",
    "^.+\\.scss$": "react-screenshot-test/sass-transform",
    "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "react-screenshot-test/asset-transform"
  }
};
´´´

Do you have any idea on how to fix this issue?

[fwouts]

Thanks for the bug report!

Current SCSS test cases don't include any imports, so I'm not too surprised. I'll need to dig a bit deeper into how that should work, I suspect we just need to change the working directory inside the sass-transform script.

I'll come back to this within the next day.

[fwouts]

Hey, this was easier than expected. Please try out v1.3.1, pretty sure that will have fixed it :)

[ghost]

Hi again.
Sound good! I'll wait for the next release :)

[fwouts]

It should already be on NPM (I even got the confirmation message that v1.3.1 was pushed successfully), but it looks like they're having issues on their end. Hopefully, it'll be live soon :)

[ghost]

That sounds weird since it's still not present. I'll wait some more and see :)

[fwouts]

Follow npm/cli#593 for more info. I'm hoping it'll be fixed in a few hours.

[fwouts]

They fixed it. It's live now 🙂

[ghost]

It works! Thanks.

[dmitryshelomanov]

not working

"react-screenshot-test": "^2.3.3",