4

My Project is based on Create-react-app setup and my package.json script for testing unit tests is as below

"scripts": {
    "test": "react-scripts test --coverage",
 }

or

 "test": "react-scripts test --coverage --collectCoverageFrom=src/**/*.{js,jsx}

It executes tests in Test folder but doesn't display coverage report.Can you help to solve this issue. enter image description here

My file structure is as below src | --- Test ---components> moduleA > package1 > package2> transaction.js, abcd.js... etc

ProcessEvent.test.js

describe('ProcessEvent Component', () => {

    const expectedProps = {
        "event": {iconStatus:'active', desc:'abc'}
    }

    it('should render without error', () => {
        const component = <ProcessEvent {...expectedProps}/>
        const wrapper = component.find('.eventclass');
        expect(wrapper.length).toBe(1);
    });

    it('should receive valid props', () => {
        const component = shallow(<ProcessEvent {...expectedProps}/>);
        const wrapper = component.find('.eventclass');
        expect(component.props).toBeDefined();
    });

});
Shrikant Dande
  • 223
  • 1
  • 5
  • 17
  • Can you post some examples of your tests? Could you try running your tests directly with jest? i.e. "jest --coverage" – dyouberg Oct 21 '19 at 15:35
  • Hi @dyouberg, to use "jest --coverage" I will have to eject out of create-react-app setup, which I dont want to do. Now it says 'jest can not parse file' – Shrikant Dande Oct 21 '19 at 16:02
  • Ok, fair enough. It looks like the coverage utility is running correctly, could you post examples of your tests? Maybe that's where the problem is – dyouberg Oct 21 '19 at 16:04
  • I have added my ProcessEvent.test.js component I have similar 3 other test components. – Shrikant Dande Oct 21 '19 at 16:14

1 Answers1

1

Using --watchAll=false parameter makes it list down all the files.

Example package.json

{
...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "coverage": "react-app-rewired test -- --coverage --watchAll=false",
    "eject": "react-scripts eject",
    "serve": "node server.js"
  },
...
}

Also your coverage report is physically located at /coverage/lcov-report. Opening an index.html located there, would show you the coverage report in your browser.

Sujit Y. Kulkarni
  • 1,186
  • 3
  • 22
  • 37
  • 1
    I was facing this kind of issue too using `--watchAll=false` did print out the result on my console put the generated report was still showing empty... do you have any idea what will be causing it? – Arinze Ogbonna Jul 08 '20 at 22:40