I'm testing a React component with 3 functions, I've written tests that use all 3 of these functions and the test pass however in the code coverage report I'm only getting 33%. The component is below.
const AddWidget = ({ }: Props) => {
var id = generateGuid().slice(0, 8);
var showWidget = () => {
document.getElementById(id).style.zIndex = "10";
}
var hideWidget = () => {
document.getElementById(id).style.zIndex = "200";
}
return (
<div onMouseLeave={hideWidget} onMouseEnter={showWidget} className="addWidget" >
<div className="divide" />
<div id={id} className="cover" />
<div>
<CircularButton type={CircularButtonType.DarkAdd} small={true} />
<p>Add a widget here</p>
</div>
</div>
);
}
export default AddWidget;
And my tests...
import * as React from 'react';
import * as Enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import AddWidget from './AddWidget';
Enzyme.configure({ adapter: new Adapter() });
const addWidget = Enzyme.mount(<AddWidget />, { attachTo: document.body });
describe('AddWidget', () => {
test('renders without crashing', () => {
expect(addWidget.find(AddWidget).length).toBe(1);
});
test('should render parent element with class "addWidget"', () => {
expect(addWidget.find('div').at(0).hasClass('addWidget')).toBe(true);
});
test('should cover component from view when mouse is not hovering', () => {
addWidget.simulate('mouseEnter');
addWidget.simulate('mouseLeave');
var covers = document.getElementsByClassName('cover');
for (var n = 0; n < covers.length; n++) {
expect((covers[n] as HTMLElement).style.zIndex).toBe("200");
}
});
test('should show component from view onMouseEnter', () => {
addWidget.simulate('mouseEnter');
var covers = document.getElementsByClassName('cover');
for (var n = 0; n < covers.length; n++) {
expect((covers[n] as HTMLElement).style.zIndex).toBe("10");
}
});
});
The tests specify it's the showWidget and hideWidget functions that aren't being tested but the last 2 tests definitely run these functions otherwise the tests wouldn't pass.
Is this a code coverage bug? Is it that it doesn't like that I'm using pure Javascript functions or am I fundamentally misunderstanding function code coverage?
EDIT: coverage report images below
I found what the issue was, I was running the tests with the command react-scripts test --coverage --coverageDirectory=output/coverage --coverageReporters text --env=jsdom which was updating the cobertura.xml file but not any of the html. I thought the html read the coberatura file and displayed it but that's not the case. Adding the html flag to coverageReporters fixed the issue.
Related
I'm trying to figure out why my test - which passes when ran alone - is failing whenever the describe block contains more than 1 test. Take this example, which I've taken from my real code and simplified:
describe('Create Account Form', () => {
const {container} = render(<CreateAccountForm />);
const email = container.querySelector('input[name="email"]');
const password1 = container.querySelector('input[name="password1"]');
it('Should render all fields', () => {
allInputs.forEach((input) => {
expect(input).toBeInTheDocument();
});
});
it('Another test', () => {
expect(email).toBeInTheDocument(); // fails
});
});
The 2nd test fails, but passes only when commenting out the first test, or re-rendering the container again in the test like this:
it('Another test', () => {
const {container} = render(<CreateAccountForm />);
const email = container.querySelector('input[name="email"]');
expect(email).toBeInTheDocument(); // passes
});
Why does this have to happen? I would much rather not have to re-render the container and declare new variables inside each test block.
Thank you
RTL will unmount React trees that were mounted with render in afterEach hook. See cleanup.
Please note that this is done automatically if the testing framework you're using supports the afterEach global and it is injected to your testing environment (like mocha, Jest, and Jasmine).
Move the render code into beforeEach or individual test case. So that we can create react trees before each test case. Isolate test cases from each other, using their own test data without affecting the rest.
E.g.
index.tsx:
import React from 'react';
export function Example() {
return (
<div>
<input name="email" />
<input name="password1" />
</div>
);
}
index.test.tsx:
import { render } from '#testing-library/react';
import '#testing-library/jest-dom/extend-expect';
import React from 'react';
import { Example } from './';
describe('70753645', () => {
let email, password1, allInputs;
beforeEach(() => {
const { container } = render(<Example />);
email = container.querySelector('input[name="email"]');
password1 = container.querySelector('input[name="password1"]');
allInputs = container.querySelectorAll('input');
});
it('Should render all fields', () => {
allInputs.forEach((input) => {
expect(input).toBeInTheDocument();
});
});
it('Another test', () => {
expect(email).toBeInTheDocument();
});
});
Test result:
PASS stackoverflow/70753645/index.test.tsx (9.222 s)
70753645
✓ Should render all fields (24 ms)
✓ Another test (3 ms)
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 9.717 s
package versions:
"#testing-library/react": "^11.2.2",
"jest": "^26.6.3",
I have a React child component which has button
export function Banner({argumentSetter}){
function handleOnClick(){
argumentSetter(argument.READ);
}
return(
<div>
<Button onClick={handleOnClick}>
<Icon name="delete" type="filled">
Discard
</Icon>
</Button>
</div>
)
}
And I have my argumentSetter in my parent component defined as following,
const [argument,setArgument] = useState<Argument>(argument.EDIT);
argumentSetter = useCallBack((val)=>{
setArgument(val);
},[argument]);
return(
<div>
<Banner argumentSetter={argumentSetter}/>
</div>
)
How to get 100% test coverage using jest.
To test the banner, your code should be like the following
import React from "react";
import { mount } from "enzyme";
import { Banner } from "./Banner.js";
import { argument } from "./arguments.js";
it("Button click leads to argument.READ", async () => {
let promiseResolve = null;
const argPromise = new Promise((resolve) => {
promiseResolve = resolve;
});
const argumentSetter = (arg) => promiseResolve(arg);
const banner = mount(<Banner argumentSetter={argumentSetter} />);
banner.find("button").simulate("click");
const newArg = await argPromise;
expect(newArg).toEqual(argument.READ);
});
Explanation:
We create an externally fulfillable promise variable, called argPromise which will resolve when promiseResolve is called, which is called when the argumentSetter is called. Hence, when the button click is simulated, it will resolve the updated argument to newArg variable (which should be argument.READ), and hence you can test if it matches your expectation.
This should hence cover all lines of your Banner component during testing.
I am trying to apply spyOn to check whether my fucntion download is called on mouse click but I am getting the error. I am already follwoing this question but still no leads. Can anyone tell me where I went wrong. I cannot figure out any clue.
Error
Argument of type '"download"' is not assignable to parameter of type '"context"'.
mcb = jest.spyOn(fileDownlaod.instance(), "download");
my react component is:
const Filer = ({Filey} ) => {
const download = () => {
Filey()
.then((res: Response) => res.blob())
.then((data: Blob) => {
const URL = URL.createObjectURL(data);
});
};
return (
<>
<button
onMouseOver={() => download()}
onClick={() => download()}
>
</button>
</>
);
};
export default Filer;
my jest test is :
import React from 'react';
import Filer from './Filer';
import { mount, ReactWrapper } from 'enzyme';
let filer: ReactWrapper<any>;
describe('Filer', () => {
it('clicked download', () => {
filer = mount(
<Filer />
);
const _download = () => {
//some thing
}
mcb = jest.spyOn(filer.instance(), "download").mockImplementation(_download);
filer.find('button').simulate('click')
expect(mcb.mock.calls.length).toEqual(1);
});
});
If you look at the answer you are already following. In the end it has mentioned that spyOn does not work on functional components inner functions.
This is what has been said:
Keep in mind that any methods scoped within your functional component are not available for spying
So you can spy on props passed.
So the correct implementation that should work, can be:
it('clicked download', () => {
Filey = jest.fn().mockImplementation(_Filey)
filer = mount(
<Filer Filey={Filey}/>
);
expect(Filey).toHaveBeenCalled();
});
I'm learning about unit testing React components using react-testing-library
I have the component rendering correctly, however, when I aim to break the test into smaller chunks inside a describe() function. The test breaks and here's why.
Current only one or the other test() passes but not both
import React from 'react'
import 'react-testing-library/cleanup-after-each'
import { render, fireEvent } from 'react-testing-library'
import Quantity from '../components/Quantity'
describe('Quantity Component', () => {
const { container, getByTestId } = render(<Quantity />)
// first test
test('checks that quantity is never 0', () => {
expect(getByTestId('quantity')).not.toBe('0')
})
// second test
test('checks for the initial product quantity count', () => {
expect(getByTestId('quantity')).toHaveTextContent('1')
fireEvent.click(getByTestId('increment'))
expect(getByTestId('quantity')).toHaveTextContent('2')
})
})
When trying to run both tests it errors:
Unable to find an element by: [data-testid="quantity"]
[data-testid="quantity"] is just an attribute that I passed inside my desired JSX tag.
The test passes when running only the first or second test but not both concurrently.
What am I missing here?
Cross-contamination is strictly discouraged in unit testing.
The problem is that a setup occurs only once per Quantity Component suite, while it should be done for each test. This is what beforeEach is for:
describe('Quantity Component', () => {
let container, getByTestId;
beforeEach(() => {
({ container, getByTestId } = render(<Quantity />));
});
...
You need to also use an afterEach cleanup.
describe('your tests', () => {
afterEach(cleanup);
beforeEach(() => ({container, getById} = render(<Quantity />))
it('does something', () => {
expect(getByTestId('quantity')).toHaveTextContent(0);
}
}
I suggest you call the render inside your it clauses, it keeps the tests easier to manage:
describe('Quantity Component', () => {
test('checks that quantity is never 0', () => {
const { container, getByTestId } = render(<Quantity />)
expect(getByTestId('quantity')).not.toBe('0')
})
test('checks for the initial product quantity count', () => {
const { container, getByTestId } = render(<Quantity />)
expect(getByTestId('quantity')).toHaveTextContent('1')
fireEvent.click(getByTestId('increment'))
expect(getByTestId('quantity')).toHaveTextContent('2')
})
})
The added advantage is that if for some reason one of your tests needs to run with different props you can do that more easily with this setup.
I have a React project where I have a component that maps throught an array of objects and render other components, like this:
return (
historyParts.map((historyPart, historyPartIndex) =>
(<div key={`historyPart${historyPartIndex}` // eslint-disable-line react/no-array-index-key
}
>
<div>
{historyPart.link &&
<Element>
<NavLink
to={createLocationForHistoryItems(handlingLocation, historyPart.link.code)}
>
{findLinkText(historyPart[0].link, intl)}
</NavLink>
</Element>
}
<BubbleText
bodyText={findText(historyPart.summary)}
className="bubble-panel__tekst"
/>
</div>
</div>
)));
This is a test that I wrote for this component:
import React from 'react';
import { shallowWithIntl, intlMock } from 'testHelpers/intl-enzyme-test-helper';
import { expect } from 'chai';
import { HistoryDescriptionType9} from './HistorikkMalType9';
const historyPart = {
cause: null,
actionPoint: null,
summary: 'adsadsd',
link: {
code: 'UTTAK',
codeType: 'SKJERMLENKE_TYPE',
name: 'Uttak',
},
};
const historyParts = [historyPart , historyPart ];
const handlingLocation = {};
describe('HistoryDescriptionType9', () => {
it('should render HistoryDescriptionType9', () => {
const wrapper = shallowWithIntl(<HistoryDescriptionType9
historyParts ={historyParts }
handlingLocation={handlingLocation}
intl={intlMock}
/>);
const bubbleText = wrapper.find('BubbleText');
expect(bubbleText).to.have.length(historyParts.length);
});
});
So, since I am mapping an array with 2 objects, there should be 2 BubbleText components rendered. But, I get a message that the test fails:
AssertionError: expected { length: 0 } to have a length of 2 but got 0
+ expected - actual
I have also tried with importing the component and using it in find function explicitly, like this:
import BubbleText from './bubbleText';
const bubbleText = wrapper.find(BubbleText);
But, I got the same error message.
I assume that the test is failing because of the map function. How can I fix this?
idk how your BubbleText component looks like but this issue is maybe because you are passing inside tests summary: 'adsadsd' instead of "BubbleText"