运行测试时出错“找不到模块”

Question

我是编写单元测试的新手，我正在尝试使用testing-library/react和向我的反应应用程序编写单元测试jest

这是测试代码“Home.test.js”

import React from 'react';
import {render, cleanup} from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Home from "../src/Home";    

afterEach(cleanup);

describe("Tests for HomePage", function() {
    it("should render without throwing an error", function() {
        const { homePage } = render(<Home />);
        //check something here
    });
});

这是我在组件“Home.js”中的代码

import * as React from "react";

import { Panel, Shell, Button } from "@myorg/core";
import { home_icon, new_icon } from "@myorg/icons";

function Home(props) {
    const openDialog = React.useCallback(() => {
        //do something
    });

    return (
        <Shell.Page breadcrumbs={[t("demo:Home")]}>
            <Panel style={{ height: "100%" }}>
                <h2>App Header</h2>
                <Button onClick={openDialog} variant="primary">
                    <img src={new_icon} width="20" />
                    {t("demo:New Asset")}
                </Button>
            </Panel>
        </Shell.Page>
    );
}

当我运行“npm run test”时出现错误

Cannot find module '@myorg/icons' from 'Home.js'

Answer 1

我相信您正在尝试使用tsconfig.jsonoptions paths，这将被 jest （或其他测试框架）忽略。您需要手动复制所有路径定义jest.config.js，并使用 jest 配置选项手动更新它们，moduleNameMapper如下所示：

  moduleNameMapper: {
    // translate all your custom paths here, read the doc in the link above
    '^@finder/(.*)$': '<rootDir>/files-manipulation/$1',
    '^@metadata/(.*)$': '<rootDir>/folder-metadata/$1',
    '^@logger/(.*)$': '<rootDir>/logging/$1',
    // ...and so on
  },