Using Office UI Fabric (React) gives TypeError: Utilities_1.css is not a function in Wallaby.js

JoshuaKGoldberg commented 6 years ago

Issue description or question

Wallaby.js configuration file

const path = require("path");

module.exports = (wallaby) => ({
    compilers: {
        "**/*.ts?(x)": wallaby.compilers.typeScript({
            compilerOptions: {
                target: "es3",
            },
        }),
    },

    env: {
        type: "node",
    },

    files: [
        "package.json",
        "src/**/*.ts",
        "!src/**/*.test.ts",
        "src/**/*.tsx",
        "!src/**/*.test.tsx",
        "src/External/**/*.js",
    ],

    filesWithNoCoverageCalculated: [
        "src/Adapters/**",
        "src/Entry/**",
        "src/External/**",
        "src/*.tsx",
        "src/*.ts",
    ],

    preprocessors: {
        "**/*.css": () => ({}),
    },

    setup: () => {
        Error.stackTraceLimit = Infinity;

        const initializer = () => {
            const jestConfig = require("./package.json").jest;
            const cssMockFile = require("path").join(wallaby.localProjectDir, "test/jestCssPreprocessor.js");

            jestConfig.moduleNameMapper[".*\.css$"] = cssMockFile;

            wallaby.testFramework.configure(jestConfig);
        };

        try {
            initializer();
        } catch (error) {
            const initializationRetryTime = 500;

            console.log(error);
            console.log(error.stack);
            console.error("Failed to initialize Wallaby.js!");
            console.error("Please comment with the preceding error details at:");
            console.error("    https://github.com/wallabyjs/public/issues/1371");

            wallaby.delayStart();
            setTimeout(
                () => {
                    initializer();
                    wallaby.start();
                },
                initializationRetryTime);
        }
    },

    testFramework: "jest",

    tests: [
        "src/**/*.test.ts",
        "src/**/*.test.tsx",
    ],
});

Code editor or IDE name and version

Visual Studio Code v1.19.1

OS name and version

Windows 10 OSX latest

Issue

Office UI Fabric fails a few tests only in Wallaby.js - not the Jest CLI runner.

Content.tsx:

import { observer } from "mobx-react";
import { DocumentCard, DocumentCardPreview, DocumentCardTitle, IDocumentCardPreviewProps, ImageFit, } from "office-ui-fabric-react";
import * as React from "react";

@observer
export class Content extends React.Component {
    public render() {
        const sampleOneProps: IDocumentCardPreviewProps = {
            previewImages: [
                {
                    previewImageSrc: "/samples/images/Bokeh_2k.jpg",
                    imageFit: ImageFit.cover,
                    width: 318,
                    height: 196,
                },
            ],
        };

        return (
            <div>
                <div>
                    <DocumentCard>
                        <DocumentCardPreview {...sampleOneProps} />
                        <DocumentCardTitle title="Sample One" />
                    </DocumentCard>
                </div>
            </div>
        );
    }
}

Content.test.tsx:

import { render } from "enzyme";
import "jest-enzyme";
import * as React from "react";

import { Content } from "./Content";

describe("loadContent", () => {
    it("doesn't crash", () => {
        render(<Content />);
    });
});

Actual behavior:

1 failing tests, 0 passing

  loadContent doesn't crash [0 ms]
    
    Error: [console.error]: Exception in DocumentCard.render(): TypeError: Utilities_1.css is not a function
        at DocumentCard.Object.<anonymous>.DocumentCard.render (d:\Code\WebClient\node_modules\office-ui-fabric-react\lib\components\DocumentCard\DocumentCard.js:31:101)
        at DocumentCard.obj.(anonymous function) [as render] (d:\Code\WebClient\node_modules\@uifabric\utilities\lib\BaseComponent.js:215:42)
        at resolve (d:\Code\WebClient\node_modules\react-dom\cjs\react-dom-server.node.development.js:2135:18)
        at ReactDOMServerRenderer.render (d:\Code\WebClient\node_modules\react-dom\cjs\react-dom-server.node.development.js:2243:22)
        at ReactDOMServerRenderer.read (d:\Code\WebClient\node_modules\react-dom\cjs\react-dom-server.node.development.js:2217:19)
        at Object.renderToStaticMarkup (d:\Code\WebClient\node_modules\react-dom\cjs\react-dom-server.node.development.js:2495:25)
        at Object.render (d:\Code\WebClient\node_modules\enzyme-adapter-react-16\build\ReactSixteenAdapter.js:363:42)
        at Object.render (d:\Code\WebClient\node_modules\enzyme\build\render.js:37:23)
        at Object.<anonymous> (C:\Users\jogol\.vscode\extensions\WallabyJs.wallaby-vscode-1.0.70\projects\a5fe5542cdcdb0d7\instrumented\src\Components\Content.test.js:12:30)
        at Object.e.length.arguments.(anonymous function) (d:\Code\WebClient\test\setup.js:66:1786)
        at Object.asyncFn (d:\Code\WebClient\node_modules\jest-jasmine2\build\jasmine_async.js:124:345)
        at resolve (d:\Code\WebClient\node_modules\jest-jasmine2\build\queue_runner.js:46:12)
        at new Promise (<anonymous>)
        at mapper (d:\Code\WebClient\node_modules\jest-jasmine2\build\queue_runner.js:34:499)
        at promise.then (d:\Code\WebClient\node_modules\jest-jasmine2\build\queue_runner.js:74:39)
        at <anonymous>
      at Object.<anonymous> src/Components/Content.test.tsx:13
      at Object.<anonymous> src/Components/Content.test.tsx:13:2

Expected behavior:

Running tests in Wallaby.js shouldn't fail if the Jest CLI doesn't.

https://github.com/JoshuaKGoldberg/wallabyjs-office-ui-fabric-react-bug-repro

Linked to https://github.com/OfficeDev/office-ui-fabric-react/issues/3709

ArtemGovorov commented 6 years ago

Thanks for providing the repo.

This line is your wallaby config:

jestConfig.moduleNameMapper[".*\.css$"] = cssMockFile;

is telling Jest to mock all files that end with css, so the node_modules/@uifabric/utilities/lib/css.js file is not loaded correctly and causes the error.

Fixing the pattern as follows should help:

jestConfig.moduleNameMapper["\\.css$"] = cssMockFile;

JoshuaKGoldberg commented 6 years ago

Such a simple fix. Thanks! :)

wallabyjs / public