使用 react-testing-library 测试 useContext()

Question

我想我找到了另一种使用useContext钩子测试组件的方法。 我看过一些教程测试是否可以将值从父上下文提供程序成功传递给子组件，但没有找到有关子组件更新上下文值的教程。

我的解决方案是与提供者一起呈现根父组件，因为 state 最终在根父组件中更改，然后传递给提供者，然后提供者将其传递给所有子组件。 正确的？

测试似乎在应该通过的时候通过，而在不应该通过的时候却没有通过。 有人可以解释为什么这是或不是测试useContext钩子的好方法吗？

根父组件：

...
const App = () => {
  const [state, setState] = useState("Some Text")

  const changeText = () => {
    setState("Some Other Text")
  }
...

  <h1> Basic Hook useContext</h1>
     <Context.Provider value={{changeTextProp: changeText,
                               stateProp: state
                                 }} >
        <TestHookContext />
     </Context.Provider>
)}

上下文 object：

import React from 'react';

const Context = React.createContext()

export default Context

子组件：

import React, { useContext } from 'react';

import Context from '../store/context';

const TestHookContext = () => {
  const context = useContext(Context)

  return (
    <div>
    <button onClick={context.changeTextProp}>
        Change Text
    </button>
      <p>{context.stateProp}</p>
    </div>
  )
}

和测试：

import React from 'react';
import ReactDOM from 'react-dom';
import TestHookContext from '../test_hook_context.js';
import {render, fireEvent, cleanup} from '@testing-library/react';
import App from '../../../App'

import Context from '../../store/context';

afterEach(cleanup)

it('Context is updated by child component', () => {

   const { container, getByText } = render(<App>
                                            <Context.Provider>
                                             <TestHookContext />
                                            </Context.Provider>
                                           </App>);

   console.log(container)
   expect(getByText(/Some/i).textContent).toBe("Some Text")

   fireEvent.click(getByText("Change Text"))

   expect(getByText(/Some/i).textContent).toBe("Some Other Text")
})

Answer 1

您的示例/代码已死。 （不确定您是否需要安装包装<App /> - 您应该直接包装在 Context Provider 中）。

对于你的问题：

测试似乎在应该通过的时候通过，而在不应该通过的时候却没有通过。 有人可以解释为什么这是或不是测试 useContext() 钩子的好方法。

在使用useContext()时这是一种测试的好方法，因为看起来您已经抽象出您的上下文，以便您的子（消费）组件及其测试都使用相同的上下文。 当您使用相同的上下文提供程序时（如您在示例中所做的那样），我看不出您有任何理由模拟或模拟上下文提供程序正在做什么。

React 测试库文档指出：

您的测试与您的软件使用方式越相似，它们能给您的信心就越大。

因此，以与设置组件相同的方式设置测试可以实现该目标。 如果您在一个应用程序中有多个测试确实需要包装在同一个上下文中，那么这篇博文有一个巧妙的解决方案来重用该逻辑。

Answer 2

您提到的方法的问题是耦合。 您要测试的上下文，取决于<TestHookContext/>和<App/>

作为肯特 C。 Dodds，react-testing-library 的作者，有一篇关于“Test Isolation with React”的完整文章，如果你想读一读的话。

TLDR： 这里的演示回购

如何测试上下文

• 导出一个<ContextProvider>组件，该组件包含 state 并返回<MyContext.Provider value={{yourWhole: "State"}}>{children}<MyContext.Provider/>这是我们将为提供程序测试的组件.
• 在使用该上下文的组件上，创建一个 MockContextProvider 来替换原始的。 您想单独测试组件。
• 您可以通过测试根组件来测试整个应用程序的工作流程。

测试身份验证提供程序

假设我们有一个组件通过以下方式使用上下文提供 Auth：

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

export const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [isLoggedin, setIsLoggedin] = useState(false);
  const [user, setUser] = useState(null);

  const login = (user) => {
    setIsLoggedin(true);
    setUser(user);
  };

  const logout = () => {
    setIsLoggedin(false);
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ logout, login, isLoggedin, user }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthProvider;

测试文件如下所示：

import { fireEvent, render, screen } from "@testing-library/react";
import AuthProvider, { AuthContext } from "./AuthProvider";
import { useContext } from "react";

const CustomTest = () => {
  const { logout, login, isLoggedin, user } = useContext(AuthContext);

  return (
    <div>
      <div data-testid="isLoggedin">{JSON.stringify(isLoggedin)}</div>
      <div data-testid="user">{JSON.stringify(user)}</div>
      <button onClick={() => login("demo")} aria-label="login">
        Login
      </button>
      <button onClick={logout} aria-label="logout">
        LogOut
      </button>
    </div>
  );
};

test("Should render initial values", () => {
  render(
    <AuthProvider>
      <CustomTest />
    </AuthProvider>
  );

  expect(screen.getByTestId("isLoggedin")).toHaveTextContent("false");
  expect(screen.getByTestId("user")).toHaveTextContent("null");
});

