Feature request: Add tests panel support

[mattphillips]

Tell us how you think we can improve Sandpack

Packages affected

• [x] sandpack-client
• [x] sandpack-react

What is this feature?

Would it be possible to support test files? Currently on codesandbox.io I can configure the sandbox view to show the tests panel which can run the tests.

How would your idea work?

Much like the sandpack-react does currently but with an additional view option which supports tests that instead of rendering the React component into the DOM it would run the test file with jest and display the results.

Do you have any examples of how you would like to see us implement it?

Sorry no real examples but the use case I have in mind is for a jest-extended docs site with an embedded repl (powered by Sandpack) that can run the examples for each matcher.

This would be preferable to creating a codesandbox per matcher and manually embedding it.

Here's an example of what I've currently configured in a sandbox if it's of any help.

I'm more than happy to get involved with building this if it's of value to the project, would just need some pointers on where to begin 😆

[danilowoz]

Thanks for your feedback, @mattphillips!

I have added your feature request to our internal backlog which we use to prioritize what to build next. We can't make any promises about the timing, but it's on the list!

For others landing on this issue, feel free to add more context or simply leave a thumbs up 👍 on this comment if you find this feature useful.

[danilowoz]

Hey all! I'd like to hear your thoughts about this feature and get to understand what is the best approach for this:

• I'm curious to know what kind of feature the Test component cannot miss?
• Can you provide a great example of what would you consider an excellent test suit?
• Are you happy with the current CodeSandbox component?

Feel free to drop any message here, and 👍 which one you like the most

[mattphillips]

Hey @danilowoz

I'm curious to know what kind of feature the Test component cannot fail?

I'm not 100% sure what you mean with this so sorry if I've misunderstood.

Something I think is vital for this feature is being able to configure Jest itself. The original problem I wanted to solve is to write a repl for jest-extended (a library that provides additional matchers to Jest's expect) so we would need to be able to access the Jest's config to setup jest-extended.

Can you provide a great example of what would you consider an excellent test suit?

See: https://github.com/facebook/jest/blob/main/packages/jest-each/src/tests/index.test.ts

Are you happy with the current CodeSandbox component?

Yeah I think it looks pretty good atm, perhaps an improvement could be to control the test panel like you can Jest in watch mode.

[danilowoz]

Sorry I meant to say: I'm curious to know what kind of feature the Test component cannot miss? But you got the point.

Thanks for leaving your feedback!

[Ponuyashka7316]

Hi I think I also need this testing component to allow my users to go through the lectures and solve some reactjs problems. Thanks for writing this request

[mattphillips]

Hey @danilowoz are there any updates on this? I'm happy to lend a hand to help get this built if someone can point me in the right direction 👍