0

I have written many test cases in the react testing library, I got stuck in the accessing condition based DOM element. I have tried many ways using import { renderHook } from '@testing-library/react-hooks'. But didn't work from me. Here is the code. Great appreciate

import axios from "axios";
import { withTranslation } from "react-i18next";

function MDStaticContent({ t }) {
const [promoArrayIsValid, setPromoArrayIsValid] = useState(false);

const loadRecent = async () => {
    API Calls Here
    const recents = await onRecentMedia(accounts[0], instance);

    if (Some condition) {
      if (Here Some condition) {
        setPromoArrayIsValid(true);
      }
      dispatch(Here Will discpatch data);
    }
  };

return (
    <>
      { promoArrayIsValid && (
        <div data-testid="mdStaticContent">
        Hello
    </div>
 </>
      )}
}


import React from "react";
import { render, cleanup } from "@testing-library/react";
import { useEffect, useState } from "react";
import { Provider } from 'react-redux';
import "@testing-library/jest-dom/extend-expect";
import { MemoryRouter } from 'react-router-dom';
import configureMockStore from 'redux-mock-store';
import { ThemeProvider } from 'styled-components';
import thunk from 'redux-thunk';
import MDStaticContent from "./MDStaticContent";
import { act } from 'react-dom/test-utils';
import MockAPIData from '../resources/locales/en/MockAPIData.json';
import { renderHook } from '@testing-library/react-hooks'


const mockStore = configureMockStore([thunk]);
let data = {
  mediaArrayIsValid: true,
  promoArrayIsValid: true
}
const store = mockStore(data);


it("should take a snapshot and match of MDStaticContent Page", () => {
  const { asFragment, getAllByTestId, getByTestId
 } = render(
    <ThemeProvider theme={theme}>
        <Provider store={store}>
            <MemoryRouter>
              <MDStaticContent/>
            </MemoryRouter>
        </Provider>
    </ThemeProvider>
  );
  expect(asFragment()).toMatchSnapshot();

expect(getAllByTestId("mdStaticContent")).toHaveLength(1);
expect(getByTestId("mdStaticContent")).toBeVisible();

});

enter image description here

Ramesh Lamani
  • 1,117
  • 3
  • 25
  • 54
  • Is `promoArrayIsValid` truthy when your component is rendered? – tromgy Feb 16 '23 at 13:51
  • @tromgy Initial it will false, once API scuess it becomes true. Based on that DOM will get loaded { promoArrayIsValid && (
    Hello
    )} I want to Set promoArrayIsValid True while writing unit test cases.     – Ramesh Lamani Feb 16 '23 at 13:55
  • It looks like you're using it as both the prop and the state, then set the initial value of the state from the prop. Set it to `true` in the test, and to `false` in the product. – tromgy Feb 16 '23 at 14:11
  • @tromgy Just I tried possible ways passting props and set. Seems props is not required. I have updated the code by removing props. – Ramesh Lamani Feb 16 '23 at 14:37
  • @tromgy I want to know How to set values of useState in Test cases. – Ramesh Lamani Feb 16 '23 at 14:42
  • In general, you should avoid testing the internal workings of your component. If the only way the state changes is through some server interaction, try to mock the server side. You can use for example [MSW](https://github.com/mswjs/msw) for that. – tromgy Feb 17 '23 at 13:58

0 Answers0