Problem with testing components in storybook #229

alveshelio · 2018-11-28T20:30:57Z

react-testing-library 5.2.3:
react 1.6:
node 10.4.1:
npm 6.4.1:

Hi,

We are using storybook v 3.4.11 to develop our components and we are using Jest with react-testing-library to test the components, however, we are having some issues when rendering the components.
We have, what I believe to be, a rather complicated setup, so are creating 3 libraries inside the same storybook, each library has its own src/components file structure and it's own package.json. I don't know if it is a good idea or if we should simply extract each library on its own storybook because we do not have a webpack to handle assets in our components.

At the beginning we started setting up jest in each project folder but we've then moved to the root of the storybook, now the jest configuration will be available for the 3 libraries. I don't know if the problem we have is because of this setup or some other reason.

UPDATE
Here's my jest.config.js at the root of storybook

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  "moduleNameMapper": {
    ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform",
  }
}

I have this component bellow in (storybook) /src/contentui/src/components/chipstatus

import * as React from 'react';
import * as s from './ChipStatus.css';
import { IChipStatusProps, EChipStatus, TChipStatus } from '.';
import  classnames from 'classnames';
import TextPlaceholder from '../textplaceholder/TextPlaceholder';

const ChipStatus: React.StatelessComponent<IChipStatusProps> = props => {

  const addClassNames = (status: TChipStatus) => {
    switch (status) {
      case EChipStatus.ACTIVE:
        return classnames(s.container, s.active);

      case EChipStatus.ERROR:
        return classnames(s.container, s.error);

      case EChipStatus.INCOMPLETE:
        return classnames(s.container, s.incomplete);

      case EChipStatus.INACTIVE:
        return classnames(s.container, s.inactive);

      case EChipStatus.DELETED:
        return classnames(s.container, s.deleted);

      default:
        return classnames(s.container);
    }
  }

 return ( <div className={addClassNames(props.status)}>
   <TextPlaceholder>{props.placeholder}</TextPlaceholder>
  </div>)
};

export default ChipStatus;

and I have this test

import * as React from "react"
import * as RTL from "react-testing-library"
import "jest-dom/extend-expect"

import ChipStatus from "./ChipStatus"

test("mounts AppDisplay", async () => {
  const { container } = RTL.render(
    <ChipStatus status={"success"} text={"ceci est mon texte"} />
  )
  expect(container.firstChild).toHaveTextContent("ceci est mon texte")
})

This component receives a status props and will add a class based on the status.

One side note. It is weird is that I can not console log anything in the test inside storybook, I've tried in our project and I can console within a test without any problem.

So here's my problem. I'm trying to check if a class is present when I render the component with status "error", it should render something like this <div class="error"><p>error</p></div>, however it renders this <div><p>error</p></div> there's no class injected no mater what prop I send to the components, we've even tried to hardcode the className with something as follow <div className={classnames(s.container, s.error)}> but the result is the same, it always renders a div without a class.

I don't understand what I'm doing wrong here.
Help would be appreciated.

Thank you

The text was updated successfully, but these errors were encountered:

alveshelio · 2018-11-30T18:29:11Z

Hi @kentcdodds,

Any idea on the problem? I see with debug() that I get this:

<body>
        <div>
          <div class="">
            <p class="MuiTypography-root-1 MuiTypography-body1-10">
              texte active
            </p>
          </div>
        </div>
      </body>

So, no class. I've also tried to apply a class manually but it's the same result :(
If I apply style={{ color: "blue" }}, thing gets injected into the div.

Here's our scripts

"scripts": {
    "csscopy": "cd src/components/ && copyfiles ./**/*.css ../../lib",
    "svgcopy": "cd src/components/ && copyfiles ./**/*.svg ../../lib",
    "build": "rm -rf ./lib && tsc",
    "prepare": "npm run build && npm run csscopy && npm run svgcopy",
    "test": "jest --watchAll"
  },

I'm wondering if this has anything to do with how we are publishing our components, because it seems that the CSS is not being handled or injected. I see that the internal component used inside our own <p class="MuiTypography-root-1 MuiTypography-body1-10" >texte inactive </p> is rendered and has classes.

alexkrolick · 2018-12-08T21:38:02Z

Duplicate of #235

kentcdodds added help wanted Extra attention is needed question Further information is requested needs investigation labels Nov 28, 2018

alexkrolick marked this as a duplicate of #235 Dec 8, 2018

alexkrolick closed this as completed Dec 8, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with testing components in storybook #229

Problem with testing components in storybook #229

alveshelio commented Nov 28, 2018 •

edited

Loading

alveshelio commented Nov 30, 2018 •

edited

Loading

alexkrolick commented Dec 8, 2018

Problem with testing components in storybook #229

Problem with testing components in storybook #229

Comments

alveshelio commented Nov 28, 2018 • edited Loading

alveshelio commented Nov 30, 2018 • edited Loading

alexkrolick commented Dec 8, 2018

alveshelio commented Nov 28, 2018 •

edited

Loading

alveshelio commented Nov 30, 2018 •

edited

Loading