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运行测试”时出现错误

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

Answer 1

我相信您正在尝试使用tsconfig.json选项paths，这将被玩笑（或其他测试框架）忽略。您需要手动复制jest.config.js中的所有路径定义，并使用jest config选项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
  },

运行测试“找不到模块”

1 个答案: