<Grid> with gutter prop - tests break?

[sebm]

an excerpt from my package.json

    "@testing-library/jest-dom": "5.1.1",
    "@testing-library/react": "10.4.3",
  "@twilio-paste/animation-library": "0.2.1",
    "@twilio-paste/core": "2.16.5",
    "@twilio-paste/design-tokens": "5.4.0",
    "@twilio-paste/dropdown-library": "0.1.2",
    "@twilio-paste/icons": "2.4.2",
    "@twilio-paste/reakit-library": "0.6.2",
    "@twilio-paste/style-props": "1.2.9",
    "@twilio-paste/styling-library": "0.1.1",
    "@twilio-paste/theme": "3.2.9",
    "@twilio-paste/theme-tokens": "3.1.2",
    "@twilio-paste/types": "3.0.13",

I have a <Grid> with the gutter prop set to space30. It renders fine, but when I run my jest tests:

	it('should XXX', async () => {
		await act(async () => {
			render(<XXX history={history} location={location} match={match} />);
		});

		expect(XXX).toBeInTheDocument();
	});

i get this error:

  console.error
    Error: Uncaught [TypeError: Cannot read property 'space30' of undefined]
        at reportException (XXX/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)

If I remove the gutter prop, the test works fine.

Any idea what might be going on? 🤷

[richbachman]

Hi @sebm, are you wrapping your test content inside the Theme.Provider?

[sebm]

I am not.

[richbachman]

Give that a shot and see if that helps. Here's some more info about the Theme.Provider: https://paste.twilio.design/tokens/theme-package

Something like:

import {Theme} from '@twilio-paste/theme';

<Theme.Provider theme="console">
  <Grid gutter="space30" />
</Theme.Provider>

[sebm]

That did it! Thanks very much @richbachman