Javascript 快照测试反应功能组件UseSelector挂钩

我正在尝试快照测试我的组件，该组件正在使用

useSelector

hook。我正在使用redux模拟商店来模拟商店。但是，由于

react redux

将我的组件转换为以下内容

<Provider>
       <UNDEFINED
        store={
           Object {
             "clearActions": [Function],
             "dispatch": [Function],
             "getActions": [Function],
             "getState": [Function],
             "replaceReducer": [Function],
             "subscribe": [Function],
          }
        }
        />
       <div>
         <h2 />
         <p />
       </div>
     </div>
     </Provider>

如何重写测试以使其正常工作

下面是我的功能组件

import { useSelector } from 'react-redux';
import React from 'react';
import Card from './Card';

const CardList = () => {
  const robots = useSelector((state) =>
    state.requestRobots.robots.filter(
      (robot) => {
        return robot.name
          .toLowerCase()
          .includes(state.searchRobots.searchField.toLowerCase());
      },
      {
        error: state.requestRobots.pending,
      }
    )
  );

  return (
    <div>
      {robots.map((robot) => {
        return (
          <Card
            id={robot.id}
            name={robot.name}
            email={robot.email}
            key={robot.id}
          />
        );
      })}
      ;
    </div>
  );
};

export default CardList;

从'react redux'导入{useSelector}；
从“React”导入React；
从“./卡”导入卡；
常量卡片列表=（）=>{
常量机器人=使用选择器（（状态）=>
state.requestRobots.robots.filter(
（机器人）=>{
返回robot.name
.toLowerCase（）
.includes（state.searchRobots.searchField.toLowerCase（））；
},
{
错误：state.requestRobots.pending，
}
)
);
返回(
{robots.map（（robot）=>{
返回(
);
})}
;
);
};
导出默认卡片列表；

这是我的测试

import React from 'react';
import { shallow } from 'enzyme';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store'
import { CardList } from './CardList';
import '../../setUpTest';

const mockRobots = [
  {
    id: 1,
    name: 'robocop',
    email: 'robocop@gmail.com',
    key: 1,
  },
];

const mockStore = configureStore()
let store

it('expect to render Card component', () => {
  store = mockStore(mockRobots)
  // const cardlist = shallow(<Provider<CardList/></Provider>, mockRobots);
  expect(
      <Provider>
        <CardList store={store}/>
      </Provider>
  ).toMatchSnapshot();
});

从“React”导入React；
从“酶”导入{shall}；
从'react redux'导入{Provider}；
从“redux模拟存储”导入配置存储
从“/CardList”导入{CardList}；
导入“../setUpTest”；
常数=[
{
id:1，
名称：“机器人足球”，
电邮:'robocop@gmail.com',
重点:1,，
},
];
const mockStore=configureStore（）
存放
它（'expect to render Card component'，（）=>{
商店=模拟商店（模拟机器人）
//const cardlist=shallow（您需要将
存储
传递给
提供者

<Provider store={store}>
   <CardList />
</Provider>



Provider
是React上下文的包装器。请查看文档以了解此机制的工作原理