Javascript 使用react测试库从jest测试访问和修改react上下文

我已经为此奋斗了几天了，但我无法找到正确的方法来做我需要的事情。 基本上，我有一个上下文，它提供了一个从API获取的主题。上下文具有主题、加载和函数的值，用于获取和更新加载状态。看起来是这样的：

import React, { useState } from "react";

import ThemeService from "../services/GetThemes";

const AvailableThemesContext = React.createContext();
const { Provider, Consumer } = AvailableThemesContext;

const ThemesProvider = ({ children }) => {
  const [contextTheme, setTheme] = useState({});
  const [loading, setLoading] = useState(true);

  function handleData(data) {
    setTheme(data);
    setLoading(false);
  }

  function fetchThemes() {
    setLoading(true);
    new ThemeService().getData(handleData);
  }

  function refresh(data) {
    setTheme(data);
  }

  return (
    <Provider value={{ contextTheme, fetchThemes, refresh, setLoading, }}>
      {children}
    </Provider>
  );
};

export { ThemesProvider, Consumer as ThemeConsumer, AvailableThemesContext };

import React, { useState } from "react";
import PropTypes from "prop-types";

import ThemeService from "../services/GetThemes";

export const AvailableThemesContext = React.createContext();

const ThemesProvider = ({ children }) => {
  const [contextTheme, setTheme] = useState([]);
  const [loading, setLoading] = useState(true);

  function handleData(data) {
    setTheme(data);
    setLoading(false);
  }

  function fetchThemes() {
    setLoading(true);
    new ThemeService().getData(handleData);
  }

  function refresh(data) {
    setTheme(data);
  }

  return (
    <AvailableThemesContext.Provider
      value={{ loading, contextTheme, fetchThemes, refresh }}
    >
      {children}
    </AvailableThemesContext.Provider>
  );
};

export default ThemesProvider;

ThemesProvider.propTypes = {
  children: PropTypes.element.isRequired,
};

在我尝试注入新状态的过程中，组件从未看到更改

---

请帮助？

您的语法错误，请尝试此

我刚刚更改了渲染函数的最终设置（代码>）位置

test（“它呈现时不会崩溃”，（）=>{
const renderComponent=渲染(
);
expect（renderComponent.getByTestId（“选择器组件”）.toBeInTheDocument（）；
}); 

因此，我终于找到了一个我认为可行的解决方案，希望是一个很好的实践。我基本上简化了我的上下文提供程序。现在，它是由一位同事编写的，他已经对上下文的

提供者

和

消费者

进行了分解。 这使得代码看起来很漂亮，但调试起来很复杂

现在，我的上下文提供程序如下所示：

import React, { useState } from "react";

import ThemeService from "../services/GetThemes";

const AvailableThemesContext = React.createContext();
const { Provider, Consumer } = AvailableThemesContext;

const ThemesProvider = ({ children }) => {
  const [contextTheme, setTheme] = useState({});
  const [loading, setLoading] = useState(true);

  function handleData(data) {
    setTheme(data);
    setLoading(false);
  }

  function fetchThemes() {
    setLoading(true);
    new ThemeService().getData(handleData);
  }

  function refresh(data) {
    setTheme(data);
  }

  return (
    <Provider value={{ contextTheme, fetchThemes, refresh, setLoading, }}>
      {children}
    </Provider>
  );
};

export { ThemesProvider, Consumer as ThemeConsumer, AvailableThemesContext };

import React, { useState } from "react";
import PropTypes from "prop-types";

import ThemeService from "../services/GetThemes";

export const AvailableThemesContext = React.createContext();

const ThemesProvider = ({ children }) => {
  const [contextTheme, setTheme] = useState([]);
  const [loading, setLoading] = useState(true);

  function handleData(data) {
    setTheme(data);
    setLoading(false);
  }

  function fetchThemes() {
    setLoading(true);
    new ThemeService().getData(handleData);
  }

  function refresh(data) {
    setTheme(data);
  }

  return (
    <AvailableThemesContext.Provider
      value={{ loading, contextTheme, fetchThemes, refresh }}
    >
      {children}
    </AvailableThemesContext.Provider>
  );
};

export default ThemesProvider;

ThemesProvider.propTypes = {
  children: PropTypes.element.isRequired,
};

对于那些不需要向上下文注入新状态的测试，可以直接使用保存状态的函数包装组件，如第一个测试所示

---

这样我就可以快速识别出哪个正在使用状态，哪个正在修改状态。

对不起，这是一个输入错误。我删除了一些评论和其他版本。据我所知，我认为应该是这样的。此外，渲染的导入是由

“@testing library/react

提供的，而不是自定义的。

import ThemesProvider, {
  AvailableThemesContext,
} from "../context/ThemeProvider";

describe("<CalendarView />", () => {
  test("It renders without crashing", async () => {
    const { getByLabelText } = render(
      <ThemesProvider>
        <CalendarView />
      </ThemesProvider>
    );
    expect(getByLabelText("audio-loading")).toBeInTheDocument();
  });

  test("It renders without crashing", () => {
    const { getByTestId } = render(
      <AvailableThemesContext.Provider value={{ loading: false }}>
        <CalendarView />
      </AvailableThemesContext.Provider>
    );
    expect(getByTestId("picker-component")).toBeInTheDocument();
  });
});