Jest tester is not working when component have styling files

[JoshK2]

I have a project written in react and typescript, and tested with jest tester and is not working. This is the error I get:

Test suite failed to run 
      ● Test suite failed to run

    /workspace/environment/1117b971-f18d-4fdb-a341-f715b3fb6f08/dist/components/Alert/alert.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import '../../styles/variables.scss';
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      22 | Object.defineProperty(exports, "__esModule", { value: true });
      23 | var react_1 = __importStar(require("react"));
    > 24 | require("./alert.scss");
      25 | var Alert = /** @class */ (function (_super) {
      26 |     __extends(Alert, _super);
      27 |     function Alert() {

      at ScriptTransformer._transformAndBuildScript (../../../../../components/testers/jest/bit.envs/22.4.3/node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (alert.js:24:1)
      at Object.<anonymous> (index.js:3:15)

STR:

• clone this project https://github.com/JoshK2/create-react-components-library.
• run this bit add command: bit add src/assets/* -n assests && bit add src/components/*/ -t 'src/components/{PARENT}/*test.tsx' && bit add src/styles/* -n styles && bit add src/utils/*/ -t 'src/utils/{PARENT}/*test.ts'
• run bit status, should be ok.
• impor this compiler bit.envs/compilers/react-typescript@3.0.1
• import the tester bit.envs/testers/jest@22.4.3
• run bit tag like this if you want to see the error in the cloud: bit tag -a --skip-tests

and this is my jest.config.js:

module.exports = {
    preset: 'ts-jest',
    snapshotSerializers: ['enzyme-to-json/serializer'],
    testEnvironment: 'node',
    transform: {
        '^.+\\.tsx?$': 'ts-jest'
    },
    testRegex: '/src/.*\\.test.(ts|tsx)$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    setupFiles: ['<rootDir>/setupTests.ts'],
    collectCoverage: true,
    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.ts', '!**/node_modules/**'],
    moduleNameMapper: {
        '^.+\\.(css|less|scss)$': 'identity-obj-proxy'
    }
};

[CloudPower97]

I have the same exact problem. Is this going to be a quick fix or... ? :pray:

[qballer]

Typescript compiler updated to 3.0.28, can you check the issue with that version ? Please note you can use typescript directly and not the react-typescript version. They are different names leading to the same place.

[CloudPower97]

@qballer I'm actually using bit.envs/compilers/react-typescript@3.0.6 and apart from the problems with jest tester everything is working fine. However, when switching to bit.envs/compilers/typescript@3.0.28 the build step is failing as well with the following error:

⠨ building components(node:29667) ExperimentalWarning: The fs.promises API is experimental
⡋⠀ building componentsNavbar/Navbar.tsx:7:19 - error TS2307: Cannot find module './Navbar.module.css'.

7 import Style from './Navbar.module.css';
                    ~~~~~~~~~~~~~~~~~~~~~

Navbar/UserDropdown/index.tsx:7:19 - error TS2307: Cannot find module './UserDropdown.module.css'.

7 import Style from './UserDropdown.module.css';
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 2 errors.

error: bit failed to build claudio_cortese.terram/navbar@0.0.25 with the following exception:
Command failed with exit code 2 (ENOENT): /home/claudio/Documents/Abstract/terram-components/.bit/components/compilers/typescript/bit.envs/3.0.28/node_modules/typescript/bin/tsc -d
Error: Command failed with exit code 2 (ENOENT): /home/claudio/Documents/Abstract/terram-components/.bit/components/compilers/typescript/bit.envs/3.0.28/node_modules/typescript/bin/tsc -d
    at makeError (/home/claudio/Documents/Abstract/terram-components/.bit/components/compilers/typescript/bit.envs/3.0.28/node_modules/execa/lib/error.js:58:11)
    at handlePromise (/home/claudio/Documents/Abstract/terram-components/.bit/components/compilers/typescript/bit.envs/3.0.28/node_modules/execa/index.js:112:26)
    at process._tickCallback (internal/process/next_tick.js:68:7)

As you can see I'm using CSS Modules.

Thoughts?

[qballer]

Can you share a small repo which reconstructs this issue ?

[CloudPower97]

@qballer Sure, going to do that ASAP :relaxed:

[FDiskas]

And it's gone?