快照测试 React 功能组件 useSelctor hook

Question

我正在尝试对使用 useSelector 挂钩的组件进行快照测试。我正在使用 redux-mock-store 来模拟商店。但是，由于来自 react-redux

的 Provider 组件，我的测试失败了

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

<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;

这是我的测试

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();
});

Answer 1

您需要将 store 传递给 Provider。

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

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

快照测试 React 功能组件 useSelctor hook

snapshot testing react functional component useSelctor hook

javascript

reactjs

enzyme

react-redux