时间戳

首页 > 解决方案 > 当 Promise 被拒绝时，使用 react-testing-library 和 jest 的 ReactJS 单元测试用例

reactjs - 当 Promise 被拒绝时，使用 react-testing-library 和 jest 的 ReactJS 单元测试用例

问题描述

我是 React 和 react-testing-library 的新手。我有以下组件，当 Promise 在服务调用中被拒绝时，我在编写单元测试用例时遇到问题：

const Hotels = () => {

const [names, setNames] = useState([]);

useEffect(() => {
    ServiceComponent.get('http://example.com').then((response)=>{
        setNames(response?.['names']?? null);
    }).catch(err =>{
        console.error(err);
    });
}, []);


return(
   <Names names={names}/>
)
}

export default Hotels;

我能够模拟 ServiceComponent 并测试成功的 Promise。但是，我无法为 catch 块编写测试用例：

catch(err =>{
        console.error(err);
    })

我试过使用

ServiceComponent.get.mockRejectedValue(new Error("error"));

但这也无济于事。

我是新来的反应和它的测试用例。

标签： reactjsfrontendreact-testing-library

解决方案

有一种方法可以通过创建一个mock function引发错误的方法来测试 catch 块，因为在 catch 块中，您没有向 UI 显示任何错误，例如显示发生了某些错误的弹出窗口/模式，您将不得不传递一个模拟函数，该函数将在调用 catch 块时触发，您可以通过检查是否触发了模拟函数来验证是否调用了 catch 块

import { get } from './service';
jest.mock('./service')

describe("<App />", () => {

  it("check if catch function is called",() => {
    const mockError = jest.fn();
    get.mockImplementation(() => {
      return new Promise((resolve, reject) => {
        mockError();
        throw new Error("its a error");
      })
    })
    render(<App />);
    expect(mockError).toBeCalledTimes(1);
  })
});

推荐阅读