Giters

primer / react

An implementation of GitHub's Primer Design System using React

Home Page:https://primer.style/guides/react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: CSS.supports is not a function when running Jest tests

TheColeCode opened this issue · comments

commented

Description

When I use Primer in React or NextJS, The unit tests are unable to locate anything inside of ThemeProvider.

Steps to reproduce

import './App.css';
import { ThemeProvider, BaseStyles, TabNav } from '@primer/react'

function App() {
  return (
    <div> 
    <ThemeProvider>
    <BaseStyles>


    <div className="App">
      <div>hello</div>
    <TabNav aria-label="Main" selected={1}>
      <TabNav.Link href="#">Home</TabNav.Link>
      <TabNav.Link href="#">Documentation</TabNav.Link>
      <TabNav.Link href="#">Support</TabNav.Link>
    </TabNav>

    </div>
    </BaseStyles>
    </ThemeProvider>
    </div>
  );
}

export default App;

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders hello', () => {
  render(<App />);
  const appElement = screen.getByText('hello');
  expect(appElement).toBeInTheDocument();
});

gets this error:

    TestingLibraryElementError: Unable to find an element with the text: hello. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div />
      </div>
    </body>

      12 | test('renders hello', () => {
      13 |   render(<App />);
    > 14 |   const appElement = screen.getByText('hello');
         |                             ^
      15 |   expect(appElement).toBeInTheDocument();
      16 | });

Version

36.12.0

Browser

Chrome

commented

Hi!

We ship a few jest mocks that are used in this repository including global.CSS

You can import them in your jest-setup.ts file:

import '@primer/react/lib-esm/utils/test-helpers'

Let me know if that works for you!

commented

Hi there! 👋 Going to close this out as it seems like the question has been answered and there aren't any additional steps to take. Feel free to comment if I'm missing something here!