karma-runner / karma-runner/karma

npm test fails - using expect.createSpy and ReactTestUtils.Simulate.submit

Open
#2,949 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### Expected behaviour
The failing test should all pass.

### Actual behaviour

In my App, have a CountdownForm component as below. The component creates an input form, where I input a number (which is total number of seconds) and the component returns the formatted version of that number in minutes and seconds. The component works fine in the project, giving me the desired output. But the test fails

Code in CountdownForm component.

```
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 (




Start


);
}
});
```
And the below is the contents of my test file for the above component following [ReactTestUtil's Simulate doc](https://reactjs.org/docs/test-utils.html#simulate) and [expect.createSpy doc](https://github.com/mjackson/expect#spy-tohavebeencalledwith)

```
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();
var $el = $(ReactDOM.findDOMNode(countdownForm));

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

expect(spy).toHaveBeenCalledWith(109);
});
```
And when I run ``npm test`` get the below error for this specific test.

```
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.
```

- Karma version (output of `karma --version`):

karma: ^1.7.1

- Relevant part of your `karma.config.js` file

```
var webpackConfig = require('./webpack.config.js');

module.exports = function (config) {
config.set({
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'app/tests/**/*.test.jsx'
],
preprocessors: {
'app/tests/**/*.test.jsx': ['webpack', 'sourcemap']
},
reporters: ['mocha'],
client: {
mocha: {
timeout: '5000'
}
},
webpack: webpackConfig,
webpackServer: {
noInfo: true
}
});
};

```

### Environment Details

I am using Ubuntu 16-04 and Chrome Version 63.0.3239.108 (Official Build) (64-bit). And below from my package.json

```
react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"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",
"webpack": "^3.8.1"`
```

### Steps to reproduce the behaviour

Here's the [github repo of the project](https://github.com/rohan-paul/ReactCountdownTimer)

And the test file that's failing is - https://github.com/rohan-paul/ReactCountdownTimer/blob/master/app/tests/components/CountdownForm.test.jsx

Contributor guide

Open the contributing guide

Research direction

Reproduce the failure from the linked ReactCountdownTimer repository, starting with app/tests/components/CountdownForm.test.jsx and its Karma configuration. Inspect the spy passed to CountdownForm and the ReactTestUtils.Simulate.submit call, then run npm test. Done means the failing test has a clear root cause and the test suite passes with the intended callback assertion.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery, react, webpack
Domain
testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.