开玩笑的测试失败 - 未定义

Question

我确实有两个Jest测试案例，这些案例似乎失败了，但我不知道怎么了。 它是关于邮政功能的，并以某种方式无法识别它并在获取时会出现错误。

任何想法都赞赏。

这是测试结果所说的：

---

●测试如果UI正确更新›测试'UpdateUI'函数...

    TypeError: Cannot read property 'weather' of undefined

      3 |     console.log('all data returned is:')
      4 |     console.log(data)
    > 5 |     const precip = Math.round(data.weather.precip * 10) / 10
        |                                    ^
      6 |     const postHolder = document.getElementById('all-posts')
      7 |     const newDiv = document.createElement('div');
      8 |     newDiv.classList.add('entry-holder');

      at updateUI (src/client/js/updateUI.js:5:36)
      at Object.<anonymous> (__test__/testUpdateUI.test.js:10:12)



 FAIL  __test__/testPostData.test.js
  ● Testing the posting of the data › Test 'postInput' function to make a successful post

    ReferenceError: fetch is not defined

      1 | // POST input data to server
    > 2 | const postInput = async (url = '', data = {}) => {
        |                   ^
      3 |     const response = await fetch(url, {
      4 |       method: 'POST',
      5 |       credentials: 'same-origin',

      at _callee$ (src/client/js/postData.js:2:19)
      at tryCatch (src/client/js/postData.js:10:2404)
      at Generator._invoke (src/client/js/postData.js:10:1964)
      at Generator.next (src/client/js/postData.js:10:3255)
      at asyncGeneratorStep (src/client/js/postData.js:12:103)
      at _next (src/client/js/postData.js:14:194)
      at src/client/js/postData.js:14:364
      at src/client/js/postData.js:14:97
      at postInput (src/client/js/postData.js:2:16)
      at _callee$ (__test__/testPostData.test.js:13:11)
      at tryCatch (__test__/testPostData.test.js:15:2404)
      at Generator._invoke (__test__/testPostData.test.js:15:1964)
      at Generator.next (__test__/testPostData.test.js:15:3255)
      at asyncGeneratorStep (__test__/testPostData.test.js:17:103)
      at _next (__test__/testPostData.test.js:19:194)
      at __test__/testPostData.test.js:19:364
      at Object.<anonymous> (__test__/testPostData.test.js:19:97)

---

，这些是函数：

// POST input data to server
const postInput = async (url = '', data = {}) => {
    const response = await fetch(url, {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json', },
      body: JSON.stringify(data),
    })
    try {
      const newData = await response.json();
      console.log('newData in postInput function is:')
      console.log(newData)
      Client.updateUI(newData)
    } catch (error) {
      console.log('ERROR in POST:', error);
    }
  }
  
  export { postInput }

和第二个功能

// Fetches gathered data from server & updates UI with it
function updateUI(data) {
    console.log('all data returned is:')
    console.log(data)
    const precip = Math.round(data.weather.precip * 10) / 10
    const postHolder = document.getElementById('all-posts')
    const newDiv = document.createElement('div');
    newDiv.classList.add('entry-holder');
    newDiv.innerHTML =`
        <img src="${data.pix.webformatURL}" alt="destination">
        <div class="stat-holder">
            <div class="wait-time"><i>${data.geo.name}, ${Client.checkCountry(data.geo)} is ${Client.dateDiff()} days away.</i></div>
            <h3>Typical weather for then is:</h3>
            <div class="temp">High: ${data.weather.max_temp}&degC, Low: ${data.weather.min_temp}&degC</div>
            <div class="precip">With a chance for ${precip}mm of precipitation</div>
        </div>
    `;
    postHolder.appendChild(newDiv);
  }
  
  export { updateUI }
  

Answer 1

迟到的答案，但也许可以帮助某人通过这个问题。

默认情况下，Jest在Node环境中运行测试。因此，根据您的软件包和配置，fetch在您的测试中可能没有可用。

因此，解决方案是在测试环境中添加fetch。

选项1：模拟获取

在模块中写下模拟功能，例如模拟fetch.ts，如下所示。

export function mockFetch(data: any) {
  return jest.fn().mockImplementation(() =>
    Promise.resolve({
      ok: true,
      json: () => data,
    }),
  );
}

然后，在测试文件中，您可以使用它来模拟Fetch，如下所示。

import { mockFetch } from './mock-fetch';

test('postInput()', async () => {
  window.fetch = mockFetch(someJson);

  // ... your postInput or component render here
  const result = await postInput();

  // Assert your expectations
  expect(result).toEqual(someJson);
});

在此批准中，您只能在必要时模拟获取。另一方面，如果您想测试网络错误或响应不正常之类的方案，则模拟实现可能会变得复杂。

选项2：仅在测试环境中获取polyfill

使用 cross-fetch 在运行测试时。

此方法如下：

1. 安装cross-fetch作为DEV依赖关系。

npm i --save-dev cross-fetch

2. 在jest.setup.js | ts中导入它。

import 'cross-fetch/polyfill';

3. 在执行测试之前，配置开玩笑以加载它。例如，在jest.config.js中。

module.exports = {
  testEnvironment: 'jsdom',
  injectGlobals: true,
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '\\.(css|less|scss)
在这种方法中，您可以使用 msw 按 testing-library 。
选项3：使用 Axios 为整个应用程序
使用库  axios  在应用程序中而不是 fetch 。
然后在测试用例中使用开玩笑模拟 Axios 模块。
import axios from 'axios';

jest.mock('axios');

test('postInput()', async () => {
  const resp = {data: someJson};
  axios.get.mockImplementation(() => Promise.resolve(resp));

  // ... your postInput or component render here
  const result = await postInput();

  // Assert your expectations
  expect(result).toEqual(someJson);
});

: 'identity-obj-proxy',
    '^@/(.*)
在这种方法中，您可以使用 msw 按 testing-library 。
选项3：使用 Axios 为整个应用程序
使用库  axios  在应用程序中而不是 fetch 。
然后在测试用例中使用开玩笑模拟 Axios 模块。

: '<rootDir>/src/$1',
  },
};

在这种方法中，您可以使用 msw 按 testing-library 。

选项3：使用Axios为整个应用程序

使用库 axios 在应用程序中而不是fetch。

然后在测试用例中使用开玩笑模拟Axios模块。

Answer 2

@hellowworl101 答案，option>选项1：模拟fetch，保存一天。

就我而言，我需要其他条目（标题和text（））进行提取：

export function mockFetch(data: any, headers: any = null) {
    if (!headers) {
        headers = {'Content-Type': 'application/json'};
    }
    return jest.fn().mockImplementation(() =>
      Promise.resolve({
        ok: true,
        json: () => data,
        headers: new Headers(headers),
        text: () => Promise.resolve(JSON.stringify(data)),
      }),
    );
}

测试是这样的：

import React from "react";
import { render } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";

// Fix the "ReferenceError: Response is not defined" message
// $ npm install whatwg-fetch --save-dev
import 'whatwg-fetch';

// To fix "ReferenceError: fetch is not defined"
import { mockFetch } from './test-helpers/mock-fetch'

import { OneExampleComponent } from "./OneExample";

describe("OneExampleComponent", () => {
    const mockFetchResponse = [{}];
    window.fetch = mockFetch(mockFetchResponse);
    test("renders the OneExampleComponent component", () =>
        React.act(() => {
            render(
                <MemoryRouter>
                    <OneExampleComponent
                        parentData={{}}
                    />
                </MemoryRouter>
            );
        })
    )
});

Answer 3

就我而言，我只是用