javascript - Jest/ enzyme |测试中未定义 Redux Prop

Question

我在连接的组件中使用 React-Redux，我想测试是否呈现特定组件。为了让该组件呈现 2 件事必须为真:

1. ListUsers 必须是空数组
2. securityMode 应该是基本的。

我已经在我的组件 Props 中定义了 securityMode，没问题。但是 ListUsers prop 是通过 redux 来的。

function mapStateToProps(state) {
  return {
    securityMode: securityModeSelector(state),
    usersList: state.users.list,
    usersListFetching: state.users.listFetching
  };
}

这是我应该测试的组件逻辑:

renderNoResourceComponent = () => {
    const { usersList, securityMode } = this.props;
    const { selectedGroups } = this.state;

    const filteredData = filterUserData(usersList, selectedGroups);
    if (filteredData && filteredData.length === 0 && securityMode === 'BASIC') {
      return (
        <div className="center-block" data-test="no-resource-component">
          <NoResource>
            .............
          </NoResource>
        </div>
      );
    }
    return null;
  };

这是我写的测试:

  describe('BASIC securityMode without Data', () => {
    const props = {
      securityMode: 'BASIC',
      listUsers: () => {},
      usersList: [] // This is the redux prop
    };
    it('should render NoResource component', () => {
      const wrapper = shallow(<UsersOverviewScreen {...props} />);
      const renderUsers = wrapper.find(`[data-test="no-resource-component"]`);
      expect(renderUsers).toHaveLength(1);
    });
  });

但我收到一条错误消息，提示未定义 userLists。我如何传递这个 redux Prop 以便我的组件通过。 `我还需要该 Prop 用于另一组测试，需要数据，我需要模拟这些数据。

有人可以指导我解决这个问题吗？谢谢..

Answer 1

你想要做的是在连接到 Redux 之前导出组件并手动传递它需要的所有 Prop :

export class UsersOverviewScreen extends Component {
  // ... your functions
  render() {
    return (
      // ... your componont
    );
  }
}

function mapStateToProps(state) {
  return {
    securityMode: securityModeSelector(state),
    usersList: state.users.list,
    usersListFetching: state.users.listFetching
  };
}

export default connect(mapStateToProps)(UsersOverviewScreen);

现在，在您的测试中，您可以导入 { UsersOverviewScreen } form 'path/to/UsersOverviewScreen';。您可以像这样创建 Prop 并将其传递给组件:

const mockUsersLists = jest.fn(() => usersList || []);
const wrapper = shallow(<UsersOverviewScreen {...props} usersList={mockUsersLists} />);