小编Cha*_*wis的帖子

我正在测试 React 的错误边界，并在 Codecov 中注意到我的 Sentry 函数的特定部分尚未经过测试。

我曾尝试使用 jest.mock("@sentry/browser") 并嘲笑 Sentry，但是，似乎无法测试这些行。Sentry 导入正确模拟但不是scope.

这是我尝试嘲笑的一个例子。

import * as Sentry from "@sentry/browser"
const mock_scope = jest.fn(() => {
  return { setExtras: null }
})
Sentry.withScope = jest.fn().mockImplementation(mock_scope)

我正在尝试使用 Firebase Auth 模拟器编写笑话测试并继续收到以下 CORS 错误。

console.error
    Error: Headers X-Client-Version forbidden
        at dispatchError (/Users/me/my-project/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:62:19)
        at validCORSPreflightHeaders (/Users/me/my-project/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:99:5)
        at Request.<anonymous> (/Users/me/my-project/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:367:12)
        at Request.emit (events.js:315:20)
        at Request.onRequestResponse (/Users/me/my-project/node_modules/request/request.js:1059:10)
        at ClientRequest.emit (events.js:315:20)
        at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:641:27)
        at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)
        at Socket.socketOnData (_http_client.js:509:22)
        at Socket.emit (events.js:315:20) undefined

测试非常简单：

import { renderHook, act } from "@testing-library/react-hooks"
import faker from "faker"
import { useAuth, FirebaseProvider, firebase } from "./index"


const wrapper = ({ firebase, children }) => {
  return <FirebaseProvider firebase={firebase}>{children}</FirebaseProvider>
}

const createUser = …

我目前正在使用 react-testing-library 并且似乎无法弄清楚如何测试组件的 setState 。

在以下示例中，我尝试根据 API 中的数据测试加载的项目数是否正确。稍后将扩展它以测试诸如项目之间的交互之类的事情。

成分：

...

componentDidMount() {
    this.getModules();
}

getModules () {
    fetch('http://localhost:4000/api/query')
    .then(res => res.json())
    .then(res => this.setState({data : res.data}))
    .catch(err => console.error(err))
}

...

render() {
  return(
      <div data-testid="list">
          this.state.data.map((item) => {
              return <Item key={item.id} data={item}/>
          })
      </div>
  )
}

测试：

...

function renderWithRouter(
    ui,
    {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {},) {
    return {
        ...render(<Router history={history}>{ui}</Router>),
        history,
    }
}

...

test('<ListModule> check list items', () => {
     const data = …

新的 Relay hooks API 将重点放在“render-as-you-fetch”的 React 模式上，到目前为止我真的很喜欢这个。继电器useQueryLoader和usePreloadedQuery钩子使得大多数时候的实现都非常简单。

然而，我正在努力寻找一个关于如何在路由方面实现此模式的良好模式。我发现有两种典型情况使得此方法难以实施。

情况一：

1. 用户加载主页 ( example.com/)
2. 用户深入应用程序树的一部分 ( example.com/settings/user/security/authentication)
3. 然后，他们单击链接将其带到应用程序中完全不相关的部分 ( example.com/blog/post-1)

情况B：

1. 用户使用 URL 栏转到应用程序的某个部分，而不是使用链接 ( example.com/blog/post-1)

这些示例有两种结果，即用户example.com/blog/post-1通过嵌套子组件或直接通过 URL 访问路由 ( )。因此，我们为此路线获取数据的方式必须支持这两种方法。

我假设我们希望尽早触发此路由的获取，因此当用户单击链接或我们在页面加载时检测到此路由时。

我可以想到三个想法来实现这一点：

1. 使用fetch-then-render模式代替（例如 Relay 的useLazyLoadQueryhook）
2. 存储一个函数（例如在上下文中），并让该路由的所有链接在其onClick方法中调用该函数，并且useEffect如果没有加载数据，或者查询的引用已过时，则该路由也有一个调用该函数的函数
3. 使用render-as-you-fetch函数但实现它们来fetch-then-render支持

方法一：

这违背了模式的目的render-as-you-fetch，但是这是一种简单的方法，并且更有可能是实现获取路由数据的“更干净”的方法。

方法2：

在实践中我发现这很难实现。通常，转到路由的链接与组件渲染路由所在的组件树部分断开连接。使用上下文意味着我必须管理loadData特定路线的不同功能（当涉及变量等时，这可能会很棘手）。

方法三：

这就是我目前一直在做的事情。在实践中，它通常会导致能够将加载数据函数传递到附近的组件，但是，如果路由由断开连接的组件、URL 或页面重新加载等访问，则组件会回退到调用加载钩子中的数据函数useEffect。

有没有人对他们如何实现这一点有任何其他想法或例子？

我发现当添加了最小/最大值时yup会忽略该字段。nullable

myValue: string().nullable().min(10, "This value must be minimum of 10 characters.")`.

回购协议中存在一个已关闭的问题，但没有给出任何解决方案。

这是预期的行为吗？如果是，是否有任何解决方法？我可以在不使用 yup 的情况下检查值的长度并引发错误，但更愿意将其全部保留在 yup 模式验证中。