React Test-组件访问窗口对象时错误

Question

由于特定原因，我在index.html文件中使用脚本 public 文件夹中，此脚本在window> window对象上创建属性。该属性是异步函数。这是我在public/index.html中创建的脚本：

 <script>
      const txt = "Hello Word";

      async function waitText() {
        try {
          const data = await fetch(
            "https://jsonplaceholder.typicode.com/all/1"
          );
          const text = await data.json();
          returntext;
        } catch (error) {
          console.error(error);
          return "Error";
        }
      }

      Object.defineProperty(window, "waitText", { value: waitText });
    </script>

我的应用程序组件首先渲染加载...在USESTATE中指定的文本，然后在使用效果中的异步函数调用Windom对象的功能，等待响应并执行响应固定状态并更改加载...文本为从API获得的文本。到目前为止，该应用程序毫无问题地工作。在这里，app.tsx的代码

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [txt, setTxt] = useState("Loading...");

  useEffect(() => {
    const getTxt = async() => {
      try {
        const text = await window.waitText();
        setTxt(text.title);
      } catch (error) {
        console.error(error);
      }
    };

    getTxt();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{txt}</p>
      </header>
    </div>
  );
}

export defaultApp;

到目前为止，应用程序正常运行。问题是用开玩笑和反应测试图表进行测试。在这里，文本的代码：

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', async () => {
  render(<App />);
    screen.debug()
  const linkElement = await screen.findByText("delectus aut autem");
  expect(linkElement).toBeInTheDocument();
});

运行此测试时，在呼叫window.waittext（）时专门在使用效率区域中引起错误。显然，当执行嘲笑测试时，它不会执行索引中的脚本。

从public/index.html中删除脚本不是解决方案。很好，尽管这不是一个好的做法，但在某些情况下，有必要这样做。

创建反应的文档对此表示了：

某些库可能与webpack不相容，您别无选择，您别无选择但是将其包括在标签中。

无论如何，如何使该组件通过测试？

Answer 1

您可以模拟window.waittext（）方法及其在测试案例中呈现组件之前的解决/拒绝值。

例如

app.jsx：

import { useEffect, useState } from 'react';
import React from 'react';

function App() {
  const [txt, setTxt] = useState('Loading...');

  useEffect(() => {
    const getTxt = async () => {
      try {
        const text = await window.waitText();
        setTxt(text.title);
      } catch (error) {
        console.error(error);
      }
    };

    getTxt();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>{txt}</p>
      </header>
    </div>
  );
}

export default App;

app.test.jsx：

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import App from './App';

test('renders learn react link', async () => {
  Object.defineProperty(window, 'waitText', { value: () => Promise.resolve({ title: 'delectus aut autem' }) });
  render(<App />);
  const linkElement = await screen.findByText('delectus aut autem');
  expect(linkElement).toBeInTheDocument();
});

测试结果：

 PASS  stackoverflow/72355656/App.test.jsx (13.14 s)
  ✓ renders learn react link (33 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |   92.31 |      100 |     100 |   91.67 |                   
 App.jsx  |   92.31 |      100 |     100 |   91.67 | 13                
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.9 s, estimated 15 s