小编Jim*_*mmy的帖子

我正在尝试测试一个 React 组件并确保当它的按钮被点击时，正确的方法被调用。但是，当我尝试运行我的测试并尝试监视该方法时，我收到以下消息：

错误：无法监视原始值；给定的未定义

如何测试单击按钮时是否调用了正确的方法？谢谢！

示例组件.jsx：

import * as React from 'react';

const SampleComponent = () => {
  const sampleMethod = () => {
    console.log('hello world');
  };

  return <button onClick={sampleMethod} type="button">Click Me</button>;
};

export default SampleComponent;

sampleComponent.test.jsx：

import * as React from 'react';
import { shallow } from 'enzyme';
import SampleComponent from './sample';

test('testing spy', () => {
  const spy = jest.spyOn(SampleComponent.prototype, 'sampleMethod');
  const wrapper = shallow(<SampleComponent />);
  wrapper.find('button').simulate('click');
  expect(spy).toHaveBeenCalled();
});

如何编写测试以确保该方法reloadFn确实重新加载了窗口？我找到了这个资源，但不清楚在给定函数中发生窗口重载时编写测试时如何期望窗口重载。谢谢您的帮助！

const reloadFn = () => {
  window.location.reload(true);
}

我正在尝试使用来测试axios get请求axios-mock-adapter，以便在状态不等于200的情况下引发错误。但是，当我执行测试时（请参阅参考资料api.test.js），我得到以下消息：

错误：expect（function）.toThrowError（未定义）

预期函数抛出错误。但是它什么也没扔。

如何axios-mock-adapter使用get和handleResponse方法测试以确保引发了错误？谢谢！

api.test.js：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const handleResponse = (response) => {
  if (response.status !== 200) {
    throw new Error('foo');
  } else {
    return response.data;
  }
};

const get = async (url) => {
  const response = await axios.get(url, {withCredentials: true});
  return handleResponse(response);
};

test('testing that, when making a get request to the appropriate url, an error is thrown ' +
     ' …

相关代码沙盒

我一直在我的应用程序中看到一种模式，当我创建圆形 div 时，它们有时在尺寸较小时看起来有边缘。请参阅下面突出显示的代码的图像。为什么会发生这种情况，有没有办法解决？谢谢。

索引.tsx：

import * as React from "react";
import { render } from "react-dom";
import "./styles.css";

const App = () => (
  <>
    <div className="container">
      <div className="one" />
      <div className="one" />
      <div className="one" />
    </div>
    <div className="container">
      <div className="two" />
      <div className="two" />
      <div className="two" />
    </div>
    <div className="container">
      <div className="three" />
      <div className="three" />
      <div className="three" />
    </div>
    <div className="container">
      <div className="four" />
      <div className="four" />
      <div className="four" />
    </div>
  </>
);

render(<App />, document.getElementById("root"));

样式.css： …

代码沙盒在这里

我正在尝试使用来自父组件的 ref 来侦听子组件中的某些 ref 事件，其中 ref 使用React.forwardRef. 但是，当我引用 时，我在我的子组件中收到了 linting 投诉ref.current，说明：

类型 'Ref' 上不存在属性 'current'。类型“（实例：HTMLDivElement）=> void”上不存在属性“当前”

我应该如何引用React.forwardRef组件中的 ref ？谢谢。

索引.tsx：

import * as React from "react";
import ReactDOM from "react-dom";

const Component = React.forwardRef<HTMLDivElement>((props, ref) => {
  React.useEffect(() => {
    const node = ref.current;
    const listen = (): void => console.log("foo");

    if (node) {
      node.addEventListener("mouseover", listen);
    }
    return () => {
      node.removeEventListener("mouseover", listen);
    };
  }, [ref]);

  return <div ref={ref}>Hello World</div>;
});

export default …

我有一个组件可以接受 Reactchildren作为节点或节点数组。我希望能够检测是否children是节点数组，但出现以下 Typescript 错误：

\n

TS2339：类型“string |”上不存在属性“length” 数量 | 真实 | {} | ReactElement<任意，字符串| ((props: 任意) => ReactElement<任意, 任意> | null) | (new (props:any) => Component<any,any,any>)> | ... 47 更多... | （ReactNode[] 和 ReactPortal）\'。\xc2\xa0\xc2\xa0 类型“number”上不存在属性“length”。

\n

Typescript 有没有办法检测是否children有长度？谢谢。

import React from \'react\';\n\ninterface Props {\n  children: React.ReactNode | React.ReactNode[];\n}\n\nconst SampleComponent: React.FC<Props> = ({ children }) => {\n  if (children && children.length) {\n    return children.map((child) => (\n      <div>{child}</div>\n    ));\n  }\n\n  return children;\n};\n\nexport default …

我想断言，当一个函数使用 获取我的 redux 状态值时store.getState()，它会根据该状态的条件执行各种操作。我如何能够断言/模拟我希望使用该store.getState()方法进行某些测试的状态值？谢谢。

示例函数.js：

import { store } from './reduxStore';

const sampleFunction = () => {
  const state = store.getState();
  let result = false;
  if (state.foo.isGood) {
    result = true;
  }

  return result;
};

export default sampleFunction;

sampleFunction.test.js：

import sampleFunction from './sampleFunction.js';

test('sampleFunction returns true', () => {
  // assert that state.foo.isGood = true
  expect(sampleFunction()).toBeTruthy();
});

Antd在这里说，内联 javascript 应该在较少的javascriptEnabled: true选项中启用。但是，由于安全问题，从 3.0.0 版起，此选项已被 Less 弃用，因为它容易受到代码注入的影响，此处提到（搜索“启用内联 JavaScript（已弃用）”）和此处。

试图用 Ant 解决这个问题似乎是不切实际的，因为我们可能需要为 less 中使用的每个新的内联 javascript 函数创建一个新插件，并且不清楚有多少实例以及它有多复杂。

谷歌搜索显示围绕这个主题的讨论很少。Ant 是否有解决此问题或可能的变通方法的前景？其他开发人员如何处理这个问题，或者他们只是忽略它？谢谢。

我想创建一个 React TypeScript 组件，它的 props 是两个不同接口的联合。但是，当我这样做时，我收到警告：

TS2339: Property 'color' does not exist on type 'PropsWithChildren<Props>'

如何创建一个包含两个不同 prop 接口的联合的 React TypeScript 组件，同时能够解构这些 props？谢谢！

样本组件.tsx：

import * as React from 'react';

interface SamplePropsOne {
  name: string;
}

interface SamplePropsTwo {
  color: string;
}

type Props = SamplePropsOne | SamplePropsTwo;

const SampleComponent: React.FC<Props> = ({ color, name }) => (
  color ? (
    <h1>{color}</h1>
  ) : (
    <h1>{name}</h1>
  )
);

export default SampleComponent;

我正在尝试编写一个断言使用Async / Await和axios引发特定类型错误的测试。但是，当我运行测试时，得到以下信息。为什么开玩笑不能正确地拒绝我的承诺？谢谢！

错误：expect（receives）.rejects.toThrow（）

预期收到Promise拒绝，而是解析为值
{“ data”：“ response”，“ status”：404}

api.js：

import axios from 'axios';
import SpecialError from './specialError.js';

const get = async () => {
  try {
    const response = await axios.get('sampleUrl', { withCredentials: true });
    return response;
  } catch (error) {
    throw new SpecialError(error);
  }
};

export default get;

specialError.js：

export default class SpecialError extends Error {
  constructor() {
    super();
    this.isSpecialError = true;
  }
}

api.test.js：

import axios from 'axios';
import get from './api';
import SpecialError from './specialError.js';

test('testing …