Mock React useRef 或带有酶和笑话的功能组件内的函数？

IT技术 reactjs testing mocking jestjs enzyme
2021-04-18 04:16:39

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

我怎么能做到这一点？我已经寻找了解决方案，但我被卡住了。有一些带有类组件或使用typescript的示例，但我没有设法使用。

1个回答

您可以使用jest.mock(moduleName, factory, options)和jest.requireActual(moduleName) API 来模拟useRef钩子，除了其他。这意味着其他功能和方法react仍然是原始版本。

例如

index.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",
@ChristianSaiki 模拟 React 及其类型，然后从中使用 useRef。const mockedReact = React as jest.Mocked<typeof React>;接着mockedReact.useRef.mockReturnValueOnce(mRef);
2021-05-26 04:16:39
@VergilC。你需要问一个新问题
2021-05-28 04:16:39
非常感谢，这很有效，让我免于头痛。再问你一个问题，如果我在我的组件中添加一个useLayoutEffect将使用 thedivref.current.childNodes来获取所有li元素的宽度的组件，我将如何更改测试？我试过了，我在测试中它永远不会进入useLayoutEffect. 在现实生活中，我有这种情况，第一次渲染时组件没有引用，第二次渲染时我有引用，然后我使用该元数据进行组件内部的操作。
2021-05-29 04:16:39
我会收到这个typescript错误 -> 有什么Error:(397, 21) TS2339: Property 'mockReturnValueOnce' does not exist on type '<T>() => RefObject<T>'.想法可以解决这个问题吗？
2021-06-16 04:16:39
@MantasAstra 我收到错误有mockedReact.useRef.mockReturnValueOnce is not a function什么想法吗？
2021-06-17 04:16:39
其它你可能感兴趣的问题
上一篇如何配置 webpack 以从其他 lerna 包中转译文件（从 create-react-app 中弹出） 下一篇.bind() 与箭头函数 () 的区别 => React 中的用法