How to clear script errors in React Jest testing?
Overview
This article explains bow to clear the script error thrown while running Jest test for Syncfusion components using the “@testing-library/React” package.
Script Errors
Reason for the Errors
By default, JEST is using JSDOM and will not have support for all API’s of window object. But Syncfusion React components are using some of the window’s API internally. Hence, you will get these kind of script errors while running React test using the JEST based library.
Clearing the Errors
You can clear these script errors by mocking the window’s API before running the test cases as in the following code example.
const { getComputedStyle } = global.window;
window.crypto = jest.fn();
window.crypto.getRandomValues = jest.fn();
window.getComputedStyle = (eletm, select) => getComputedStyle(eletm, select);
import { render } from '@testing-library/react'
import App from './App';
const { getComputedStyle } = global.window;
test('renders learn react link', async() => {
window.crypto = jest.fn();
window.crypto.getRandomValues = jest.fn();
window.getComputedStyle = (eletm, select) => getComputedStyle(eletm, select);
render( < App / > );
});
Conclusion
I hope you enjoyed learning on how to clear script errors in React Jest testing.
You can refer to our React feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
