What are possibilities to get component properties from running website for unit test of React application?

Question

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:

1. I can put breakpoint and inspect properties when component would be constructed or some lifecycle method will be called, but Chrome devtools trim lengthy outputs. Minding the fact that I have complex objects as properties I get cut off representation of these objects.
2. I've tried to JSON.stringify object and console.log it but string in console finishes also with three dots (so it was cut).

Answer 1

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:

• you see in code what you actually put there as properties
• you put only required data
• you see how your component changes when things you control and see change
• snapshots and helper files with data are of lowest possible size

===========

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.

1. Go to github of flatted project, copy code and paste it in Chrome Dev Console
2. Open component in React Dev Tools in Chrome
3. find by name name of the component, save needed props as global variable in console (right-click on property name)
4. use flatted to flatten object and copy it as string to your project
5. import flatted in your project, use it to parse stringified version from Chrome Dev Tools
6. use data in your tests.

Drawbacks:

1. you have access (you see in your editor) stringified version of data, that you can't reason on and alter. Meaning you will, to some extent, blindly operate on huge object (and your test might need to change data five levels deep)
2. size of this stringified version might be big and if you will do snapshot testing, this means you will have this humongous data in few files.
3. you need manual labor with this "black/grey box" testing when something changes: get new data, ensure all tests are working with this new data, etc.