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
エラー?
Jestは、react-scriptsに含まれています。このエラーは、react-scriptsで開始されたプロジェクトにJestをインストールしたときに発生した競合が原因です。 「Getting started with Jest」ガイドでは、「クリーンな」プロジェクトを想定しています。
(開発)依存関係からJestを削除するだけで、動作するはずです。
ReactコンポーネントをテストするためにJestを使用する場合(おそらくこれを行う))、package.json
のテストスクリプトをそのままreact-scripts test --env=jsdom
に変更する必要があります。
この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.
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に同梱されています。セットアップのために追加の手順を実行する必要はありません。次のセクションに進んでください。
package.json
ファイル{ この問題を見る }のテストスクリプトを変更しないでください。その中のデフォルト"test": "react-scripts test --env=jsdom",
を保持します。Dev依存関係からjest
を削除するだけです。これを行うには、次のコマンドを実行します。
npm remove --save-dev jest
私の問題はこれで解決します:
。
package.jsonにreact-scriptsとjestの両方がある場合は、jestを削除します。
次に、package-lock.json、yarn.lock、およびnode_modulesを削除します。
次に、npm install(またはyarnを実行しますこれを使って)。 〜ダン・アブラモフ〜。 問題#5119 。
追加
"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のtest
commandを更新(または新しいコマンドを追加)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を実行し、すべてを再度インストールします。テストは正常に実行されるはずです。
インストール済みのjest
をv20.0.4
npm install -D [email protected]
にダウングレードする必要があります
これは古い問題ですが、私は同じ問題に直面していました。 react-scripts
パッケージがあり、coverageTreshold
に問題があるJestバージョン20.x.x
を使用しています。新しいreact-scripts
バージョンを使用することはできませんでした。唯一助けられたのは、糸の解像度を使用することでした。詳細はこちらをご覧ください https://yarnpkg.com/lang/en/docs/selective-version-resolutions/ 。