19

によってビルドされた既存のプロジェクトのテストファイルを作成しようとしました

https://github.com/facebookincubator/create-react-app

しかし、実行したときにこのエラーが発生しましたnpm test a

FAIL  src/__tests__/movie_single/MovieSingle-test.js
  ● Test suite failed to run

    matchMedia not present, legacy browsers require a polyfill

      at Object.MediaQueryDispatch (node_modules/enquire.js/dist/enquire.js:226:19)
      at node_modules/enquire.js/dist/enquire.js:291:9
      at Object.<anonymous>.i (node_modules/enquire.js/dist/enquire.js:11:20)
      at Object.<anonymous> (node_modules/enquire.js/dist/enquire.js:21:2)
      at Object.<anonymous> (node_modules/react-responsive-mixin/index.js:2:28)
      at Object.<anonymous> (node_modules/react-slick/lib/slider.js:19:29)
      at Object.<anonymous> (node_modules/react-slick/lib/index.js:3:18)
      at Object.<anonymous> (src/components/movie_single/MovieDetailsBox.js:4:45)
      at Object.<anonymous> (src/components/movie_single/MovieSingle.js:3:50)
      at Object.<anonymous> (src/__tests__/movie_single/MovieSingle-test.js:3:46)
      at process._tickCallback (internal/process/next_tick.js:103:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.642s
Ran all test suites matching "a".

だからこれは私のpackage.json

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer-stylus": "0.10.0",
    "concurrently": "3.0.0",
    "react-scripts": "0.6.1",
    "stylus": "0.54.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "watch": "concurrently --names 'webpack, stylus' --prefix name 'npm run start' 'npm run styles:watch'",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
  }
}

そして、これは私のMovieSingle-test.js

import React from 'react';
import ReactDOM from 'react-dom';
import MoviesSingle from '../../components/movie_single/MovieSingle';

it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<MoviesSingle />, div);
});

では、どうすればこれを修正し、少なくとも一般的な反応コンポーネントのテストに合格させることができますか?

ありがとう！

4

7 に答える 7

1

GatsbyJS を使用している場合は、@maow からのコードをルート ディレクトリの loadershim.js ファイル内に配置します。

于 2018-10-16T12:44:22.540 に答える