Reactjs 如何测试JavaScript中包含提取调用的部分代码

假设我有以下代码（来自CreateReact应用程序）：

如何测试componentDidMount并获得100%的代码覆盖率

我用过，但是，有更好的选择吗

---

谢谢。

您可以将

fetch

作为道具传递到组件中，这样在测试中您就可以通过模拟版本的

fetch

示例类：

class Foo extends React.Component {
  componentDidMount () {
      const { fetch } = this.props
      ... your fetch code ... 
      }
    }
}

当您使用组件时，您将传入实际获取：

const fetch = window.fetch // or however you're importing it

const UsesFoo = () => (
 <Foo fetch={fetch} />
)

const fetch=window.fetch//或以任何方式导入它
常量usesfo=（）=>(
)

现在进行测试：（假设是玩笑和浅显渲染）

const fakeFetch=jest.fn（）
它（'Should mock fetch'，（）=>{
常数res=浅（）
})

您可以将

fetch

作为道具传递到组件中，以便在测试中可以传递模拟版本的

fetch

示例类：

class Foo extends React.Component {
  componentDidMount () {
      const { fetch } = this.props
      ... your fetch code ... 
      }
    }
}

当您使用组件时，您将传入实际获取：

const fetch = window.fetch // or however you're importing it

const UsesFoo = () => (
 <Foo fetch={fetch} />
)

const fetch=window.fetch//或以任何方式导入它
常量usesfo=（）=>(
)

现在进行测试：（假设是玩笑和浅显渲染）

const fakeFetch=jest.fn（）
它（'Should mock fetch'，（）=>{
常数res=浅（）
})

fetch

您所指的是基于应用程序的创建项目中的全局项目。事实上，afaik，他们在内部使用同构获取来公开这个（作为遗留浏览器的多边形填充）。由于CreateReact应用程序附带jest，所以在开始测试之前，您可以使用jest模拟全局

使用标准的

setupTests.js

模块模拟任何全局变量，如fetch

您可以使用

全局

名称空间来访问/模拟它们

global.fetch = jest.fn();

---

fetch

您所指的是基于应用程序的项目中的全局项目。事实上，afaik，他们在内部使用同构获取来公开这个（作为遗留浏览器的多边形填充）。由于CreateReact应用程序附带jest，所以在开始测试之前，您可以使用jest模拟全局

使用标准的

setupTests.js

模块模拟任何全局变量，如fetch

您可以使用

全局

名称空间来访问/模拟它们

global.fetch = jest.fn();

可能重复的可能重复的感谢。我必须使用jest.fn（）.mockImplementation并创建2个window.Response，其中一个我必须返回并包含Promise.reject以覆盖catch（）案例。你能用我的评论来改进你的答案吗？谢谢，谢谢。我必须使用jest.fn（）.mockImplementation并创建2个window.Response，其中一个我必须返回并包含Promise.reject以覆盖catch（）案例。你能用我的评论来改进你的答案吗？谢谢。我也喜欢这种“依赖注入”。。。谢谢@Marcafonso没问题：）如果你喜欢这个解决方案，请随意投票。我也喜欢这种“依赖注入”。。。谢谢@Marcafonso没问题：）如果你喜欢这个解决方案，请随意投票。