时间戳

首页 > 解决方案 > 如何在 React 中测试上下文？

reactjs - 如何在 React 中测试上下文？

问题描述

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

import { createContext } from "react"

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

export default context

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

标签： reactjsenzymereact-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 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>
  )
}

查看实时示例

假设你想如何使用上下文

推荐阅读