Question

有人对如何对该组件进行单元测试有任何建议吗？我正在努力研究如何正确模拟getFoo，然后在运行测试之前等待其承诺解决。我目前正在使用Jest尝试执行此操作。

import { getFoo } from "../../../api/fooApi";

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
      isLoaded: false
    };
  }

  componentDidMount() {
    getFoo(this.props.id).then(
      result => {
        this.setState({
          isLoaded: true,
          foo: result
        });
      },
      error => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    );
  }

  render() {
    const { isActive, isLoaded, foo } = this.state;

    if (!isLoaded) return <Spinner />;

    return (
      <Accordion styled>
        <Accordion.Title
          active={isActive}
          onClick={() => {
            this.setState({ isActive: !isActive });
          }}
        >
          <Icon name="dropdown" />
          {foo}
        </Accordion.Title>
        <Accordion.Content active={isActive}>
          {foo}
        </Accordion.Content>
      </Accordion>
    );
  }
}

这是实际方法。

export async function getFoo(id) {
  const res = await fetch(`/api/foo/${id}`);
  if (res.status !== 200) throw Error;
  return res.json();
}

Answer 1

我将使用class MyList<T> : IMyEnumberable<T> { public T GetDefault() { return default;// a default expression introduces a null value when 'T' is a non-nullable reference type } }，它可以让您模拟一个API响应，here's a post detailing how to use it，类似于以下内容：

nock

在componentDidMount内部模拟API调用方法

1 个答案: