自定义 React 组件库 - 开玩笑 'cannot find module react'- testing-library, rollup

Question

我正在构建自定义 React 组件库以与其他应用程序共享。我正在使用汇总并关注此博客和其他一些博客：https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe

我的汇总配置的相关片段如下：

export default [
   {
    input: "src/index.ts",
    output: [ { file: packageJson.main, format: "esm", sourcemap: true } ],
    plugins: [ peerDepsExternal(), resolve(), terser() ],
    external: ["react", "react-dom"]
    }
]

在我的 package.json 中，我将 react 和 react-dom 从 'devDependencies' 移到了 'peerDependencies'。我的缩写 package.json:

{
 "name": "custom components",
 "version": "1",
 "devDependencies": {
  ...stuff, (but not react/react-dom)
  },
 "peerDependencies": {
   "react": ">=16.8.0",
   "react-dom": ">=16.8.0"
  },
 "main": "dist/esm/index.js",
 "files": ["dist"]
}

然后使用 npm link 我将我的组件库导入到另一个使用 CRA 和 react-testing-library 的应用程序中。

到目前为止这有效。我能够按预期渲染我的常用组件。

然而，将 react/react-dom 移出 devDependencies 似乎使我的笑话测试在两个项目中都失败了。在这两种情况下，开玩笑都找不到反应。我的 CRA 中导入组件的 Jest 输出如下：

Test suite failed to run

Cannot find module 'react' from 'index.js' //<-- this is the index of the component library

However, Jest was able to find:
    .../MyComponent.tsx

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js',...etc] (defaults)

当我运行在我的公共组件库中进行测试时：

Test suite failed to run

Cannot find module 'react' from 'MyComponent'

import React from 'react';
^

我不确定如何解决这个问题。如果我将 react/react-dom 移回 devDependencies，测试将运行成功，但由于项目中有多个 React 副本，任何使用 React 状态的组件都将无法呈现。

这可能是个问题，因为我使用的是 npm link 而不是实际将应用程序发布到 npm 并安装，或者这是我的汇总 config/jest config/package 的问题.json？任何帮助将不胜感激。

Answer 1

react 和 react-dom 应该包含在您图书馆的 devDependencies 和 peerDependencies 中。

将它们包含在 devDependencies 中使它们在开发时（以及运行ning 测试时可用），但是当您将它们与 Rollup 捆绑在一起时它们不会被包含在库中（这就是你想要）。

将它们包含在 peerDependencies 中会告诉任何消费应用程序“您必须在指定的版本范围内拥有这些依赖项”，但同样，Rollup 不会将它们包含在库包中。

如果您仅将它们包含在 peerDependencies 中，则在开发库或运行ning 测试时不会安装它们，尽管 .

如果您的应用程序包含的 React 版本与您的库版本不同，但如果应用程序和库具有相同的版本范围，您可以运行解决项目中存在多个 React 版本的问题你不应该有那个问题。

自定义 React 组件库 - 开玩笑 'cannot find module react'- testing-library, rollup

Custom React Component Library - jest 'cannot find module react'- testing-library, rollup

javascript

rollup

reactjs

jestjs

react-testing-library