Question

我开始对React应用程序进行单元测试，我面临的挑战之一是确定组件正确安装所需的所有道具。是否有任何实用程序可以检查成功安装组件需要什么？此外，这些道具的数据类型可以恰当地初始化它们以进行组件渲染。

就像我的一个组件是使用spread {...props}运算符从父级获取道具。父母也使用传播操作符获取这些，然后添加一些额外的道具并将其传递给孩子。这让我很难获得组件所需的所有道具。有没有合法的方法来获取道具清单？

Answer 1

对于unit testing，您的父组件只能检查它添加到其子组件的属性是完全可以的。因为在单元测试中，您只需测试特定单元的功能。在这种情况下，您要检查您的父组件是否将所有需要的属性添加到其子组件并传递它所需的所有其他属性（无论它们是什么）。

同时测试您的子组件并检查其功能。

要检查两个或多个组件是否正确相互影响，您应该使用E2E/functional testing。在这种情况下，您将测试工作应用程序的一些功能部分。如果您在组件交互方面遇到一些问题，它们会弹出。

Answer 2

解决此问题的一种方法是使用装饰器。我知道他们还没有完全在这里，现在你可能需要使用打字稿等。但它是所述问题的解决方案，允许您装饰并将任何所需信息附加到组件的属性。以下是打字稿中的示例：

@PropContainer("Textbox")
export class TextboxProps
{
    @Prop(PropertyType.Mandatory)
    public propA: string;

    @Prop(PropertyType.Optional)
    public propB?: number;
}

Answer 3

一项有趣的任务。

我开始于：

import React from "react";
import * as PropTypes from "prop-types";

function Hello(props) {
  const { boo, foo } = props;
  return (
    <div>
      <h1>{boo}</h1>
      <h2>{foo}</h2>
    </div>
  );
}

Hello.propTypes = {
  boo: PropTypes.string,
  foo: PropTypes.number
};

export default Hello;

我发现这篇文章 https://blog.jim-nielsen.com/2020/proptypes-outside-of-react-in-template-literal-components/ 具有以下功能：

/**
 * Anytime you want to check prop types, wrap in this
 * @param {function} Component
 * @param {Object} propTypes
 * @return {string} result of calling the component
 */
function withPropTypeChecks(Component) {
  return props => {
    if (Component.propTypes) {
      Object.keys(props).forEach(key => {
        PropTypes.checkPropTypes(
          Component.propTypes,
          props,
          key,
          Component.name
        );
      });
    }
    return Component(props);
  };
}

然后我又写了一篇：

const getPropsInfo = (component) => {
  const result = {};
  const mock = Object.keys(component.propTypes).reduce(
    (acc, p) => ({ ...acc, [p]: Symbol() }),
    {}
  );
  const catching = (arg) => {
    const [, , prop, type] = `${arg}`.match(
      /Warning: Failed (.*) type: Invalid .* `(.*)` of type `symbol` supplied to.*, expected `(.*)`./
    );
    result[prop] = type;
  };
  const oldConsoleError = console.error.bind(console.error);
  console.error = (...arg) => catching(arg);
  withPropTypeChecks(component)(mock);
  console.error = oldConsoleError;
  return result;
};

我选择 Symbol 作为不太期望的类型。

并称之为：

const propsInfo = getPropsInfo(Hello);
console.log(propsInfo);

结果我得到：{boo: "string", foo: "number"}

P.S.：我没有在其他类型上测试过。纯娱乐！ :)

React JS：如何获得所有道具组件的期望？

3 个答案: