Reactjs 如何在React中测试上下文？

我已经实现了一个上下文：

import { createContext } from "react"

const initialState = {
    type: "info",
    visibile: true,
    setVisible: () => { },
    darkmode: false
}
const context = createContext(initialState)

export default context

但是当我想用它来测试时，我很困惑我应该测试什么以及如何准确地测试它？

我这样使用它

上下文文件

import React, { useState, createContext } from "react"

const initialState = {
    type: "info",
    visibile: true,
    darkmode: false
}

export const Context = createContext()

export function Provider({ children }) {
  const [state, setState] = useState(initialState)

  // using like this gives me ability to provide
  // a function that can change the context data
  const setVisible = val => setState({ ...state, visibile: val })

  return (
    <Context.Provider value={{ ...state, setVisible }}>
      {children}
    </Context.Provider>
  )
}

import React，{useState，createContext}来自“React”
常量初始状态={
输入：“信息”，
可视性：是的，
暗模式：false
}
export const Context=createContext（）
导出函数提供程序（{children}）{
常量[状态，设置状态]=使用状态（初始状态）
//这样使用使我能够提供
//可以更改上下文数据的函数
const setVisible=val=>setState（{…state，visible:val}）
返回(
{儿童}
)
}

在提供程序中（使用FunctionalComponent）

从“React”导入React；
从“./context.jsx”导入{Provider as ContextProvider}
从“./Consumer”导入某些组件
从“/Consumer2”导入某些组件2
导出默认函数App（）{
返回(
废话废话废话废话废话废话废话废话废话
);
}

在耗电元件中（使用FunctionalComponent）

import React，{useffect，useContext}来自“React”
从“./Context”导入{Context}
导出默认函数SomeComponent（）{
const contextData=useContext（上下文）
useffect（（）=>{
常量计时器=设置间隔（（）=>{
contextData.setVisible（！contextData.visibile）
}, 1000)
return（）=>clearInterval（计时器）
}，[contextData]）
返回(
消费者1（消费和改变）
{JSON.stringify（contextData，null，4）}
)
}

---

假设你想知道如何使用上下文

那么，你的答案改善了上下文，但在我的问题中，我说的是单元测试。但是你的消费者如何从提供者那里获得价值呢？

import React from "react";
import { Provider as ContextProvider } from './context.jsx'
import SomeComponent from './Consumer'
import SomeComponent2 from './Consumer2'

export default function App() {
  return (
    <ContextProvider>
     <div>
       <SomeComponent />
       blah blahblah blahblah blahblah blahblah blah
       <SomeComponent2 />
      </div>
    </ContextProvider>
  );
}

import React, { useEffect, useContext } from 'react'
import  { Context } from './context'

export default function SomeComponent() {
  const contextData = useContext(Context)

  useEffect(() => {
    const timer = setInterval(() => {
      contextData.setVisible(!contextData.visibile)
    }, 1000)

    return () => clearInterval(timer)
  }, [contextData])

  return (
    <div>
      <h2> Consumer 1 (Consuming & Changing) </h2>
      <pre>{JSON.stringify(contextData, null, 4)}</pre>
    </div>
  )
}