運行測試時出錯“找不到模塊”

Question

我是編寫單元測試的新手，我正在嘗試使用testing-library/react和jest為我的 React 應用程序編寫單元測試

這是測試代碼“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.json選項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
  },