Environment: I have very complex and big react component representing basically a spreadsheet, where I need to do some cell highlighting. It consumes 30 properties which are passed both from redux connect HOC and from place where it's being used for rendering. Some of these properties are complex objects.
So one again - react component is big and requires a lot of complex input as props.
Need: I need to test if my changes do apply specific classes in specific places. Thus I need to render this component and provide it with data that would cause cells to be highlighted.
Question: Is there a possibility to get props from live page in form which can be used in code for tests?
Known limitations:
JSON.stringify object and console.log it but string in console finishes also with three dots (so it was cut).Component can't be so big that it's hard to test. Break it if you can. This is the root cause.
Solution which I've landed in my reality where I can't rewrite everything during the course of few months was manually create all needed properties by hand. This is:
===========
Path that I've found out which is possible, but has drawbacks.
To get data which has cyclical dependencies one can use https://www.npmjs.com/package/flatted.
flatted project, copy code and paste it in Chrome Dev Consoleprops as global variable in console (right-click on property name)flatted to flatten object and copy it as string to your projectflatted in your project, use it to parse stringified version from Chrome Dev ToolsDrawbacks: