酶，測試一個使用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' } }),
  };
});