Reactjs 如何在命名的导出功能组件中正确导入和测试功能？

我的应用程序是用CreateReact应用程序创建的，所以应该可以和jest一起使用。我正在尝试对功能组件中的函数运行测试。运行“npm测试”时，测试失败

    TypeError: chatlist.randoColor is not a function

我已尝试按默认方式导出，并按以下方式导入：

    import { Chatlist } from '../Components/ChatList';
    const randoColor = require('../Components/ChatList');
    import randoColor from '../Components/ChatList';

但是，所有人似乎都无法识别组件中的任何函数。理想情况下，我想保持它作为一个命名的出口，但开放给所有的建议。对于这样的函数，也可能在其自己的实用程序文件中建议它，但是在组件中还有其他函数，我也希望导入和测试，而无需将所有函数存储在实用程序文件中

这是我的项目目录结构

src
| __tests__
  | ChatList.test.js
| Components
  | ChatList.js

我想为聊天列表组件randoColor中的函数（或任何函数）编写一个测试

export const ChatList = ({ chats }) => {
  const randoColor = max => Math.floor(Math.random() * Math.floor(max));
   if (chats.length > 0) {
    return <main></main
}

export const ChatList=（{chats}）=>{
const randoColor=max=>Math.floor（Math.random（）*Math.floor（max））；
如果（聊天长度>0）{
返回{
测试（'randoColor fn应在给定最大输入的情况下生成一个随机数'，（）=>{
expect（chatlist.randoColor（230））.not.toBeNaN（）；
});
});

预期结果是npm测试成功运行，检测功能并通过。实际结果是：

---

TypeError:chatlist.randoColor不是一个函数，randoColor只存在于方法的范围内，因此不能从外部访问它。另外，最好只通过道具访问react组件

由于该方法不使用任何聊天列表道具，我建议将其移出该方法。例如：

const ChatList = ({ chats }) => { 
   if (chats.length > 0) {
       return <main></main
   }
}
ChatList.randoColor = max => Math.floor(Math.random() * Math.floor(max))
export default ChatList

我建议将该功能移动到其他地方，比如创建一个utils文件夹，并使用此方法和其他与颜色相关的方法创建一个utils/colorUtils.js。这使组件

更加干净，唯一可能的更改方法是通过道具或上下文

---

另外，我将

导出聊天列表

更改为

导出默认聊天列表

，这样您就可以在没有

{}

随机颜色

的情况下访问它，它只存在于方法

聊天列表

的范围内，因此不能从外部访问。另外，最好只通过道具访问react组件

由于该方法不使用任何聊天列表道具，我建议将其移出该方法。例如：

const ChatList = ({ chats }) => { 
   if (chats.length > 0) {
       return <main></main
   }
}
ChatList.randoColor = max => Math.floor(Math.random() * Math.floor(max))
export default ChatList

我建议将该功能移动到其他地方，比如创建一个utils文件夹，并使用此方法和其他与颜色相关的方法创建一个utils/colorUtils.js。这使组件

更加干净，唯一可能的更改方法是通过道具或上下文

---

我还将

导出聊天列表

更改为

导出默认聊天列表

，这样您就可以在不使用

{}的情况下访问它

谢谢，我想知道是否有其他方法可以解决这个问题，但是让函数驻留在自己的util文件中似乎是解决问题的方法。是的，但希望更多的组件开始使用这个方法，并使它值得使用utils文件。祝你好运！谢谢，我想知道是否有其他方法可以解决这个问题，但看起来h避免函数驻留在自己的util文件中是goYeah的方法，但希望更多的组件开始使用该方法，并使其值得使用utils文件。祝你好运！

import ChatList from '../Components/ChatList'
ChatList.randoColor(230)