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

Question

我正在尝试在 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();
  });
});

为什么函数不能在我的单元测试中模拟，请问是否有任何建议通过所有快照通过测试。

Answer 1

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

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

测试失败，因为useEffect在测试渲染器中而不是在DOM渲染器中的工作方式有所不同。通常，useEffect回调将在初始渲染之后被调用，但在测试中，它会在评估const dummyFunc行之前立即被调用。没有必要将此行专门放置在useEffect之后。为了不引起测试问题，应将其取消：

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

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

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