Тест npm не пройден - используются службы ожидаемости.createSpy и ReactTestUtils.Simulate.submit.

Question

Я новичок в React и пытаюсь реализовать проект, в котором у меня есть компонент CountdownForm, как показано ниже.

Компонент создает форму ввода, в которую я ввожу число (общее количество секунд), а компонент дает мне отформатированную версию этого числа в минутах и ​​секундах. Компонент отлично работает в проекте, давая мне желаемый результат.

Любое руководство по решению источника ошибки, было бы большим подспорьем.

Код в компоненте CountdownForm.

import React from 'react';
import createReactClass from 'create-react-class';

    var CountdownForm = createReactClass({
      onSubmit: function(e) {
        e.preventDefault();
        var strSeconds = this.refs.seconds.value;

        if(strSeconds.match(/^[0-9]*$/)) {
          this.refs.seconds.value = '';
          this.props.onSetCountdown(parseInt(strSeconds, 10));
        }
      },
      render: function () {
        return (
          <div>
            <form ref="form" onSubmit={this.onSubmit} className="countdown-form">
              <input type="text" ref="seconds" placeholder="Enter time in seconds"/>
              <button className="button expanded">Start</button>
            </form>
          </div>
        );
      }
    });

Ниже приведено содержимое моего тестового файла для вышеуказанного компонента, следующего за документом ReactTestUtil Simulate doc и wait.createSpy.

import React from 'react';
import ReactDOM from 'react-dom';
import expect, {createSpy, spyOn, isSpy} from 'expect';
import $ from 'jquery';
import CountdownForm from 'CountdownForm';
import ReactTestUtils from 'react-dom/test-utils';

describe('CountdownForm', () => {

  it('should call onSetCountdown if valid seconds entered', () => {
    var spy = expect.createSpy;
    var countdownForm = ReactTestUtils.renderIntoDocument(<CountdownForm onSetCountdown={spy}/>);
    var $el = $(ReactDOM.findDOMNode(countdownForm));

    countdownForm.refs.seconds.value = '109';
    ReactTestUtils.Simulate.submit($el.find('form')[0]);

    expect(spy).toHaveBeenCalledWith(109);
  });

И когда я бегу npm test получите ошибку ниже для этого конкретного теста. Я думаю, вероятно, мои ошибки в коде находятся вокруг линии ReactTestUtils.Simulate.submit($el.find('form')[0]); читая эту страницу GitHub.

SUMMARY:
✔ 6 tests completed
✖ 2 tests failed

FAILED TESTS:
  CountdownForm
    ✖ should call onSetCountdown if valid seconds entered
      Chrome 63.0.3239 (Linux 0.0.0)
    Error: Script error. (:0)
        at Object.invokeGuardedCallbackDev (webpack-internal:///77:581:16)
        at Object.invokeGuardedCallback (webpack-internal:///77:438:27)
        at Object.invokeGuardedCallbackAndCatchFirstError (webpack-internal:///77:452:43)
        at executeDispatch (webpack-internal:///77:836:19)
        at executeDispatchesInOrder (webpack-internal:///77:858:5)
        at executeDispatchesAndRelease (webpack-internal:///77:956:5)
        at executeDispatchesAndReleaseSimulated (webpack-internal:///77:964:10)
        at forEachAccumulated (webpack-internal:///77:937:8)
        at Object.processEventQueue (webpack-internal:///77:1110:5)

    ✖ should call onSetCountdown if valid seconds entered 
      Chrome 63.0.3239 (Linux 0.0.0)
    Error: Script error. (:0)
        at Object.invokeGuardedCallbackDev (webpack-internal:///77:581:16)
        at Object.invokeGuardedCallback (webpack-internal:///77:438:27)
        at Object.invokeGuardedCallbackAndCatchFirstError (webpack-internal:///77:452:43)
        at executeDispatch (webpack-internal:///77:836:19)
        at executeDispatchesInOrder (webpack-internal:///77:858:5)
        at executeDispatchesAndRelease (webpack-internal:///77:956:5)
        at executeDispatchesAndReleaseSimulated (webpack-internal:///77:964:10)
        at forEachAccumulated (webpack-internal:///77:937:8)
        at Object.processEventQueue (webpack-internal:///77:1110:5)

07 01 2018 00:07:56.223:WARN [launcher]: Chrome was not killed in 2000 ms, sending SIGKILL.

Содержимое моего package.json

"scripts": {
    "test": "karma start",
    "generate": "rc-autocomplete",
    "build": "webpack --config webpack.config.js",
    "start": "node server.js"
  },      
  "dependencies": {
    "axios": "^0.16.2",
    "babel-cli": "^6.26.0",
    "create-react-class": "^15.6.2",
    "express": "^4.15.5",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "tern-node-express": "^0.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "enzyme-adapter-react-16": "^1.1.0",
    "eslint": "^4.7.2",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0",
    "expect": "^21.2.1",
    "foundation-sites": "^6.4.4-rc1",
    "jquery": "^3.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.6",
    "mocha": "^4.0.1",
    "node-sass": "^4.5.3",
    "prettier": "1.7.4",
    "react-autocomplete-cli": "0.0.3",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.2",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1"
  }