开发者问题收集

Jest Mock 返回未定义而不是值

2022-11-20
2292

我正在使用 Jest 测试 React 组件。我正在尝试模拟来自其他依赖项的函数。依赖项中的函数应该返回一个数组,但它在控制台上显示未定义。

下面的文件是 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 个对象的数组,但在运行测试用例时,它返回未定义。显示以下错误:

TypeError: Cannot read property 'filter' of undefined

我模拟的正确吗?

2个回答

我认为这是因为 api.getFrames 未定义且不是模拟。

尝试将您的模拟语句更改为此:

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

结果发现,我有另一个具有相同测试名称的文件,这导致了问题。我是 Jest 的初学者,给像我这样的开发人员的一个提示是,我们应该始终使用

jest file.test.tsx 

单独运行测试用例文件:

jest
Tian Qin
2022-11-23