您可以使用jest.mock(模块名称,工厂,选项)和jest.requireActual(moduleName)
API来模拟
useRef钩子(其他除外)。这意味着的其他功能和方法
react仍是原始版本。
例如
index.test.jsx:
import React, { useRef } from 'react';export default function Child2() { const divRef = useRef(); function getDivWidth() { if (divRef.current) { console.log(divRef.current); } return divRef.current ? divRef.current.offsetWidth : ''; } function getDivText() { const divWidth = getDivWidth(); if (divWidth) { if (divWidth > 100) { return 'ABC'; } return '123'; } return '123'; } return ( <> <div id="myDiv" ref={divRef}> {getDivText()} </div> <p>Div width is: {getDivWidth()}</p> </> );}index.test.jsx:
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: '); });});100%覆盖率的单元测试结果:
PASS stackoverflow/61782695/index.test.jsx (9.755s) 61782695 ✓ should pass (111ms) ✓ should pass - 2 (15ms) ✓ should pass - 3 (1ms) console.log { offsetWidth: 100 } at getDivWidth (stackoverflow/61782695/index.jsx:8:15) console.log { offsetWidth: 100 } at getDivWidth (stackoverflow/61782695/index.jsx:8:15) console.log { offsetWidth: 300 } at getDivWidth (stackoverflow/61782695/index.jsx:8:15) console.log { offsetWidth: 300 } at getDivWidth (stackoverflow/61782695/index.jsx:8:15)-----------|---------|----------|---------|---------|-------------------File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------|---------|----------|---------|---------|-------------------All files | 100 | 100 | 100 | 100 | index.jsx | 100 | 100 | 100 | 100 | -----------|---------|----------|---------|---------|-------------------Test Suites: 1 passed, 1 totalTests: 3 passed, 3 totalSnapshots: 0 totalTime: 10.885s软件包版本:
"react": "^16.13.1","react-dom": "^16.13.1","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.2","jest": "^25.5.4","jest-environment-enzyme": "^7.1.2","jest-enzyme": "^7.1.2",



