酶，测试使用useContext钩子和浅层的反应组件？

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' } }),
  };
});