栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

用React或Jest模拟React useRef或功能组件内部的功能?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

用React或Jest模拟React useRef或功能组件内部的功能?

您可以使用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",


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/636496.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号