Cosmos 4.0, the version you’ll tell everyone about

The previous major version was the one you fell in love with. It came with an easier config, improved error handling and a brand new fixture tree view.

Then we introduced a brand new testing API for Cosmos fixtures, which makes it possible to reuse the setup from visual examples when writing automated tests. This propelled Cosmos into a new era, from a visual component explorer to a platform for mocking component inputs.

Here’s another major version packed with impactful contributions!

I hope you read about all in detail, but here’s a brief summary if you can’t:

Automatic fixture detection. Improved monorepo dev experience. webpack 4 support. Revamped Apollo integration. Flow API for defining fixtures. And more…

Automatic fixture detection

Creating new component and fixture files while never having to restart Cosmos is bliss. The dev server watches for file system changes and keeps the fixture list up to date in the Cosmos UI.

Note: Although the entire project is being watched, only fixture files are bundled. This prevents bundle bloat or accidentally loading Node packages in the browser.

Improved monorepo dev experience

The dev experience has improved significantly with the latest repo refactor, which is important for Cosmos’ future.

Thanks to Yarn Workspaces, Cosmos packages are linked together so changes in one package are reflected in its dependents instantly. But there’s an additional factor to consider.

Should packages be linked to their dependencies’ compiled output or raw source? The answer is both. The former when publishing and the latter when developing. This setup adds an extra step to the publishing workflow, but it pays off in dev experience. Here are some benefits:

  • Flow types are carried over between packages.
  • Integration tests always run against latest source.
  • In watch-mode, one change triggers tests across multiple packages.
  • Test coverage is calculated correctly.
Read more about this in the updated CONTRIBUTING guide.

Better webpack compat

The default webpack config that Cosmos generates when webpackConfigPath isn’t specified has been tweaked to work with webpack 4+ out of the box. From now on Cosmos will only work with webpack 2+ without a custom webpack config. If needed, Cosmos latest still works with webpack 1.x.

Additionally,

  • The webpack config used by Cosmos can now be further customized with the new config.webpack option. This makes integration with something like react-app-rewired much easier. See example.
  • The webpack config found at webpackConfigPath can now return a function, which will be called with env and argv, as per webpack spec.

Revamped React Apollo integration

The new React Apollo proxy is a beast! It allows you to either reuse an ApolloClient instance or mock the GraphQL endpoint directly. For more details and examples, check out the fine docs.

Shout out to Xavier Cazalot for making this happen, and for all his other contributions to v4!

Flow API for defining fixtures

One pitfall of fixtures is that they can fall out of sync with their corresponding components as a codebase evolves. Writing automated tests on top of fixtures generally prevent this, but type checkers are the real cure for this ailment.

It’s early days, but we can now use Flow to type check fixture.props, by creating fixtures using the new createFixture helper. Check out the docs!

Shout out to Andrey Popp for proposing this API!

As always, many other exciting things to look forward to on the horizon for Cosmos. The UI is due for a major redesign, as well as the much requested React Native integration. Follow Cosmos on Twitter for updates.

Check out the v4 release notes for more granular info.

Personal update

As of this month I’m dedicating all my time to making Cosmos an awesome open source tool for developing React apps. If your team is looking to level up and add a solid testing foundation to your dev practices, get in touch at ovidiu.ch.

Oh, I almost forgot. Remember to set your components free!