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

  • Z时代
  • 2024-01-10
  • 分类：问答

Codesanbox - 

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 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函数以返回所需的宽度数字。

我该如何实现？我一直在寻找解决方案，但被困住了。有一些我没有设法使用的有关类组件或使用打字稿的示例。

回答：

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

以上是 用React或Jest模拟React useRef或功能组件内部的功能？ 的全部内容， 来源链接： utcz.com/qa/415009.html

回到顶部