笑话使用React Context API的酶测试错误 [英] Jest & Enzyme test error with React Context API

问题描述

我正在用Jest&测试一个React应用酵素当我运行 npm run test 时，我在 MainPage.jsx 中导入的 UserContext.jsx 中收到错误.我该如何解决?

I am testing a React app with Jest & Enzyme. When I run npm run test I get the error in UserContext.jsx that is imported in MainPage.jsx. How can I fix that?

错误消息

不变违反:无效的挂钩调用.挂钩只能在功能组件的主体内部调用.可能由于以下原因之一而发生:1.您的React和渲染器版本可能不匹配(例如React DOM)2.您可能违反了《钩子规则》3.您可能在同一应用中拥有多个React副本

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

      11 | };
      12 | 
    > 13 | export const useUserValue = () => useContext(UserContext);
         |                                   ^

UserContext.jsx

UserContext.jsx

import React, {createContext, useContext, useReducer} from "react";

export const UserContext = createContext();

export const UserProvider = ({reducer, initialState, children}) => {
    return(
        <UserContext.Provider value={useReducer(reducer, initialState)}>
            {children}
        </UserContext.Provider>
    )
};

export const useUserValue = () => useContext(UserContext);

MainPage.test.js

MainPage.test.js

import React from 'react';
import 'jest-styled-components';

import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MainPage from "./MainPage";
import {useUserValue} from "../Context/UserContext";

configure({adapter: new Adapter()});

describe('Main Page Component', () => {

    it('exists', () => {
        const wrapper = shallow(<MainPage />, {context: useUserValue()});
        expect(wrapper).toMatchSnapshot();
    });
});

MainPage.jsx

MainPage.jsx

import React, {useEffect, useState} from 'react';
import {useUserValue} from "../Context/UserContext";

export default function MainPage(props) {
    const [{ user }, dispatch] = useUserValue();

    return (
        <React.Fragment>
           {user.name}
        </React.Fragment>
    );
}

推荐答案

错误指出了什么问题:

只能在函数组件的主体内部调用钩子

Hooks can only be called inside of the body of a function component

此处在组件外部未正确使用挂钩:

Here the hook is incorrectly used outside the component:

const wrapper = shallow(<MainPage />, {context: useUserValue()});

它应该是 {context:someContext} ，但是问题在于Enzyme渲染器接受旧版React上下文的上下文，而该上下文不能特别影响上下文使用者和功能组件.

It should have been {context: someContext }, but the problem is that Enzyme renderer accepts a context for legacy React context that cannot affect context consumers and functional components in particular.

当前 shallow 不支持上下文提供程序并需要使用 mount :

Currently shallow doesn't support context providers and needs to use mount:

const wrapper = mount(
 <UserContext.Provider value={...}>
   <MainPage />
 </UserContext.Provider>
);

由于 useUserValue 位于其自己的模块中，因此可以对其进行单独测试并在使用该组件的组件中进行模拟，从而可以与 shallow 一起使用.

Since useUserValue is located in its own module, it could be tested separately and mocked in components where it's used, this way it can be used with shallow.

如果有多个副本或React和ReactDOM的版本不匹配，也会发生此错误，但不是这种情况.

This error can also occur if there are multiple copies or mismatching versions of React and ReactDOM, but this is not the case.

这篇关于笑话使用React Context API的酶测试错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！