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エラー？

javascriptreactjstestingpackages
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.jsonのtestcommandを更新（または新しいコマンドを追加）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

インストール済みのjestをv20.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