Question

我在连接的组件中使用React-Redux，我想测试是否渲染了特定组件。为了使该组件呈现2，必须正确：

ListUsers必须为空数组
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属性，以便我的组件通过。 “我还需要该道具来进行另一组测试，该测试需要数据，而我需要对其进行模拟。

有人可以指导我进行此操作吗？谢谢你。

Answer 1

您要做的是在将组件连接到Redux之前将其导出，并手动传递其所需的所有道具：

import 'package:flutter/material.dart';
import '../pop_up_menu/pop_up_menu.dart';

var levelsData = [];

class ListTile extends StatefulWidget {
  @override
  ListTileState createState() => new ListTileState();
}

class ListTileState extends State<ListTile> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) => Card(
            child: SingleChildScrollView(
              child: StuffInTiles(
                levelsData[index]['user_id'],
                levelsData[index]['price'],
              ),
            ),
          ),
      itemCount: levelsData.length,
    );
  }
}

class StuffInTiles extends StatelessWidget {
  final String userId;
  final double price;

  StuffInTiles(this.userId, this.price);

  @override
  Widget build(BuildContext context) {
    List<dynamic> _getChildren() {
      List<Widget> children = [];
      levelsData.forEach(
        (element) {
          if (price.toString() == element['price'].toString()) {
            children.add(ListTile(
                title: Text("@" + element['price'].toString(),
                    style: TextStyle(color: Colors.lightGreen)),
                subtitle: Text(
                    "Created on 01 Jun 2018 at 06:24AM \n when price was " +
                        element['price'].toString()),
                trailing: PopUpMenu()));
          }
        },
      );
      return children;
    }
  }
}

现在，您可以在测试中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);。您可以创建道具并将其传递给组件，如下所示：

import { UsersOverviewScreen } form 'path/to/UsersOverviewScreen';

笑话/酶|测试中未定义Redux属性

1 个答案: