测试 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。我建议你导入屏幕

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

此外，这将始终为 false，因为在您的组件上没有任何值为 "App""App" 的文本，将呈现的唯一文本是 “完全没有”.

这样就可以了：

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

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

Testing a Typescript React Component Giving Error on getByText

typescript

reactjs

react-testing-library

ts-jest