Code Monkey home page Code Monkey logo

Comments (4)

sweco-sepjea avatar sweco-sepjea commented on July 27, 2024 1

Hi @Mike-Han! The popper tests fine when I set it up correctly :). For the NumericInput a mock will work, thanks alot!

from arcgis-experience-builder-sdk-resources.

qlqllu avatar qlqllu commented on July 27, 2024

@sweco-sepjea
The widgetRender is for widget only. For component, you can use render, withStoreRender, or other renders depends on whether the component depends on a store or theme.

from arcgis-experience-builder-sdk-resources.

sweco-sepjea avatar sweco-sepjea commented on July 27, 2024

@qlqllu I have tried the other renders. Same problem, some jimu-ui components always breaks the test. Also, if I include a jimu-ui Popper or NumericInput inside my main widget.ts it will break testing the entire widget using widgetRender.

All of these tests will fail:

import { React, getAppStore } from "jimu-core";
import { withStoreRender, render, widgetRender } from "jimu-for-test";
import { Popper } from "jimu-ui";

const sRender = withStoreRender(getAppStore());
const wRender = widgetRender();

const TestComponentPopper: React.FC = () => {
  const ref = React.useRef();
  return (
    <Popper reference={ref} open showArrow>
      test
    </Popper>
  );
};

describe("test storybook components", () => {
  it("popper storeRender", async () => {
    const { findByText } = sRender(<TestComponentPopper />);
    expect(await findByText("test")).toBeDefined();
  });
  it("popper render", async () => {
    const { findByText } = render(<TestComponentPopper />);
    expect(await findByText("test")).toBeDefined();
  });
  it("popper widgetRender", async () => {
    const { findByText } = wRender(<TestComponentPopper />);
    expect(await findByText("test")).toBeDefined();
  });
});

Because of errors like these:

test storybook components › popper

    TypeError: Cannot read properties of undefined (reading 'length')

      239 |       word-break: break-all;
      240 |       word-wrap: break-word;
    > 241 |       span {
          |                       ^
      242 |         color: ${r};
      243 |         text-decoration: underline;
      244 |       }

      at zt (dist/jimu-ui/index.js:241:54352)
      at At (dist/jimu-ui/index.js:241:54406)
      at dist/jimu-ui/index.js:241:74051
      at no (dist/jimu-core/react-dom.js:34:58876)
      at jo (dist/jimu-core/react-dom.js:34:68394)
      at Fo (dist/jimu-core/react-dom.js:34:67728)
      at Do (dist/jimu-core/react-dom.js:34:67386)
      at Vu (dist/jimu-core/react-dom.js:34:114544)
      at Ei (dist/jimu-core/react-dom.js:34:98324)
      at ki (dist/jimu-core/react-dom.js:34:98252)
      at wi (dist/jimu-core/react-dom.js:34:98115)
      at di (dist/jimu-core/react-dom.js:34:95102)
      at ui (dist/jimu-core/react-dom.js:34:92450)
      at qi (dist/jimu-core/react-dom.js:34:108770)
      at dist/jimu-core/react-dom.js:34:110190
      at hi (dist/jimu-core/react-dom.js:34:95480)
      at Ji (dist/jimu-core/react-dom.js:34:110175)
      at Object.n.render (dist/jimu-core/react-dom.js:34:117625)
      at node_modules/@testing-library/react/dist/pure.js:101:25
      at pi (dist/jimu-core/react-dom.js:34:95392)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at Object.render (node_modules/@testing-library/react/dist/pure.js:97:26)
      at Object.render (jimu-for-test/lib/test-utils.tsx:17:58)
      at jimu-for-test/lib/test-utils.tsx:177:59

from arcgis-experience-builder-sdk-resources.

sep8 avatar sep8 commented on July 27, 2024

Hi @sweco-sepjea, for the test of Popper, a DOM node is necessary as prop reference , but it's a React.MutableRefObject in your test code.
image

You can use it like this:

const TestComponentPopper: React.FC = () => {
  const ref = React.useRef()
  return (<>
    <Button ref={ref}>reference</Button>
    <Popper reference={ref.current} open showArrow>
      test
    </Popper></>
  )
}

The NumericInput component does have a problem in the test now, you can temporarily use mock instead:

jest.mock('jimu-ui', () => {
  return {
    ...jest.requireActual<Record<string, any>>('jimu-ui'),
    NumericInput: (props) => {
      const { onAcceptValue, ...others } = props
      const [value, setValue] = React.useState()
      const handleChange = (e): void => {
        setValue(e.target.value)
      }
      const handleBlur = (): void => {
        onAcceptValue(value)
      }
      return (
        <input
          type='number'
          onChange={handleChange}
          onBlur={handleBlur}
          className='jimu-input jimu-input-sm jimu-numeric-input jimu-numeric-input-input'
          {...others}
        />
      )
    }
  }
})

from arcgis-experience-builder-sdk-resources.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.