web-dev-qa-db-ja.com

TypeError:environment.setupはReact Testingの関数ではありません

Jest Webサイトに示されている例を実装しようとしていました: Getting started with Jest

実行中npm test on次のエラーが表示されました。

FAIL  src/sum.test.js
  ● Test suite failed to run

    TypeError: environment.setup is not a function

      at node_modules/jest-runner/build/run_test.js:112:23

sum.js

function sum(a, b){
  return a+b;
}
module.exports = sum;

sum.test.js

const sum = require('./sum');

test('adding sum function', () => {
  expect(sum(234,4)).toBe(238);
})

sum.jsおよびsum.test.jsは、 Getting started with Jest に示されている例の正確なコピーです。

package.json

{
  "name": "jest-demo-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "jest": "^22.0.4"
  }
}

だから、どうすればTypeError: environment.setup is not a functionエラー?

23
arsho

Jestは、react-scriptsに含まれています。このエラーは、react-scriptsで開始されたプロジェクトにJestをインストールしたときに発生した競合が原因です。 「Getting started with Jest」ガイドでは、「クリーンな」プロジェクトを想定しています。

(開発)依存関係からJestを削除するだけで、動作するはずです。

ReactコンポーネントをテストするためにJestを使用する場合(おそらくこれを行う))、package.jsonのテストスクリプトをそのままreact-scripts test --env=jsdomに変更する必要があります。

19
xor

このgithubの問題に基づきます: @ jest-environment node not working in v22

sum.test.jsを次のように更新しました:

/**
 * @jest-environment node
 */

const sum = require('./sum');

test('adding sum function', () => {
  expect(sum(234,4)).toBe(238);
})

TypeError: environment.setup is not a functionを取り除きました。

出力:

PASS  src/sum.test.js
  ✓ adding sum function (2ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.438s
Ran all test suites.

更新しました

いくつかの答えを読んで、今日はシナリオを作り直しました。

ステップ1:create-react-appを使用して新しいプロジェクトを作成しました。

コマンド:create-react-app demo-app

package.jsonファイル:

{
  "name": "demo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

このファイルは、jestが依存関係に含まれていないことを示しています。

ステップ2:公式に示されているように、srcフォルダーにsum.jsおよびsum.test.jsファイルを含めました- 入門ガイド

sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

sum.test.js

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

ステップ3:yarn testファイルにjestを含めずにpackage.jsonコマンドを実行しました。そのため、このテストコマンドは、react-scripts test --env=jsdomに示すようにpackage.jsonを使用します。

テストの出力:

PASS  src/sum.test.js
PASS  src/App.test.js

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.594s, estimated 1s
Ran all test suites related to changed files.

ステップ4:package.jsonファイルを更新して、テストスクリプトとしてjestを使用しました。

{
  "name": "demo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  }
}

再びyarn testを実行しましたが、出力は次のとおりです。

$ jest
 PASS  src/sum.test.js
 FAIL  src/App.test.js
  ● Test suite failed to run

    /<PATH>/demo-app/src/App.test.js: Unexpected token (7:18)
         5 | it('renders without crashing', () => {
         6 |   const div = document.createElement('div');
      >  7 |   ReactDOM.render(<App />, div);
           |                   ^
         8 |   ReactDOM.unmountComponentAtNode(div);
         9 | });
        10 | 

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.645s, estimated 1s
Ran all test suites.

長すぎる;読まなかった(TL; DR)

  1. yarn add --dev jestコマンドを使用する場合は、npm install --save-dev jestまたはcreate-react-appを使用してjestを追加しないでください。 node-modulesを使用する場合、jestはプロジェクトのcreate-react-appに含まれます。

Jest公式ドキュメント から:

作成によるセットアップReact App

Reactを使い始めたばかりの場合は、Create React Appを使用することをお勧めします。すぐに使用でき、Jestに同梱されています。セットアップのために追加の手順を実行する必要はありません。次のセクションに進んでください。

  1. package.jsonファイル{ この問題を見る }のテストスクリプトを変更しないでください。その中のデフォルト"test": "react-scripts test --env=jsdom",を保持します。
12
arsho

Dev依存関係からjestを削除するだけです。これを行うには、次のコマンドを実行します。

npm remove --save-dev jest
7
thierno

私の問題はこれで解決します:

package.jsonにreact-scriptsとjestの両方がある場合は、jestを削除します。
次に、package-lock.json、yarn.lock、およびnode_modulesを削除します。
次に、npm install(またはyarnを実行しますこれを使って)。 〜ダン・アブラモフ〜。 問題#5119

4
tjungChaniago

追加

"jest": {
    "testEnvironment": "node"
  }

package.jsonファイルの場合、package.jsonは次のようになります。

{
  "name": "jest-demo-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "jest": "^22.0.4"
  },
   "jest": {
    "testEnvironment": "node"
  }
}

[〜#〜] update [〜#〜]

create appを使用していてこの問題を抱えている人には、2つの解決策があります。

1-package.jsontestcommandを更新(または新しいコマンドを追加)react-scripts testではなくjestに、react-scripts test @Xinyang_Liがコメントで述べているように、package.jsonでjestオプションを許可しません。

2- package.jsonのtestコマンドを変更したくない場合、デフォルトのcreate-react-app testを使用します。 packge.jsonからjestオプションを削除します(存在する場合)

 "jest": {
    "testEnvironment": "node"
  }

次にremovenode_modulesを実行してからnpm installを実行し、すべてを再度インストールします。テストは正常に実行されるはずです。

3
Mhmdrz_A

インストール済みのjestv20.0.4npm install -D [email protected]にダウングレードする必要があります

1
FDisk

これは古い問題ですが、私は同じ問題に直面していました。 react-scriptsパッケージがあり、coverageTresholdに問題があるJestバージョン20.x.xを使用しています。新しいreact-scriptsバージョンを使用することはできませんでした。唯一助けられたのは、糸の解像度を使用することでした。詳細はこちらをご覧ください https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

0
Honza Prášil