Codesanbox 链接 - 包括工作组件Child2.js和工作测试Child2.test.js
Child2.js
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> </> ); }
Child2.test.js
import React from "react"; import Enzyme, { shallow } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; import Child2 from "../src/Child2"; Enzyme.configure({ adapter: new Adapter() }); it("div text is ABC when div width is more then 100 ", () => { const wrapper = shallow(<Child2 />); expect(wrapper.find("#myDiv").exists()).toBe(true); expect(wrapper.find("#myDiv").text()).toBe("ABC"); }); it("div text is 123 when div width is less then 100 ", () => { const wrapper = shallow(<Child2 />); expect(wrapper.find("#myDiv").exists()).toBe(true); expect(wrapper.find("#myDiv").text()).toBe("123"); });
当我运行测试时,很明显div的offsetWidth为0,因此我需要找到一种方法来模拟,useRef以返回带有宽度的div元素,或者模拟getDivWidth函数以返回所需的宽度数字。
useRef
getDivWidth
我该如何实现?我一直在寻找解决方案,但被困住了。有一些我没有设法使用的有关类组件或使用打字稿的示例。
您可以使用jest.mock(模块名称,工厂,选项)和jest.requireActual(moduleName) API来模拟useRef钩子(其他除外)。这意味着的其他功能和方法react仍是原始版本。
react
例如
index.test.jsx:
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> </> ); }
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 total Tests: 3 passed, 3 total Snapshots: 0 total Time: 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",