小编pra*_*ami的帖子

我正在开发一个react-native项目,我正在尝试使用axios库从api中获取数据并显示数据.所以,我的应用程序首先显示一个启动画面,然后需要导航到由选项卡组成的页面.选项卡将包含来自api的数据.

所以,我试图在我的主页中初始化我的商店,这是在启动画面之后.我将我的减速机和动作分别定义在2个不同的文件中.

App.js文件

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import SplashScreen from './src/components/SplashScreen';
import HomeScreen from './src/components/HomeScreen';

const Navigation = StackNavigator({
    Splash: {
      screen: SplashScreen
    },
    Home: {
      screen: HomeScreen
    }
})

export default Navigation;

我的SplashScreen组件:

import React from 'react';
import { StyleSheet,
         Text,
         View,
         } from 'react-native';

export default class SplashScreen extends React.Component {
  static navigationOptions = {
    header: null
  }

  componentWillMount() {
    setTimeout(() => {
      this.props.navigation.navigate('Home') …

我是Jest测试的新手，我正在看一些示例，这些例子说明了如何在Jest for React组件中编写测试用例。我遇到了Snapshot测试，并试图了解它的实际含义。我从网上看到的是 “快照测试是一种通过生成输出的Json表示来声明给定测试结果的方法。” 因此，到目前为止，我对Snapshot测试有2个疑问：

1）假设我们有一个具有简单段落的简单组件。因此，如果我尝试使用Snapshot测试对其进行测试，它将如何将其转换为组件的JSON表示形式？什么时候有用？

2）我遇到了一个例子，看起来像：

    Wrapper = shallow(<First_Component />);

   it("displays the result", () => {
      const test = Wrapper.find(Second_Component).length;
      expect(test).toMatchSnapshot();
   });

因此，我对上述代码的疑问是toMatchSnapshot（）函数在这里如何工作？

我有一个 redux-form 用于从用户接收数据并将其发布到后端 API 服务器。将数据发布到服务器时，我想为发布到的每组数据生成一个唯一的 id服务器，以便我稍后可以使用该 ID 来引用该特定集并将其显示给用户。那么，如何在将一组数据发布到服务器时自动生成该唯一 ID？

我的redux-form的代码如下：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { createPosts } from '../actions/posts_action';

class CreatePost extends Component {
  constructor() {
    super();
    this.state = {
      selectValue : ''
  };
  this.handleChange = this.handleChange.bind(this);
  this.renderCategory = this.renderCategory.bind(this);
}

  renderField(field) {
      return(
        <div className="title-design">
            <label className="label-design"> {field.label} </label>
            <input
              type="text"
              className="title-input"
              {...field.input}
            /> …

我正在尝试测试一个在 React 中具有 onClick 函数的按钮。我的按钮看起来像这样：

<button 
          id='emailButton'
          className={classes.sceContactHeaderButton}
          data-toggle='collapse'
          data-target='#editEmailContact'
          onClick={props.handleToggle}
          tabIndex={0}
          title={(props.email.isOpen) ? 'Close Section' : 'Open Section'}
        >
          <span>{(props.email.isOpen) ? 'Close' : 'Details'}</span>
          <i className={(props.email.isOpen) ? 'fa fa-angle-up' : 'fa fa-angle-down'} />
        </button>

我对 onClick() 方法的测试是：

  it('check if the onClick method of the button exists', () => {
        wrapper.find('#emailButton').children().at(0).prop('onClick')();
    });

但我收到一条错误消息：

TypeError: wrapper.find(...).children(...).at(...).prop(...) is not a function

我究竟做错了什么？任何帮助是极大的赞赏。

我的React组件中有一个条件渲染块，其定义为：

 {(props.email.primary.isPending) ?
          <PendingComponent emailAddress={props.email.primary.pendingEmail} />
          :
          <SecondaryEmailContact
            state={props.email.secondary}
            retrieveInputData={props.retrieveInputData}
            handleSecondaryEmailToggle={props.handleSecondaryEmailToggle}
            handleDelete={props.handleDelete}
            handleSubmitContact={props.handleSubmitContact}
            refs={props.refs}
          />
        }

我写了一个测试用例，如下所示：

it('renders the EditEmailContact component', () => {
        wrapper=mount(<EditEmailContact 
          email={emailState}
          handleSecondaryEmailToggle={handleSecondaryEmailToggleFn}
          retrieveInputData={retrieveInputDataFn}
          handleDelete={handleDeleteFn}
          handleSubmitContact={handleSubmitContactFn} />);
    });
  });

因此，在我的测试结果中，该行显示未定义条件渲染的语句的行。那么，如何测试条件渲染？

我有一个用于渲染复选框的 React 组件。组件代码有一个如下所示的函数：

const generateCheckboxes = (array, filterType) => {
        return array.map((filter, i) => {
            if (!isNullOrUndefined(filter) && filter !== "") {
                const applied = props.appliedFilterList[filterType].includes(filter);
                console.log("yes", props.appliedFilterList[filterType]);
                return (
                    <Row key={i} noLine={i === 0}>
                        <Checkbox checked={applied} onClick={() => props.toggleFilter(filterType, filter)}>
                            {filter}
                        </Checkbox>
                    </Row>
                );
            }
            return false;
        });
    };

渲染函数如下所示：

return (
        <div>
            <div>Access</div>
                {generateCheckboxes(props.accessFilters, "access")}

            <div>Bandwidth</div>
                {generateCheckboxes(props.bandwidthFilters, "bandwidth")}
        </div>   
    );

现在我正在尝试为这个组件编写一个测试，我只是在 Enzyme 的浅层方法中传递该组件以及 props。我只想通过在测试用例中传递一些模拟数据来检查该组件是否正确呈现。测试看起来像：

import React from "react";
import { mount, shallow } from "enzyme";
import Checkbox from …