Блог

Я пытаюсь получить весь снимок на моем 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;

  

test/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();
  });
});

  

Почему функция не может имитироваться в моем модульном тестировании, пожалуйста, если есть какие-либо предложения, чтобы пройти тест со всеми снимками.

Проблема специфична для React test renderer, а не toMatchSnapshot

dummyFunc невозможно издеваться. dummyFunc переменная является локальной для LayoutDummy области действия функции. Доступ к локальным переменным невозможен за пределами области, в которой они были определены.

Тест завершается неудачно, потому useEffect что работает по-другому в тестовом рендерере, а не в рендере DOM. Обычно useEffect обратный вызов вызывается после первоначального рендеринга, но в тестах он вызывается сразу перед оценкой const dummyFunc строки. Нет причин специально размещать эту строку после useEffect . Чтобы не вызывать проблем в тестах, его следует отменить:

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

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

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