webpack - Unable to include css while running tests in CRA?

Question

When I test a component containing a React Bootstrap Accordion component I cannot check whether or not the Accordion Cards are opened or closed. According to my tests they are always visible, even if they shouldn't.

I strongly suspect that this is because the bootstrap css is not considered. The React Bootstrap Accordion component uses css classes to show or hide the content and I think that the test is not including this css, even though I import it in the test class.

The weird thing is, this does work in codesandbox:

https://codesandbox.io/s/ecstatic-platform-tt3on?file=/src/App.test.js

So I think this has something to do with CRA or webpack. I tried the exact same thing as in the codesandbox in a brand new CRA app and I verified that the libraries are the same exact version.

Here are the relevant bits:

App.js

import React from "react";
import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Accordion>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Click me!
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Button>Secret button</Button>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="1">
              Click me!
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>Hello! I'm another body</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

App.test.js

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";

it("renders", async () => {
  render(<App />);

  // Succeeds
  expect(await screen.findByRole("button", { name: /Secret button/ }));
});

If I remove the import of the bootstrap.min.css in the file above the test will always succeed, even on codesandbox but with this import included it should fail which it does in codesandbox but not in my create-react-app

question from:https://stackoverflow.com/questions/65952011/unable-to-include-css-while-running-tests-in-cra

Answer 1

Waitting for answers