小编Abh*_*ngh的帖子

我正在测试一个使用 Redux 构建的非常基本的反例元素。这是我的测试：

import userEvent from "@testing-library/user-event";
import { render, screen } from "src/testUtils";
import { Counter } from "../Counter";

describe("Counter screen", () => {
  it("buttons should change displayed value", () => {
    render(<Counter />);
    const counter = screen.getByText(/counter*/i);
    const plus = screen.getByRole("button", { name: /\+/i });
    const minus = screen.getByText(/\-/i);

    expect(counter).toHaveTextContent("0");
    userEvent.click(plus);
    userEvent.click(plus);
    expect(counter).toHaveTextContent("10");
    userEvent.click(minus);
    expect(counter).toHaveTextContent("9");
  });
});

测试全部通过，但我收到了大量错误jsdom测试全部通过，但我在记录到控制台

Error: Not implemented: window.computedStyle(elt, pseudoElt)
          at module.exports (/home/abhijeet/Documents/github/react-template/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
          at Window.getComputedStyle (/home/abhijeet/Documents/github/react-template/node_modules/jsdom/lib/jsdom/browser/Window.js:657:7)
          at computeMiscTextAlternative (/home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:306:62)
          at computeTextAlternative (/home/abhijeet/Documents/github/react-template/node_modules/@testing-library/react/node_modules/dom-accessibility-api/sources/accessible-name.ts:521:11)
          at …

我正在尝试实现React 文档中提到的基于路由的代码拆分。

这是我在添加惰性实现之前的应用程序。这工作正常：

import Counter from "./Counter";
import Home from "./Home";
import Login from "./Login";

export function App() {
  return (
      <Router>
        <Suspense fallback={<div>"Loading.."</div>}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/counter" component={Counter} />
          </Switch>
      </Router>
  );
}

我所做的只是用这个替换了 3 个导入：

import { lazy, Suspense } from "react";
const Home = lazy(() => import("./Home"));
const Login = lazy(() => import("./Login"));
const Counter = lazy(() => import("./Counter"));

此代码构建成功，但浏览器上没有任何渲染，我在控制台中收到此错误：

Uncaught undefined
The above error …

我正在尝试在我的公司系统上使用 Next.js，但是每当我运行“npm run build”时，构建都会失败并显示以下消息： Error: Cannot find module 'sharp'

我尝试安装sharp，但出现此错误：

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.10.5/libvips-8.10.5-win32-x64.tar.br 
ERR! sharp getaddrinfo ENOTFOUND github.com 
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies

这可能是因为出于安全原因，我的系统终端上阻止了 github URL。有没有办法在不从github中获取的情况下安装sharp？我可以在浏览器上访问 GitHub，所以如果从那里下载文件然后以某种方式安装它是可能的，我可以这样做。

操作系统：Windows 10

我正在使用 Express 提供一个 create-react-app 服务build，并在提供服务之前附加一些脚本标签index.html。由于我index.html在服务之前操作文件，因此我不希望我的express.static中间件处理/or 的请求/index.html。以下是我为实现这项工作所做的努力：

app.use(
  [/^\/index\.html/, /^\//],
  express.static(path.join(__dirname, "../../build"))
);

app.get("/*", function (req, res) {
  // logic to manipulate index.html
  res.send($.html());
});

但这只会给我一个空白的白屏，即使原始的 html 代码被插入，所以我假设静态中间件仍在处理请求/，它只是停止服务其他静态资产。

如何配置此代码以便我的express.static 停止覆盖我的/*路线？

保留路由很重要，/*因为我希望它能够处理客户端应用程序中的反应路由器中定义的所有路由。因此，我无法将express.static中间件移动到/*路由下方，否则这将覆盖对静态资产的所有请求。