karma-runner / karma-runner/karma
npm test fails - using expect.createSpy and ReactTestUtils.Simulate.submit
- 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
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