React redux 如何在Jest中测试redux选择器？

我想测试以下选择器：

export const getApp = (): IApp | null => {
  return useSelector<IState, IApp | null>((state) => state.appState.app);
};

这是我得到的错误： 无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能发生

for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app

       7 |
       8 | export const getApp = (): IApp | null => {
    >  9 |   return useSelector<IState, IApp | null>((state) => state.appState.app);
         |          ^
      10 | };

原因如下：
1.React和渲染器的版本可能不匹配（例如React DOM）
2.你可能违反了钩子的规则
3.同一应用程序中可能有多个React副本
7 |
8 |导出常量getApp=（）：IApp | null=>{
>9 |返回useSelector（（state）=>state.appState.app）；
|          ^
10 | };

如何测试此选择器

谢谢。

（state）=>state.appState.app

函数是一个选择器，可以单独提取和测试，但由于它很简单，可以与

getApp

一起测试

getApp

和

useSelector

是，它们应该由React渲染器调用，而不是直接调用。这需要使用虚拟组件来完成。由于开发人员对其拥有完全控制权，因此需要格式化该值并将其转换为布局，以便可以明确地断言该值：

const Dummy = () => {
  const app = getApp();
  return <div>
    <div data-testid="app-id">{app.id}</div>
    <div data-testid="app-name">{app.name}</div>
  </div>;
};

const wrapper = mount(<Dummy/>);
expect(wrapper.find('[data-testid="app-id"]').text()).toBe('mocked id');
expect(wrapper.find('[data-testid="app-name"]').text()).toBe('mocked name');

const Dummy=（）=>{
const-app=getApp（）；
回来
{app.id}
{app.name}
;
};
const wrapper=mount（）；
expect（wrapper.find（'[data testid=“app id”]'）.text（））.toBe（'mocked id'）；
expect（wrapper.find（'[data testid=“app name”]'）.text（））.toBe（'mocked name'）；

---

其中，

data testid

属性是其他测试库使用的约定，尤其适用于此类灰盒测试。

是否使用测试框架？使用它渲染组件。您不能调用它，因为它不是一个常规函数。@EstusFlask，测试选择器的唯一方法是使用组件？？我在开玩笑。所以，对于这个，我也可以使用虚拟组件，对吗？这类测试是否会被考虑覆盖？谢谢。您可以在组件外部公开

（state）=>state.appState.app

选择器函数，以便与React部件分开重用或测试。应该在组件内部调用的是

useSelector

hook

getApp

是所谓的自定义钩子，是的，它需要使用虚拟组件进行测试。好的，将创建虚拟组件-如何测试选择器的返回值？它是一个功能组件-无法测试其中的任何状态/值…答案应显示如何测试选择器或应如何测试选择器？答案很清楚，（state）=>state.appState.app函数是一个选择器，可以单独提取和测试，但因为它很简单，所以可以与getApp一起测试。更清楚地说，useSelector钩子中的选择器不能直接测试，它需要重构代码才能进行测试。如果你对这篇文章有什么特别的困难，你可以问一下。谢谢你的投票，谢谢你的详细回答，埃斯图。您是否尝试使用

resultFunc

单独测试选择器？

const Dummy = () => {
  const app = getApp();
  return <div>
    <div data-testid="app-id">{app.id}</div>
    <div data-testid="app-name">{app.name}</div>
  </div>;
};

const wrapper = mount(<Dummy/>);
expect(wrapper.find('[data-testid="app-id"]').text()).toBe('mocked id');
expect(wrapper.find('[data-testid="app-name"]').text()).toBe('mocked name');