Jest Mock возвращает undefined вместо значения

Я использую Jest для тестирования компонента реакции. Я пытаюсь издеваться над функцией из другой зависимости. Функция из зависимости должна возвращать массив, но в консоли отображается undefined.

Ниже приведен файл tsx, когда я нажимаю кнопку, он должен вызвать функцию зависимости, чтобы получить список кадров. ExitAppButton.tsx:

import React, { useContext, useState } from 'react';
import { TestContext } from '../ContextProvider';
import { useDispatch } from 'react-redux';


const ExitAppButton = (props: any): JSX.Element => {
  const { sdkInstance } = useContext(TestContext);

  const exitAppClicked = () => {
  const appList = sdkInstance.getFrames().filter((app: any) => {app.appType === "Test App"}).length}

тестовый файл SignOutOverlay.test.tsx:

import * as React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import SignOutOverlay from '.';
import ExitAppButton from './ExitAppButton';
import { TestContext } from '../ContextProvider';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
const api = require('@praestosf/container-sdk/src/api');

const mockStore = configureStore([]);

jest.mock('@praestosf/container-sdk/src/api');

api.getFrames.mockReturnValue([{appType:"Test App"},{appType:"Test App"},{appType:"Not Test App"}]);

describe('Test Exit app Button', () => {
  const renderExitAppButton = () => {
    const store = mockStore([{}]);
    render(
      <Provider store = {store}>
          <TestContext.Provider value = {{ sdkInstance: api }}>
                <SignOutOverlay>
                  <ExitAppButton/>
                </SignOutOverlay>
          </TestContext.Provider>
      </Provider>
    );
  };

it('should to be clicked and logged out', () => {
    renderExitAppButton();
    fireEvent.click(screen.getByTestId('exit-app-button-id'));
});

Это файл зависимостей, api.js

const getFrames = () => {
  let frames = window.sessionStorage.getItem('TestList');
  frames = frames ? JSON.parse(frames) : [];
  return frames
};

const API = function () { };

API.prototype = {
  constructor: API,
  getFrames
};

module.exports = new API();

Я издевался над функцией getFrame, чтобы она возвращала массив из 3 объектов, но при запуске тестового примера она возвращает значение undefined. Ниже показывалась ошибка:

TypeError: Cannot read property 'filter' of undefined

Я издеваюсь над этим правильно?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
324
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, это потому, что api.getFrames не определен, а не макет.

Попробуйте изменить свое фиктивное выражение на это:

jest.mock('@praestosf/container-sdk/src/api', () => ({
    getFrames: jest.fn(),
    // add more functions if needed
}));

Я пробовал это, но он все еще возвращает undefined. Любая другая возможная причина?

Tian Qin 20.11.2022 22:08

Попробуйте сузить проблему, записав значение api

tstrmn 20.11.2022 22:30

Привет. Я попытался зарегистрировать API, он возвращает издевательскую функцию, в этом нет ничего плохого, но когда я вызываю mockReturnValue. Он все равно вернет undefined

Tian Qin 22.11.2022 17:40

Итак, вы вошли в систему api, и он возвращает макет, но когда вы входите в систему getFrames, он возвращает неопределенное значение? Это странно, я не вижу проблемы, тогда я думаю, извините :/

tstrmn 23.11.2022 19:45
Ответ принят как подходящий

Оказывается, у меня есть другой файл с тем же именем теста, который вызывает проблему. Я новичок в Jest, совет для таких разработчиков, как я, мы всегда должны запускать файл тестового примера в одиночку, используя

jest file.test.tsx 

Не все файлы одновременно:

jest

Другие вопросы по теме