Storybook - 无法模拟嵌套的 React-Router-Dom 链接而不抛出无尽的 NPM 错误

Posted 2023-02-19

【中文标题】Storybook - 无法模拟嵌套的 React-Router-Dom 链接而不抛出无尽的 NPM 错误

【英文标题】：Storybook - Cannot Mock a Nested React-Router-Dom Link without throwing endless NPM errors

【发布时间】：2021-07-03 10:57:33

【问题描述】：

我正在尝试将 StorybookJS 实现到 s-s-r React 应用程序中。基本组件工作正常（按钮、标题等）。但是任何使用 react-router-dom 之类的依赖项嵌套的东西都会中断。

示例： 我们有一个自定义构建的<Link /> 组件，它使用三元组管理外部链接。外部链接翻转到<a href=，而内部使用react-router-dom 的<Link> 导入为<ReactLink />。那段代码是这样的：

// src/client/components/link/Link.js 

import  Link as ReactLink  from "react-router-dom";
import  isLinkExternal  from "services/utils";

export const Link = ( href, children = null, ...props ) => 

  return isLinkExternal(href) ? (
    <a href=href ...props>
      children
    </a>
  ) : (
    <ReactLink to=href ...props>
      children
    </ReactLink>
  );
;

它的 StorybookJS 文件如下所示：-

// link.stories.js

import React from "react";
import  Link  from "./Link"; // importing my component

export default 
  title: "My Components/Link",
  component: Link, // assigning my component
;

export const MyStoryBookLink = () => <Link href="/foo">I am a link</Link>;

现在，当我运行 Storybook 时，它会引发大量错误，以下是重复出现的/主要错误：-

ERROR in ./node_modules/redis-parser/lib/hiredis.js
Module not found: Error: Can't resolve 'hiredis' in '/Users/me/Documents/my-proj/node_modules/redis-parser/lib'
...
...
@ ./.storybook/generated-stories-entry.js

我没有接触任何与 redis/hiredis 相关的东西，也没有像 generated-stories-entry.js 这样的文件。该应用程序在开发和生产中完美运行，因此这完全是 Storybook 环境问题。

下一个错误：

ERROR in ./node_modules/cache-manager-ioredis/node_modules/ioredis/lib/connectors/connector.js
Module not found: Error: Can't resolve 'net' in '/Users/me/Documents/myProject/node_modules/cache-manager-ioredis/node_modules/ioredis/lib/connectors'

再一次，虽然我们正在使用cache-manager-ioredis，但不知道为什么如果它在应用程序本身上运行良好并且我想要做的只是渲染一个.

下一个：

Module not found: Error: Can't resolve 'tls' in cache-manager-ioredis

同样的事情^^

然后我得到了这些：

     /Users/me/Documents/myProj/__mocks__/hiredis doesn't exist
            .mjs
              /Users/me/Documents/myProj/__mocks__/hiredis.mjs doesn't exist
            .js
              /Users/me/Documents/myProj/__mocks__/hiredis.js doesn't exist
            .jsx
              /Users/me/Documents/myProj/__mocks__/hiredis.jsx doesn't exist
            .ts
              /Users/me/Documents/myProj/__mocks__/hiredis.ts doesn't exist
            .tsx
              /Users/me/Documents/myProj/__mocks__/hiredis.tsx doesn't exist
            .json
              /Users/me/Documents/myProj/__mocks__/hiredis.json doesn't exist
            .cjs
              /Users/me/Documents/myProj/__mocks__/hiredis.cjs doesn't exist

建议它在任何需要的地方寻找模拟来覆盖这些子子子依赖项。

net 和 tls 的结果相同。

最后，我得到了一些：

Field 'browser' doesn't contain a valid alias configuration

我正在考虑使用 react-router-dom/Link 的某个深处，它试图找到这些，并且只有在 webpack 开发服务器/热重载使它们可以访问，或者如果它们被转换为可以从生产包。

但是我该如何模拟这些呢？有没有一种简单的方法来做到这一点，而不是手动模拟每个子依赖项？

我试过了：

添加__mocks__/react-router-dom.js 和export const Link = (props) => <div>children</div>，但它似乎没有启动。

将alias 逻辑添加到.storybook/main.js：

webpackFinal: (config) => 
    config.resolve.alias['react-router-dom'] = require.resolve('../__mocks__/react-router-dom.js');
    return config;
  ,

再一次，似乎没有任何改变。

使用storybook-react-router pkg，但这现在看起来很旧，它配置为旧的config.js 文件而不是main.js，并使用旧的storiesOf 语法。也无能为力。

手动安装tls、hiredis等作为--save-dev依赖。但这似乎是hack。为什么缺少这些模块？

我不敢相信 Storybook 这么难用，更可能是我忽略了一些东西。我只是想模拟一些像 RRD 一样常见和基本的东西。

我做错了什么？我错过了什么？

【问题讨论】：

你找到答案了吗？我有类似的问题，但使用 Angular。我也用s-s-r。我认为它与nodejs有关

恐怕不行，伙计。

【参考方案1】：

我想我找到了原因。这是因为 node.js 包。要使其发挥作用，有 2 种解决方案。

避免为故事书相关代码导入 node.js 包（通常与 s-s-r 相关）。我使用 NX 来构建我的代码，因此我可以轻松地将这些部分移动到它自己的库中，并且只从顶部引用它。 （此解决方案中也没有*** App 的故事书）

跳过配置中的那些包。

类似

config.resolve.fallback =  http: false, net: false, tls: false, fs: false, dns: false, path: false ;