Ability to provide app css from a component

[stephenh]

I just came across jest-preview and it's amazing! We use emotion and it's really sweet how great our components look with basically 2 minutes of work.

One thing that'd be great is the ability to provide our app-level CSS, which for us is still injected by emotion, but in our top index.tsx file, i.e.:

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <Router>
      <CssBaseline />
      <CssReset />
      <App />
    </Router>
  </ApolloProvider>,
  document.getElementById("root"),
);

The docs (which are great) have examples of adding root-/app-level externalCss from bootstap.min.css files; is there a way to do this same sort of externalCss but by pointing jest-preview at a React component that includes our CssBaseline and CssReset?

Thanks!

[nvh95]

@stephenh Thank you for reaching us. Yes, of course, you can achieve your goal

adding root-/app-level externalCss from bootstap.min.css files;

Actually externalCss is deprecated and not recommended to use. I'm working on a PR #132, which gradually remove it . Please import the CSS directly. You can do it like this:

+import './global.scss';
+import '@your-design-system/css/dist/index.min.scss';
-jestPreviewConfigure({
-  externalCss: [
-    'demo/global.scss',
-    'node_modules/@your-design-system/css/dist/index.min.scss',
-  ],
-});

(I recommend turn on Automatic Mode on by default)

is there a way to do this same sort of externalCss but by pointing jest-preview at a React component that includes our CssBaseline and CssReset?

Yes, you can use this technique

// src/test-utils/index.js
import { render } from "@testing-library/react";

// Render the whole app
const renderApp = () => {
  return render(
    <ApolloProvider client={apolloClient}>
      <Router>
        <CssBaseline />
        <CssReset />
        <App />
      </Router>
    </ApolloProvider>
  );
};

export * from "@testing-library/react";
export { renderApp };

Then use renderApp() inside your tests.

import { debug } from 'jest-preview'
it('should behave correctly', () => {
  renderApp();
  // Do some stuff
  debug()
})

You can read more about this technique here: https://testing-library.com/docs/react-testing-library/setup#custom-render

Please let me know if my answer helps. Thanks.

[stephenh]

@nvh95 huh, I guess that is obvious in retrospect :-), but yeah, we already use a custom render approach, we just historically have not included our CssBaseline/CssReset because they weren't required for anything that tests needed to assert against. But yeah, we can do that; thanks!

[nvh95]

@stephenh Since Jest Preview trying to make Jest tests as "e2e" as possible. So I guess you need to setup it as a "completed" app from now on 😬.
Please don't hesitate to ask if you need any support from us. You can reach us on Twitter as well: @hung_dev or @JestPreview

[nvh95]

@stephenh Also, I wonder if your project is open source. I want to see it as a reference to add an example for emotion.

If you want to contribute to Jest Preview by adding an example that uses emotion, please let me know. I can help to open a new issue to help you "claim" the feature. If you don't, it's absolutely OK, I will add one when I'm available.

Thank you very much.

[stephenh]

Hey @nvh95 ; our primary app is not open source, but our emotion-based component library Beam is open source, so like here's an example of one of our tests:

https://github.com/homebound-team/beam/blob/main/src/inputs/Checkbox.test.tsx

Not sure if that's more helpful vs. just going through the Emotion setup docs, but if it helps, that's great.

Our Beam component library also uses our emotion-based utility Css library, which has a much more minimal test suite if that's easier to copy/paste from:

https://github.com/homebound-team/truss

https://github.com/homebound-team/truss/blob/main/packages/testing-tachyons-emotion/src/Css.emotion.test.tsx

[nvh95]

@stephenh It's super helpful. I will take a look in the morning my time.
Thank you very much.