web-dev-qa-db-ja.com

基本的な反応関数コンポーネントであるjestとTypeScriptでテストする方法

これは少し衝撃的ですが、私はjestとTypeScriptを使用して愚かな反応コンポーネントをテストする方法についての簡単な例を見つけるために長い間努力してきましたが、成功することができません。私は見てきました： https://basarat.gitbooks.io/TypeScript/content/docs/testing/jest.htmlreact-test-renderer/shallowの使用方法typescript？レンダリングされたReactコンポーネントがJestユニットテストでどのように見えるかを確認する方法？

何も動作しません。ほとんどの場合、私は

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

私は反応して冗談を言うのが初めてです。反応テストレンダラーと酵素を試しました。この段階でも私は気にしません。可能な限り不可知論者が素晴らしいでしょう。

私が持っているもの：これは私の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コードは浅い引数にJSXを理解していないかのようにエラーを表示します。

必要な場合に備えてjest.config.jsは：

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

これより簡単にすることはできませんが、私は失敗しています！

PS：私が見つけた記事の大部分はTypeScriptとタイプ定義を使用していませんが、これは私が欲しいものです。

reactjstypescriptts-jest
3
diegosasw

reactjs.org 推奨 Reactテストライブラリ。

Jestで使用し、TypeScriptコードをテストする必要がある場合は、 crisp-react サンプルプロジェクトをご覧ください。 Reactクライアントがあり、テストを見つけることができます here 。

0
winwiz1