/Javascript/React/Mock createRef jest react functional component

Mock createRef jest react functional component

import React, { useRef } from 'react';
import { shallow } from 'enzyme';
import Child2 from './';

jest.mock('react', () => {
  const originReact = jest.requireActual('react');
  const mUseRef = jest.fn();
  return {
    ...originReact,
    useRef: mUseRef,
  };
});

describe('61782695', () => {
  it('should pass', () => {
    const mRef = { current: { offsetWidth: 100 } };
    useRef.mockReturnValueOnce(mRef);
    const wrapper = shallow(<Child2></Child2>);
    expect(wrapper.find('#myDiv').text()).toBe('123');
    expect(wrapper.find('p').text()).toBe('Div width is: 100');
  });

  it('should pass - 2', () => {
    const mRef = { current: { offsetWidth: 300 } };
    useRef.mockReturnValueOnce(mRef);
    const wrapper = shallow(<Child2></Child2>);
    expect(wrapper.find('#myDiv').text()).toBe('ABC');
    expect(wrapper.find('p').text()).toBe('Div width is: 300');
  });

  it('should pass - 3', () => {
    const mRef = {};
    useRef.mockReturnValueOnce(mRef);
    const wrapper = shallow(<Child2></Child2>);
    expect(wrapper.find('#myDiv').text()).toBe('123');
    expect(wrapper.find('p').text()).toBe('Div width is: ');
  });
});

Source: stackoverflow.com

Similar codes

0 vote228 views1 answer
React Redux component getById crud exemple
Javascript React
19 votes198 views6 answers
Convert svg to react component
Javascript React
22 votes200 views3 answers
How to use if else inside jsx in react
Javascript React
0 vote187 views1 answer
React Rendering Movies
Javascript React
1 vote189 views1 answer
Google font in react native
Javascript React
1 vote205 views1 answer
Put two buttons in a row in react native
Javascript React
0 vote195 views6 answers
State functions of react cheatsheet
Javascript React
2 votes159 views1 answer
Yarn create react-app test00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'create'
Javascript React
2 votes171 views1 answer
Change color of strike through line of text in react native
Javascript React
1 vote203 views1 answer
React stripe npm
Javascript React