Enzyme，测试一个使用 useContext hook 的 React 组件？

Question

我如何测试使用 jest 和 Enzyme 的浅层组件以及使用 useContext 钩子的 React 组件。

如何模拟“pValue.state.fullLang”？

src\LanguageSelect.tsx

import React, { useContext } from 'react';
import { LanguageContext } from './utils/LanguageHook';


function LanguageSelect() {
    const pValue: any = useContext(LanguageContext);

    return (
        <div className="LanguageSelect" data-test="languageSelect-box">
            <div className="languageArea">{pValue.state.fullLang}</div>
        </div>
    );
}

export default LanguageSelect;

src\LanguageSelect.test.tsx

import React from 'react';
import { shallow } from 'enzyme';
import LanguageSelect from './LanguageSelect';

test.only('that the LanguageSelect component exists', () => {

    jest.mock('react', () => {
        const ActualReact = require.requireActual('react');
        return {
          ...ActualReact,
          useContext: () => ({ state: { fullLang: 'mocked context' } }),
      };
    });
    const wrapper = shallow(<LanguageSelect />)

    expect(wrapper.find('[data-test="languageSelect-box"]').exists()).toBeTruthy()
    wrapper.unmount();
})

Answer 1

如果您正在单独测试该组件，那么您可以像这样模拟

useContext

：

jest.mock('react', () => {
    const ActualReact = require.requireActual('react');
    return {
      ...ActualReact,
      useContext: () => ({ state: { fullLang: 'mocked context' } }),
  };
});

Answer 2

要测试包含本地函数但不涉及元素和事件的 React 函数组件，可以使用 Vitest 和 Enzyme

import React from "react";

function Button({ text }: any) {
  const handleClick = (a: number, b: number) => {
    return a + b;
  };
  return (
    <button>
      {text}
    </button>
  );
}

export default Button;