已发布的React组件在用户Jest测试中无法被找到的问题排查

问题背景 #

刚接触NPM包发布不久，此前发布了一个小型可复用React组件，近期通过添加Typescript支持将其升级到新的大版本。组件本身运行正常，但有用户反馈：在全新的create-react-app（CRA）应用中导入该组件后，运行Jest测试时提示找不到组件。

用户操作示例 #

1. 组件导入（App.js） #

import logo from "./logo.svg";
import "./App.css";
import MyComponent from "my-component";

function App() {
    return (
        <div className="App">
            Hello World
            <MyComponent someProp="somePropValue" />
        </div>
    );
}

export default App;

2. 测试文件（App.test.js） #

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders App component", () => {
    render(<App />);
    const element = screen.getByText(/Hello World/i);
    expect(element).toBeInTheDocument();
});

错误信息 #

运行npm run test时出现以下错误：

● Test suite failed to run

    Cannot find module 'my-component' from 'src/App.js'

    Require stack:
      src/App.js
      src/App.test.js

排查思路与包配置 #

搜索错误后发现很多讨论提到在消费项目中配置ts-config.json或ts-jest，但我安装其他包时从未需要这么做，因此认为可能是我的包配置存在问题。以下是包的相关配置：

package.json #

{
    "name": "react-multivalue-text-input",
    "version": "2.2.0",
    "description": " A text input component for React which maintains and displays a collection of entered values as an array of strings.",
    "module": "dist/index.js",
    "types": "dist/index.d.ts",
    "scripts": {
        "prepare": "husky install",
        "dev": "node src/dev/serve.js",
        "clean": "rimraf dist",
        "build": "npm run clean && node src/dev/build.js && tsc",
        "test": "jest",
        "lint": "eslint src/",
        "validate": "run-s test lint",
        "docs:serve": "npx styleguidist server",
        "docs:build": "npx styleguidist build",
        "prepublishOnly": "npm run build"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@testing-library/dom": "^8.13.0",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.2.0",
        "@testing-library/user-event": "^14.1.1",
        "@types/jest": "^27.5.0",
        "@types/testing-library__react": "^10.2.0",
        "@typescript-eslint/eslint-plugin": "^5.21.0",
        "@typescript-eslint/parser": "^5.21.0",
        "chokidar": "^3.5.3",
        "commitizen": "^4.2.4",
        "css-loader": "^6.7.1",
        "css-tree": "^2.3.1",
        "cz-conventional-changelog": "^3.3.0",
        "esbuild": "^0.14.38",
        "esbuild-css-modules-plugin": "^2.6.3",
        "eslint": "^8.14.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.5.0",
        "husky": "^8.0.1",
        "jest": "^28.0.3",
        "jest-environment-jsdom": "^28.0.2",
        "live-server": "^1.2.2",
        "npm-run-all": "^4.1.5",
        "react-docgen-typescript": "^2.2.2",
        "react-styleguidist": "^11.2.0",
        "rimraf": "^3.0.2",
        "style-loader": "^3.3.1",
        "ts-jest": "^28.0.1",
        "ts-loader": "^9.3.0",
        "typescript": "^4.6.4",
        "typescript-plugin-css-modules": "^4.1.1",
        "webpack": "^5.72.0"
    },
    "dependencies": {
        "@types/react": "^18.0.8",
        "@types/react-dom": "^18.0.3",
        "prop-types": "^15.8.1",
        "react": "^18.1.0",
        "react-dom": "^18.1.0"
    },
    "peerDependencies": {
        "react": "^18.1.0",
        "react-dom": "^18.1.0"
    },
    "files": [
        "dist"
    ],
    "config": {
        "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
        }
    }
}

构建脚本（src/dev/build.js） #

const { build } = require('esbuild');
const cssModulesPlugin = require('esbuild-css-modules-plugin');
const { dependencies } = require('../../package.json');

const entryFile = 'src/index.tsx';
const shared = {
    bundle: true,
    entryPoints: [entryFile],
    // Treat all dependencies in package.json as externals to keep bundle size to a minimum
    external: Object.keys(dependencies),
    logLevel: 'info',
    minify: true,
    sourcemap: true,
    plugins: [cssModulesPlugin()]
};

build({
    ...shared,
    format: 'esm',
    outfile: './dist/index.js',
    target: ['esnext', 'node12.22.0']
});

tsconfig.json #

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "outDir": "./dist",
        "strict": true,
        "jsx": "react",
        "esModuleInterop": true,
        "lib": ["dom", "dom.iterable", "esnext"],
        "moduleResolution": "node",
        "skipLibCheck": true
    },
    "include": ["src"],
    "exclude": [
        "node_modules",
        "**/*.test.ts",
        "**/*.test.tsx",
        "**/*.spec.tsx",
        "src/dev/dev.tsx",
        "src/build/build.tsx"
    ]
}

提问 #

这种配置是否会导致用户出现此类问题？希望得到排查方向的指导。或者这是使用Typescript包的正常情况，并非我的包的问题？

内容的提问来源于stack exchange，提问作者rosalindwills