reactjs - 如何对 fetch 完成后呈现的 React 组件进行单元测试？

Question

我是 Jest/React 初学者。 Jest it我需要等到所有 promise 都已执行后再实际检查。

我的代码与此类似:

export class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { /* Some state */ };
    }

    componentDidMount() {
        fetch(some_url)
            .then(response => response.json())
            .then(json => this.setState(some_state);
    }

    render() {
        // Do some rendering based on the state
    }
}

安装组件后，render()运行两次:一次在构造函数运行之后，一次在 fetch() 之后(在 componentDidMount() 中)完成并且链式 promise 完成执行)。

我的测试代码与此类似:

describe('MyComponent', () => {

    fetchMock.get('*', some_response);

    it('renders something', () => {
        let wrapper = mount(<MyComponent />);
        expect(wrapper.find(...)).to.have.something();
    };
}

无论我从 it 返回什么，它在第一次 render() 之后运行但在第二次之前执行。例如，如果我返回 fetchMock.flush().then(() => expect(...)) ，返回的 Promise 在第二次调用 render() 之前执行(我相信我能理解为什么)。

如何才能等到第二次render()在运行之前调用expect() ？

Answer 1

我会分开关注点，主要是因为更容易维护和测试。我不会在组件内部声明 fetch，而是在其他地方执行此操作，例如在 redux 操作中(如果使用 redux)。

然后分别测试获取和组件，毕竟这是单元测试。

对于异步测试，您可以在测试中使用 done 参数。例如:

describe('Some tests', () => {
  fetchMock.get('*', some_response);

  it('should fetch data', (done) => { // <---- Param
    fetchSomething({ some: 'Params' })
      .then(result => {
        expect(result).toBe({ whatever: 'here' });
        done(); // <--- When you are done
      });
  });
})

您可以通过发送 Prop 中加载的数据来测试您的组件。

describe('MyComponent', () => {

  it('renders something', () => {
    const mockResponse = { some: 'data' };
    let wrapper = mount(<MyComponent data={mockResponse}/>);

    expect(wrapper.find(...)).to.have.something();
  });
});

在测试时，您需要保持简单，如果您的组件难以测试，那么您的设计就有问题;)