在 Jest 中 toMatchSnapshot 时无法模拟 useEffect 中的函数

IT技术 reactjs jestjs react-hooks use-effect
2021-05-08 16:47:49

我试图在我的LayoutDummy.js上获取所有快照以完成我的单元测试覆盖

当我运行测试时出现错误,它说 dummyFunc 不是如下所示的函数

在此处输入图片说明

我已经在功能组件和测试文件中编写了我的实际代码,如下所示

LayoutDummy.js

import React, { useEffect, useState } from 'react';

const LayoutDummy = () => {
  const [caption, setCaption] = useState('loading...');
  useEffect(() => {
    dummyFunc();
  }, []);

  const dummyFunc = () => {
    setCaption('dummyFunc is running');
  };
  return (
    <div>
      <p>LayoutDummy</p>
      <p>{caption}</p>
    </div>
  );
};

export default LayoutDummy;

测试/LayoutDummy.js

import React, { useEffect } from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import LayoutDummy from '../LayoutDummy';


const dummyFunc = jest.fn();

useEffect.mockImplementationOnce(fn => fn());

describe('mock func in useEffct', () => {

  test('render', () => {
    const shallow = new ShallowRenderer();
    const tree = shallow.render(<LayoutDummy />);
    dummyFunc.mockReturnValueOnce('dummyFunc is running');
    expect(tree).toMatchSnapshot();
  });
});

为什么该函数不能在我的单元测试中模拟,如果有任何建议通过所有快照进行测试。

1个回答

该问题特定于 React 测试渲染器而不是 toMatchSnapshot

dummyFunc不能被嘲笑。dummyFunc变量是LayoutDummy函数作用域的局部变量不能在定义它们的范围之外访问局部变量。

测试失败是因为useEffect在测试渲染器而不是 DOM 渲染器中的工作方式不同。通常useEffect回调将在初始渲染后调用,但在测试中它会在评估const dummyFuncline之前立即调用没有理由将此行专门放在useEffect. 为了在测试中不引起问题,应该取消它:

  const [caption, setCaption] = useState('loading...');

  const dummyFunc = () => {
    setCaption('dummyFunc is running');
  };

  useEffect(() => {
    dummyFunc();
  }, []);