开玩笑抛出 TypeError:无法读取未定义的属性“获取" [英] Jest throwing TypeError: Cannot read property 'fetch' of undefined

问题描述

我正在尝试使用 Jest 在我的 react/react-native 库上运行一些测试(里面只有一些业务逻辑).

I'm trying to run some tests with Jest on my react/react-native library (only some business logic inside).

我们正在测试使用 fetch 函数的操作(使用 whatwg-fetch 的 polyfill).我添加了 whatwg-fetch(感谢 Safari)来进行反应.

We are testing actions that uses fetch function (polyfill with whatwg-fetch). I've added whatwg-fetch (thanks to Safari) for react.

每当我尝试运行测试时，我都会收到此错误:

Whenever i try to run a test, i'm getting this error:

TypeError: Cannot read property 'fetch' of undefined

  at node_modules/whatwg-fetch/fetch.js:4:11
  at Object.<anonymous> (node_modules/whatwg-fetch/fetch.js:461:3)
  at Object.<anonymous> (node_modules/jest-expo/src/setup.js:138:416)

什么会导致这个问题?有没有办法在开玩笑的配置中避免这种情况?

What can cause this issue? Is there a way in the jest config to avoid this?

这里有一些用于调试的文件:

package.json 中的 Jest 配置

Jest config in package.json

"jest": {
"preset": "jest-expo",
"moduleFileExtensions": [
  "js",
  "jsx",
  "ts",
  "tsx"
],
"verbose": true,
"transform": {
  "^.+\.(js|ts|tsx)$": "<rootDir>/node_modules/babel-jest"
},
"testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
  "\.snap$",
  "<rootDir>/node_modules/",
  "<rootDir>/dist/"
],
"transformIgnorePatterns": [
  "node_modules/?!react-native"
]
},

Webpack 配置:

Webpack config:

const config = {
entry: [
    'whatwg-fetch',
    __dirname + '/src/index.ts',
],
devtool: 'source-map',
output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.js',
    library: 'checkinatwork-module',
    libraryTarget: 'umd',
    umdNamedDefine: true,
},
module: {
    loaders: [
        { test: /.(tsx|ts)?$/, loader: 'ts-loader', exclude: /node_modules/ },
    ],
},
resolve: {
    modules: [
        './src',
        'node_modules',
    ],
    extensions: ['.js', '.ts', '.jsx', '.tsx', 'json'],
},
plugins: [
],
};

测试文件:

import expect from 'expect';
import * as actions from '../../src/components/Checkin/checkin.action';
import * as reducers from '../../src/components/Checkin/checkin.reducer';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import nock from 'nock';

const middlewares = [ thunk ];
const mockStore = configureMockStore(middlewares);

describe('=> ADD CHECKIN ACTIONS', () => {
  describe('- REQUEST', () => {
    it('Action: ADD_CHECKIN_REQUEST should request addCawCheckin', () => {
      const expectedAction = {
        type: actions.ADD_CHECKIN_REQUEST,
        isFetching: true,
      };
      expect(actions.addCheckinRequest())
        .toEqual(expectedAction);
    });
    it('Reducer: newCheckin should trigger ADD_CHECKIN_REQUEST and initiate loading', () => {
      const expectedState = {
        isFetching: true,
        status: null,
      };
      expect(reducers.newCheckin(reducers.newCheckinDefaultState, actions.addCheckinRequest()))
        .toEqual(expectedState);
    });
  });

动作文件:

export const getCheckins = (sessionId, date, url, isRefresh) => {
  const config = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      sessionId: {sessionId},
      date: {date},
    }),
  };

  return dispatch => {
    if (!isRefresh) {
      dispatch(getCheckinsRequest());
    }
    return fetch(url + 'getCAWCheckIns', config)
      .then(response => response.json())
      .then(({ checkins }) => {
        dispatch(getCheckinsSuccess(checkins));
      }).catch(err => {
        dispatch(getCheckinsError('Get checkins failed'));
        console.error('Get checkins failed: ', err);
      });
  };
};

谢谢！

推荐答案

这对我有用.在需要 whatwg-fetch 的博览会设置文件 (node_modules/jest-expo/src/setup.js) 中，我将要求更改为 require('fetch-everywhere')

This worked for me. In your expo set up file(node_modules/jest-expo/src/setup.js) where it requires whatwg-fetch, I changed that require to require('fetch-everywhere')

const { Response, Request, Headers, fetch } = 
  require('fetch-everywhere');
global.Response = Response;
global.Request = Request;
global.Headers = Headers;
global.fetch = fetch;

由于某些原因，只有 fetch 到处都在使用 expo 和 jest.

For some reasons, only fetch everywhere was working with expo and jest.

这篇关于开玩笑抛出 TypeError:无法读取未定义的属性“获取"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！