test("Should Login", () => {
  render(
    <AuthProvider>
      <CustomTest />
    </AuthProvider>
  );
  const loginButton = screen.getByRole("button", { name: "login" });
  fireEvent.click(loginButton);
  expect(screen.getByTestId("isLoggedin")).toHaveTextContent("true");
  expect(screen.getByTestId("user")).toHaveTextContent("demo");
});

test("Should Logout", () => {
  render(
    <AuthProvider>
      <CustomTest />
    </AuthProvider>
  );
  const loginButton = screen.getByRole("button", { name: "logout" });
  fireEvent.click(loginButton);
  expect(screen.getByTestId("isLoggedin")).toHaveTextContent("false");
  expect(screen.getByTestId("user")).toHaveTextContent("null");
});

测试使用 Context 的组件

import React, { useContext } from "react";
import { AuthContext } from "../context/AuthProvider";

const Welcome = () => {
  const { logout, login, isLoggedin, user } = useContext(AuthContext);

  return (
    <div>
      {user && <div>Hello {user}</div>}
      {!user && <div>Hello Anonymous Goose</div>}
      {!isLoggedin && (
        <button aria-label="login" onClick={() => login("Jony")}>
          Log In
        </button>
      )}
      {isLoggedin && (
        <button aria-label="logout" onClick={() => logout()}>
          Log out
        </button>
      )}
    </div>
  );
};

export default Welcome;

我们将通过提供我们自己的一个来模拟 AuthContext 值：

import React, { useContext } from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import Welcome from "./welcome";
import userEvent from "@testing-library/user-event";
import { AuthContext } from "../context/AuthProvider";

// A custom provider, not the AuthProvider, to test it in isolation.
// This customRender will be a fake AuthProvider, one that I can controll to abstract of AuthProvider issues.

const customRender = (ui, { providerProps, ...renderOptions }) => {
  return render(
    <AuthContext.Provider value={providerProps}>{ui}</AuthContext.Provider>,
    renderOptions
  );
};

describe("Testing Context Consumer", () => {
  let providerProps;
  beforeEach(
    () =>
      (providerProps = {
        user: "C3PO",
        login: jest.fn(function (user) {
          providerProps.user = user;
          providerProps.isLoggedin = true;
        }),
        logout: jest.fn(function () {
          providerProps.user = null;
          providerProps.isLoggedin = false;
        }),
        isLoggedin: true,
      })
  );

  test("Should render the user Name when user is signed in", () => {
    customRender(<Welcome />, { providerProps });
    expect(screen.getByText(/Hello/i)).toHaveTextContent("Hello C3PO");
  });

  test("Should render Hello Anonymous Goose when is NOT signed in", () => {
    providerProps.isLoggedin = false;
    providerProps.user = null;
    customRender(<Welcome />, { providerProps });
    expect(screen.getByText(/Hello/i)).toHaveTextContent(
      "Hello Anonymous Goose"
    );
  });

  test("Should render Logout button when user is signed in", () => {
    customRender(<Welcome />, { providerProps });
    expect(screen.getByRole("button", { name: "logout" })).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "login" })).toBeNull();
  });

  test("Should render Login button when user is NOT signed in", () => {
    providerProps.isLoggedin = false;
    providerProps.user = null;
    customRender(<Welcome />, { providerProps });
    expect(screen.getByRole("button", { name: "login" })).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "logout" })).toBeNull();
  });

  test("Should Logout when user is signed in", () => {
    const { rerender } = customRender(<Welcome />, { providerProps });
    const logout = screen.getByRole("button", { name: "logout" });
    expect(logout).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "login" })).toBeNull();
    userEvent.click(logout);
    expect(providerProps.logout).toHaveBeenCalledTimes(1);

    //Technically, re renders are responsability of the parent component, but since we are here...
    rerender(
      <AuthContext.Provider value={providerProps}>
        <Welcome />
      </AuthContext.Provider>
    );
    expect(screen.getByText(/Hello/i)).toHaveTextContent(
      "Hello Anonymous Goose"
    );
    expect(screen.getByRole("button", { name: "login" })).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "logout" })).toBeNull();
  });

  test("Should Login when user is NOT signed in", () => {
    providerProps.isLoggedin = false;
    providerProps.user = null;
    const { rerender } = customRender(<Welcome />, { providerProps });
    const login = screen.getByRole("button", { name: "login" });
    expect(login).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "logout" })).toBeNull();
    userEvent.click(login);
    expect(providerProps.login).toHaveBeenCalledTimes(1);

    //Technically, re renders are responsability of the parent component, but since we are here...
    rerender(
      <AuthContext.Provider value={providerProps}>
        <Welcome />
      </AuthContext.Provider>
    );
    expect(screen.getByText(/Hello/i)).toHaveTextContent("Hello Jony");
    expect(screen.getByRole("button", { name: "logout" })).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "login" })).toBeNull();
  });
});