Question

我制作了一个React Nooks库，可在NPM上使用。

对于对该库进行单元测试，我将JEST与Typescript一起使用。

它与另一个节点模块@brand/dependencyModule有依赖性。

此@brand/dependencyModule正在进行http请求，并发出我需要模拟的事件（与{ EventEmitter } from 'events'在一起）。

我试图按照JEST documentation对该库进行手动模拟。

首先，让我向您展示我的尝试：

在项目根级别（与__mocks__相同的级别）创建node_modules文件夹
在@brand内创建子文件夹__mocks__
在dependencyModule.ts文件夹中创建TS文件@brand

在__mocks__/@brand/dependencyModule.ts内，我们有：

'use strict';

import { EventEmitter } from 'events';
import {
    SomeTyping
} from '@brand/dependencyModule';

class MockVisitor extends EventEmitter {
    someAttribute1: string;

    someAttribute2: string;

    someAttribute3: SomeTyping;

    constructor(some) {
        super();
        this.someAttribute1 = some;
        this.someAttribute2 = parameter;
        this.someAttribute3 = mockHttpResponse;

        setTimeout(() => {
            this.emit('ready');
        }, 100);
    }
}

class MockModule {
    otherAttribute1: string;

    constructor(otherParam) {
        this.otherAttribute1 = otherParam;
    }

    public newVisitor(some, param) {
        return new MockVisitor(some, param);
    }
}

export default jest.fn().mockImplementation(() => ({
    start: (someStuff) => {
        return new MockModule(someStuff);
    }
}));

现在，在我的src/**/index.test.ts文件中，我有：


describe('trying to mock @brand/dependencyModule', () => {
    test('it should use the mock version', async () => {
        let isReady = null;
        const { container } = render(
            <MyHookProvider
                onInitDone={() => {
                    isReady = true;
                }}
            >
                <div>Hello</div>
            </MyHookProvider>
        );

        await waitFor(() => {
            if (!isReady) {
                throw new Error('not ready');
            }
        });
        expect(isReady).toEqual(true);
    });
});

最后，让我们看一下使用'@ brand / dependencyModule'的MyHookProvider.tsx文件：

import React, { useState, useEffect, SetStateAction, Dispatch, useContext } from 'react';

import dependencyModule from '@brand/dependencyModule';


export const MyHookProvider: React.SFC</*...*/> = ({
    // ...
    onInitDone,
}: ProviderProps) => {
    useEffect(() => {
        const module = dependencyModule.start('hello');
        const visitorInstance = module.newVisitor('stack','overflow');
        
        visitorInstance.on('ready', () => {
            onInitDone()
        });
    }, [/*...*/]);

    return (
        <MyHook.Provider value={{ ... }}>
                {"I'm ready."}
        </MyHook.Provider>
    );
};

MyHookProvider.defaultProps = {
    onInitDone: (): void => {
        // do nothing
    },
};

现在，我在运行npm run test时遇到错误，我希望能开玩笑地检测到我对@brand/dependencyModule进行了模拟，但是当我调试时，它实际上正在运行真正的lib。我不是要使它正常运行所需要的。

有什么帮助吗？谢谢！

这是我用于单元测试的库：

        "@testing-library/jest-dom": "^5.5.0",
        "@types/jest": "^25.2.1",
        "@types/enzyme": "^3.10.5",
        "@types/enzyme-adapter-react-16": "^1.0.6",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "enzyme-to-json": "^3.4.4",
        "jest": "^25.4.0",
        "jest-mock-axios": "^3.2.0",
        "ts-jest": "^25.4.0",

像这样的jest配置设置：

    "jest": {
        "setupFilesAfterEnv": [
            "./src/setupTests.js"
        ]
    }

带有src/setupTests.js：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

无法使用JEST（带有Typescript）和React环境来模拟节点模块

0 个答案: