测试 Typescript React 组件在 getByText 上给出错误

Question

我正在尝试向使用 Typescript 和 React 编写的应用程序添加单元测试。为了简单起见，我有一个非常基本的组件。

import React from "react";
import ReactDOM from "react-dom";

type TypeProps = { }
type TypeState = { }

class App extends React.Component<TypeProps, TypeState> {
    constructor(props:TypeProps) {
        super(props);
        this.state = { };
    }
    render() {
        return(<p>Literally Nothing</p>);
    }
}

function renderApp() {
    let AppElement = document.getElementById("app");
    if(AppElement) { ReactDOM.render(<App />, AppElement); }
}

renderApp();
export { renderApp }

安装了我认为测试所需的一切内容

npm install --save-dev jest ts-jest @types/jest
npm install --save-dev @testing-library/jest-dom @testing-library/react

然后使用 jest.config.json

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom'
};

所以这一切都很好，我没有进行任何单元测试

import React from "react";
import ReactDOM from "react-dom";
import "@testing-library/jest-dom";
import { render } from "@testing-library/react";

import { renderApp } from "./App";

test("Literally Nothing", function() {
    renderApp();
    expect(getByText("App")).toBeInTheDocument();
});

但是它在 上抛出以下错误build 和 npm run test

TS2304: Cannot find name 'getByText'.

我是否缺少安装或配置步骤？

Answer 1

您缺少 getByText ，它没有导入到任何地方。
我建议您导入 screen

import { screen } from '@testing-library/react';
//....
renderApp();
const appText = screen.getByText("App");
expect(appText).toBeInTheDocument();

另外，这将始终资产错误，因为在您的组件上没有任何具有值 "App" 的文本，将呈现的唯一文本是 "Literally没什么”。

所以像这样会起作用：

const appText = screen.getByText("Literally Nothing");
expect(appText).toBeInTheDocument();