4

这有点令人震惊，但我长期以来一直试图找到一个简单的例子来说明如何使用 jest 和 typescript 测试一个愚蠢的反应组件，但我无法成功。我看过： https ://basarat.gitbooks.io/typescript/content/docs/testing/jest.html 如何将 react-test-renderer/shallow 与 typescript 一起使用？ 如何在 Jest 单元测试中查看渲染的 React 组件是什么样的？

没有任何效果。大多数时候我得到

Test suite failed to run
'App' refers to a value, but is being used as a type here.

我是新来的反应和开玩笑。我试过 react-test-renderer 和酵素。在这个阶段我也不介意，最不可知的可能会很棒。

我所拥有的：这是我的 package.json

{
    "name": "web",
    "version": "1.0.0",
    "description": "mySample",
    "main": "index.js",
    "scripts": {
        "build-dev": "webpack --watch",
        "build": "webpack",
        "start-dev": "nodemon build/server.js",
        "start": "node build/server.js",
        "test": "jest"
    },
    "dependencies": {
        "express": "^4.17.1",
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    },
    "devDependencies": {
        "@types/enzyme": "^3.10.3",
        "@types/express": "^4.17.0",
        "@types/jest": "^24.0.16",
        "@types/node": "^12.6.9",
        "@types/react": "^16.8.24",
        "@types/react-dom": "^16.8.5",
        "enzyme": "^3.10.0",
        "jest": "^24.8.0",
        "nodemon": "^1.19.1",
        "ts-jest": "^24.0.2",
        "ts-loader": "^6.0.4",
        "typescript": "^3.5.3",
        "webpack": "^4.39.1",
        "webpack-cli": "^3.3.6",
        "webpack-node-externals": "^1.7.2"
    }
}

如您所见，我希望使用 typescript 进行强类型测试，这就是我需要酶类型的原因。

我有一个愚蠢的反应组件 App.tsx

import * as React from "react";

interface WelcomeProps {
    name: string;
}

const App: React.FC<WelcomeProps> = ({ name }) => {
    return <h1>Hello, {name}</h1>;
};

export default App;

我想有一个测试文件App.test.ts ，我只是测试给定<App name="whatever" />渲染，DOM应该有<h1>Hello, whatever</h1>

我的尝试是：

import * as React from "react";
import App from "./App";
import { shallow } from "enzyme";

describe("App component", () => {
    it("returns the name passed as props", () => {
        const app = shallow(<App name="test" />);
        expect(app).toMatchSnapshot();
    });
});

它因上述错误而失败，而且 VS Code 在浅参数上显示错误，就好像它不理解 JSX。

如果需要我jest.config.js的是：

module.exports = {
    roots: ["<rootDir>/src"],
    transform: {
        "^.+\\.tsx?$": "ts-jest"
    }
};

没有比这更简单的了，但我失败了！

PS：我发现的绝大多数文章都没有使用打字稿和类型定义，但这是我想要的。

4

3 回答 3

7

我知道这是一个老问题，但我遇到了同样的问题，它有一个简单的解决方案：您的文件名必须具有 .tsx 扩展名才能使用 jsx 标签。

于 2020-09-23T21:34:12.473 回答
1

更新：虽然这被接受了，但下面的@alphamz 提供了更好的答案（.tsx 与 .ts）。也就是说，对于想要快速启动和运行的 React 新手，我仍然建议使用 create-react-app 或 create-next-app（在 2021 年会更好），然后您就可以从经过时间考验的良好设置开始。

原始答案： 对于刚接触React和Jest喜欢自己的人，我强烈建议从Create-React-App扩展Typescript开始

https://facebook.github.io/create-react-app/docs/adding-typescript

这为带有开玩笑支持的 TS 使用提供了一个很好的基准（也有相当强大的应用程序默认值）

yarn create react-app my-app --typescript

从那里，React-Testing-Library在这里使用： https ://testing-library.com/docs/react-testing-library/intro

你可以写这样的测试

import { render } from 'react-testing-library';

test('init GameTotaler', () => {
  const myName: string = 'foo';
  const { getByText } = render(
    <App name={foo} />
  );
  expect(getByText(`Hello, ${foo}`)).toBeTruthy();
});

@testing-library（react-testing-library 是其中的一部分）由 Kent C. Dodds 编写和支持，他是 React 文章和一般测试方面非常强大的作者。

他最近写了为什么浅渲染（这是 Enzyme 中所做的）可以成为一种反模式（至少对他而言） - https://kentcdodds.com/blog/why-i-never-use-shallow-rendering

请注意，它create-react-app确实在其生成的框架内隐藏了一些东西，但得到了很好的支持。

一个强大的优势 - 如果您想在 create-react-app 生成代码库后完全退出它，您可以运行react-scripts eject，然后您可以看到秘诀，同时仍然拥有完全可构建的代码库。

希望这有帮助，祝你好运！

于 2019-08-05T17:42:54.197 回答
0

reactjs.org推荐React 测试库。

如果您想将它与 Jest 一起使用并且还需要测试 Typescript 代码，那么您可能会看一下crisp-react示例项目。它有一个 React 客户端，测试可以在这里找到。

于 2019-09-02T10:56:59.783 回答