CODEWITHSUNDEEP
javascriptreactjstypescriptjestjsenzyme
Hello-World
Hello-World

Reputation: 9545

Enzyme, test a react component that uses useContext hook with shallow?

enter image description here

How do I test my component that uses jest and Enzyme with shallow and a react component that uses useContext hook.

How do I mock "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();
})

Upvotes: 1

Views: 4009

Answers (2)

MoviN D
MoviN D

Reputation: 1

To test a React function component that contains local functions but doesn't involve elements and events, you can use Vitest and 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;

Upvotes: -1

Hamza El Aoutar
Hamza El Aoutar

Reputation: 5657

If you are testing that component in isolation then you can mock useContext like this:

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

Upvotes: 3

Related Questions