Блог

Я реализовал контекст :

 import { createContext } from "react"

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

export default context
  

Но когда я хочу протестировать его с помощью Enzyme, я запутался в том, что я должен тестировать и как это точно протестировать?

Я использую его следующим образом,

Файл контекста,

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

в Consumer (используя 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 amp; Changing) </h2>
      <pre>{JSON.stringify(contextData, null, 4)}</pre>
    </div>
  )
}
  

Смотрите живой Пример

Предполагая, что вы хотите, как использовать контекст