Repository: facebook/react
File: packages/react-devtools-shared/src/__tests__/profilingCharts-test.js (JavaScript)

Code before:
      }

      utils.act(() => store.profilerStore.startProfiling());
      utils.act(() => render(<App />));

      // Verify tree structure: div is filtered, so Greeting appears as child of App
      expect(store).toMatchInlineSnapshot(`
        [root]
          ▾ <App>
              <Count>
              <Greeting>
      `);

      // Trigger a state update in Count. Should not cause Greeting to re-render.
      utils.act(() => triggerUpdate());

      utils.act(() => store.profilerStore.stopProfiling());

      const rootID = store.roots[0];
      const {chartData} = getFlamegraphChartData(rootID, 1);
      const allNodes = chartData.rows.flat();

      expect(allNodes).toContainEqual(
        expect.objectContaining({name: 'Greeting', didRender: false}),
        expect.objectContaining({name: 'Count', didRender: true}),
      );
    });

    it('should not report a component as re-rendered when behind a filtered fragment', () => {
      let triggerUpdate;

      function Count() {
        const [count, setCount] = React.useState(0);
        triggerUpdate = () => setCount(c => c + 1);
        Scheduler.unstable_advanceTime(5);
        return count;
      }

      function Greeting() {
        Scheduler.unstable_advanceTime(3);
        return 'Hello';
      }

      function App() {
        Scheduler.unstable_advanceTime(1);
        return (
          <React.Fragment>
            <Count />
            <React.Fragment>
              <Greeting />
            </React.Fragment>

Review comment (suggestion):
`toContainEqual` only accepts a single item.

`toEqual` seems more robust
```suggestion
      expect(allNodes).toEqual([
        expect.objectContaining({name: 'App', didRender: false}),
        expect.objectContaining({name: 'Greeting', didRender: false}),
        expect.objectContaining({name: 'Count', didRender: true}),
      ]);
```


Same for the other usages of `toContainEqual`

Code after:
      }

      utils.act(() => store.profilerStore.startProfiling());
      utils.act(() => render(<App />));

      // Verify tree structure: div is filtered, so Greeting appears as child of App
      expect(store).toMatchInlineSnapshot(`
        [root]
          ▾ <App>
              <Count>
              <Greeting>
      `);

      // Trigger a state update in Count. Should not cause Greeting to re-render.
      utils.act(() => triggerUpdate());

      utils.act(() => store.profilerStore.stopProfiling());

      const rootID = store.roots[0];
      const {chartData} = getFlamegraphChartData(rootID, 1);
      const allNodes = chartData.rows.flat();

      expect(allNodes).toEqual([
        expect.objectContaining({name: 'App', didRender: false}),
        expect.objectContaining({name: 'Greeting', didRender: false}),
        expect.objectContaining({name: 'Count', didRender: true}),
      ]);
    });

    it('should not report a component as re-rendered when behind a filtered fragment', () => {
      let triggerUpdate;

      function Count() {
        const [count, setCount] = React.useState(0);
        triggerUpdate = () => setCount(c => c + 1);
        Scheduler.unstable_advanceTime(5);
        return count;
      }

      function Greeting() {
        Scheduler.unstable_advanceTime(3);
        return 'Hello';
      }

      function App() {
        Scheduler.unstable_advanceTime(1);
        return (
          <React.Fragment>
            <Count />
            <React.Fragment>
              <Greeting />