如何在Cypress中存根模块

Question

我正在尝试使用Cypress存根一个模块。这是我到目前为止尝试过的，但不起作用。

这是我的组件/页面的简短版本

// SomeComponent.jsx

import { useSomething } from './useSomething'

const SomeComponent = () => {
  // useSomething is a custom hook
  const { data, error } = useSomething()

  const renderData = () => {
    // map the data into an array of JSX elements
    return data.map(...)
  }

  return (
    <div>
      {renderData()}
    </div>
  )
}

export default SomeComponent

这是我定制的钩子的样子

// useSomething.js

import { useState } from 'react'
import { getData } from './db'

export const useSomething = () => {
  const [data, setData] = useState({})
  const [error, setError] = useState()

  useEffect(() => {
    getData().then(data => {
      setData(data)
    }).catch(err => {
      setError(error)
    })

    // ... some other unrelated code here
  }, [])

  return { data, error }
}

下面是getData的外观

// getData.js

export const getData = () => {
  const data = // some API call from external services

  return data
}

方法通过db.js（实际上是db/index.js）公开

// db.js

export * from './getData'

我正在尝试存根getData。js使e2e测试更加一致。这就是我所做的。

// something.spec.js

// I'm writing @src just to keep the code sample here short, it's the same file as the db.js I write above
import * as db from '@src/db'

...

// this is how I try to do the stubbing
cy.stub(db, 'getData').resolves(something)

...

上面的存根不起作用。运行测试时，对外部服务的API调用仍在进行。文档本身让我推断我应该这样写，但它不起作用。

Answer 1

可以在窗口上公开db

// useSomething.js

import { useState } from 'react'
import * as db from './db'

const { getData } = db;

if (window.Cypress) {     // only when testing
  window.db = db;
}

在测试中

cy.window().then(win => {
  cy.stub(win.db, 'getData').resolves(something);
})

或使用拦截存根API调用。