如何在React中测试上下文

Question

我实现了一个上下文：

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

但当我想用Enzyme测试它时，我对应该测试什么以及如何准确测试感到困惑？

Answer 1

我这样使用它，

上下文文件，

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>
)
}

在Provider(使用FunctionalComponent(中，

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>
);
}

在消费者(使用FunctionalComponent(中，

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>
)
}

参见实时示例

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