Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
TheColeCode opened this issue Mar 21, 2024 · 2 comments
Closed

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

TheColeCode opened this issue Mar 21, 2024 · 2 comments
Labels
question react status: waiting for author's response

Comments

@TheColeCode
Copy link

TheColeCode commented Mar 21, 2024 •
edited

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
@TheColeCode TheColeCode added the bug Something isn't working label Mar 21, 2024
@siddharthkp
Copy link
Contributor

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!

@joshblack
Copy link
Member

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question react status: waiting for author's response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@siddharthkp @joshblack @TheColeCode