How to test for useEffect inside a custom hook?

See also questions close to this topic

• Can I access any response that is shown in dev tools?

  Here is the scenario...

  • I have an Iframe that is using RightSignature to capture a signed document.
  • When I submit the document in the iframe, I can see in my Dev tools that I have a PUT with a json response that I want to grab.
  • once it is submitted, the page in the iframe is redirected.

  So far I have had no luck in capturing the response using just vanilla js and .addEventListener. It seems like there should be a way to do it but I am just curious if what I think should be possible actually is.

  So in short, if I can see the response in my Dev Tools, does that mean I should be able to capture it somehow using js, or because it is in an iframe does that not necessarily translate into something that is accessible to me? I just want to know so I dont keep trying to go down a path that leads nowhere.

  Thanks
• Is there is a way to DM someone that is mentioned in a message with discord.js?

  Is there is a way to DM someone that is mentioned in a message with discord.js?

  this is my code.

  client.on("message", message => {
    if (message.author.bot) {return}
    let person = message.content.mentions
    person.send("My message")
  })
  

  it's not working for some reason
• How to check cookie parameters in if-else condition after it is stored?

  I have here a function that checks each parameters in the url and store it as cookie. But I have a problem, whenever I pass those parameter entered into a new url using XMLHttpRequest() it returns only the first parameter entered from the user. I guess this is something to do with the if-else condition in mycode.

  Here is my javascript code:

  <!-- Get Parameters for gclid, token , fbclid or cjevent when user visits the website -->
  <script>
  window.onload = function() {
      try {
          var url_string = (window.location.href).toLowerCase();
          var url = new URL(url_string);
  
          // check parameters if exists
          ['gclid', 'token', 'fbclid', 'cjevent'].forEach(function (key) {
              var value = url.searchParams.get(key);
              if (value) {
                  //token expires in 6 hours
                document.cookie = `${key}=${value}; max-age=21600` + ';path=/';
              }
          });
  
          const getCookieValue = (name) => (
              document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
          )
  
          // Sending a get request to laravel controller
          var base_url = window.location.origin; // get the base url
          var params = '';
  
          // pass parameters if gclid, token, or fbclid
          if(getCookieValue('gclid')) { params = 'gclid=' + getCookieValue('gclid');}
          else if (getCookieValue('token')) { params = 'token=' + getCookieValue('token');}
          else if (getCookieValue('fbclid')) { params = 'fbclid=' + getCookieValue('fbclid');}
          else if (getCookieValue('cjevent')) { params = 'cjevent=' + getCookieValue('cjevent');}
  
          // send those parameters in TrafficTracking Controller storeTracking function
          let xhr = new XMLHttpRequest();
          xhr.open("GET", base_url+"/storetrackvisit?"+params, true);
          xhr.send();
  
      } catch (err) {
          console.log("Issues with Parsing URL Parameter's - " + err);
      }
  }
  </script>
  

  When I try to use the alert(params) function in the var params it returns only the first parameter that user has entered.

  For example:

  1.) User enters test.com?gclid=111 -> stores that as a cookie

  2.) user re enters another value for other parameter test.com?token=551 -> it will still alert the gclid parameter

  How do I refactor my if-else condition that returns only the parameter when a user enters it and assign it in the params variable. So that the variable params is dynamic when passing it to the new url XMLHttpRequest().

  I believe this is something to do with this code:

  if(getCookieValue('gclid')) { params = 'gclid=' + getCookieValue('gclid');}
  else if (getCookieValue('token')) { params = 'token=' + getCookieValue('token');}
  else if (getCookieValue('fbclid')) { params = 'fbclid=' + getCookieValue('fbclid');}
  else if (getCookieValue('cjevent')) { params = 'cjevent=' + getCookieValue('cjevent');}
  
  alert(params);
  

  How can I modify my if-else conditions to return only the parameters what user entered? I believe that what I've done it fetches the last cookie saved. Is there anything good to do about the if/else condition?
• Unable to catch and log the error from axios request

  I'm validating user input and result in express and am returning 422 if the input is invalid and a 400 if result is empty. The problem is that I can't log the response object when an error occurs.

  Nodejs:

   if (q === '' || q.length < 3 || q.length > 150) {
      console.log('invalid query');
      return res.sendStatus(422).send('Search not found');
    } else {
      try {
        // Fetch redis data
        const data = await GET_ASYNC('data');
         
        // stuff here
  
        // Result Validation
        if (!Array.isArray(data) || !data.length) {
          res.status(400).send('Search not found');
        } else {
          // do stuff
          res.status(200).send(data);
        }
      } catch (err) {
        console.error(err);
        res.sendStatus(500); // Server error
      }
  

  Now my react code:

  const searchDb = useCallback(async() => {
          const CancelToken = axios.CancelToken;
          const source = CancelToken.source();
          
          try {      
              axios.get(`/api/bestProduct?q=${searchValue}`, 
              { cancelToken: source.token })
              .then(res => {
                  console.log(res) // nothing shows up
  
                  const data = res.data;
                  setData(data)          
              });
          } catch (err) {
              if (axios.isCancel(err)) {
                  console.log(err.response); // nothing shows up
              } else {
                  console.log('hello??') // nothing
                  return setError(`There's been a problem on our end.`)
              }
          }
      }, [])
  

  I've looked at other solution and tried to log the res and res.status but nothing shows up. This is what my console looks like during the error:

  
• Dynamic object keys... Cannot create property on string

  I'm trying to make an input automatically store its value in an object. The key should be the input's id. Ex: {screen1_input1: 'whatever'}. The first character does that. The second character crashes with "TypeError: Cannot create property on string". I think I see what's happening but I don't know how to fix it.

  import { useState } from 'react'
  
  function Demo() {
      const [contentData, setContentData] = useState({})
      
      const onChange = (e) => {
          let oldData = contentData
          setContentData(oldData[e.target.id] = e.target.value)
          console.log('*')
      }
      
      const Screen1 = () => {
          return (
              <>
                  <input type="text" id="screen1_input1" onChange={onChange} />
              </>
          )
      }
      
      return (
          <>
              <h2 className="Demo">
                  {Screen1()}
              </h2>
          </>
      )
  }
  
  export default Demo
  
• How can I extract a nested array of objects and put them in the core array?

  I am working on a functionality where I need to group some items and also ungroup them.

  Some days ago I asked this question: How can I group specific items within an object in the same array and delete them from the core array? where a couple of people helped me solving the grouping part. But it is very related to this question.

  What I need to do now, is to ungroup the items with the exact same requirement: ungroup the checked === true group and put the items back from where they came from and remove all duplicates.

  Here is a reproducible demo with both functionalities: https://codesandbox.io/s/ts-react-grouping-forked-rmwhr?file=/src/App.tsx

  And here the relevante piece of code:

  const handleUngroupingQuestions = (): void => {
      const questionAddedCopy: VariableConfig[] = [...questionAdded]
      const filteredByChecked: VariableConfig[] = questionAddedCopy.filter((q: VariableConfig) => isCheck.includes(q.id))
  
      if (isCheck.length) {
        setCheck([])
  
        const extractGroup = (i: number): VariableConfig[] => filteredByChecked[i].questionGroup
        const addChecked = (q: VariableConfig): VariableConfig => ({ ...q, questionGroup: [] })
  
        // @TODO
        // Remove this when we have a proper data structure
        clearVariable()
  
        const nestChecked = (qs: VariableConfig[], found = false) =>
          qs.flatMap((q: VariableConfig, i: number) => {
            if (filteredByChecked.includes(q)) {
              if (found) {
                return []
              } else {
                found = true
                return [...[addChecked(q)], ...extractGroup(i)]
              }
            } else {
              return [q]
            }
          })
  
        const getNew = [...nestChecked(questionAdded)]
  
        console.log({ getNew: JSON.stringify(getNew, null, 2) })
  
        addQuestion(getNew.filter((g, i, a) => a.indexOf(g) === i))
      }
    }
  

  For some reason right now I am getting an error:

  Cannot read property 'questionGroup' of undefined
  

  Something is happening with an index.

  So what I need is to group all of the items with the checked property being true. Then click on ungroup and bring the items back to its original position and deleting the current group. I must be able to do that even when there are multiple groups of questions.

  What am I missing?
• Jest mock middleware response

  I am trying to mock a middleware response, and i am trying to use jest.spyOn() but can't seem to get it working

  My controller.ts has the following

  import someMiddleware from '../someMiddleware;
  ....
  ....
  this.route.post('/getData', someMiddleware, setValue)
  

  In someMiddlware.ts

  //making a fetch call based on data in req.body
  .....
  const data = await fetchData(url, data)
  next()
  .....
  

  In my test file controller.test.ts

    
    describe('Test Data', () => {
      beforeEach(() => {
        someMiddlewareSpyOn = jest.spyOn(meddelware, "someMiddleware");
      });
  
      afterEach(() => {
        jest.resetModules();
        jest.resetAllMocks();
      });
  
      it('response status should be a 200', async () => {
  
        someMiddlewareSpyOn.mockResolvedValue({data:[].....});
  
        const res = await request(app.getServer())
          .post('/getData');
        expect(res.status).toBe(200);
      })
    });
  

  The above does not work, looking for assistance on how to do this.
• Testing Controller and Service in Jest

  I'm fairly new to Jest and have been trying (with no luck) to figure out how to write tests for my controller. I'm not sure how to write the test as it calls another function. It would be great if I could get pointed in the right direction at least. Thanks in advance.

  controller.ts

  import * as Services from './services';
  
  export async function GetCountriesList(req: Request, res: Response): Promise<void> {
      const response = await Services.GetCountriesList();
      res.status(response.code).json({
          status: response.status,
          message: response.message,
          count: response.count,
          data: response.data
       });
  }
  

  service.ts

  import db from '../../modules/db';
  import { DBGenericDataResponse } from '../../types/models';
  
  export async function GetCountriesList(): Promise<DBGenericDataResponse> {
      const lQuery = 'somquery';
      const responseMessage: DBGenericDataResponse = {
          code: 200,
          status: 'ok',
          message: '',
          count: 0,
          data: [],
          error: ''
      };
      try {
          const dbResult = await db.query<any>(lQuery);
          responseMessage.message = 'Countries returned';
          responseMessage.count = dbResult.rows.length;
          responseMessage.data = dbResult.rows;
      } catch (err) {
          responseMessage.code = 400;
          responseMessage.status = 'error';
          responseMessage.message = 'Error retrieving Countries List';
          responseMessage.error  = err;
      }
      return responseMessage;
  }
  
• Warning: <TEXT /> is using incorrect casing

  console.error node_modules/react-dom/cjs/react-dom.development.js

  Warning: <TEXT /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

  I have the issue with Jest and react-pdf

  In the component where I'm using the react-pdf components this is written as: <Text>, but when performing the test it's appearing as <TEXT>

  My component:

  const HeaderPDF: React.FC<Props> = (props: Props) => {
    return (
      <View style={styles.headerContainer} fixed>
        <View style={styles.headerTop}>
          <Text style={styles.textBoldTopHeader}>
            "Some text"
          </Text>
          <View style={styles.headerTopInputContainer}>
            <View style={styles.headerTopInputTextContainer}>
              <Text style={styles.textInputTopHeader}>Route</Text>
            </View>
            <View style={styles.inputSmall} />
          </View>
        </View>
      </View>
    );
  };
  

  The test:

  import React from 'react';
  import { render } from 'tests/support/customRender';
  import HeaderPDF from ../../HeaderPDF';
  
  describe('HeaderPDF', () => {
    it('Renders a HeaderPDF component successfully', () => {
      const { container } = render(
        <HeaderPDF
          someProps
        />
      );
      expect(container).toMatchSnapshot();
    });
  });
  
  
  
• Preserving generic types through another generic type in TypeScript

  I'm considering submitting a patch (or patches) of the type declarations in @testing-library/react and/or @testing-library/dom. Currently, all queries on RenderResult return variants of HTMLElement, which leaves me writing a lot of code like

  const myDiv = wrapper.getByText('some text') as HTMLDivElement;
  

  The simplest solution is to make the queries generic.

  export type GetByText = <T extends HTMLElement = HTMLElement>(/* ... */) => T
  export const getByText: GetByText
  

  Then I can just do:

  const myDiv = wrapper.getByText<HTMLDivElement>('some text');
  

  While this works in TS Playground, something in @testing-library/react is preventing the generic form from being passed along to RenderResult's methods.

  These are the relevant snippets of the current versions of @testing-library/react and @testing-library/dom.

  @testing-library/dom

  types/queries.d.ts

  export type GetByText = (
    container: HTMLElement,
    id: Matcher,
    options?: SelectorMatcherOptions,
  ) => HTMLElement
  
  export const getByText: GetByText
  

  types/get-queries-for-element.d.ts

  import * as queries from './queries';
  
  export type BoundFunction<T> = T extends (
      attribute: string,
      element: HTMLElement,
      text: infer P,
      options: infer Q,
  ) => infer R
      ? (text: P, options?: Q) => R
      : T extends (a1: any, text: infer P, options: infer Q, waitForElementOptions: infer W) => infer R
      ? (text: P, options?: Q, waitForElementOptions?: W) => R
      : T extends (a1: any, text: infer P, options: infer Q) => infer R
      ? (text: P, options?: Q) => R
      : never;
  export type BoundFunctions<T> = { [P in keyof T]: BoundFunction<T[P]> };
  
  export type Query = (
      container: HTMLElement,
      ...args: any[]
  ) => Error | Promise<HTMLElement[]> | Promise<HTMLElement> | HTMLElement[] | HTMLElement | null;
  
  export interface Queries {
      [T: string]: Query;
  }
  
  export function getQueriesForElement<T extends Queries = typeof queries>(
      element: HTMLElement,
      queriesToBind?: T,
  ): BoundFunctions<T>;
  

  @testing-library/react

  (may or may not be relevant)
  types/index.d.ts

  export type RenderResult<
    Q extends Queries = typeof queries,
    Container extends Element | DocumentFragment = HTMLElement
  > = {
    // ...
  } & {[P in keyof Q]: BoundFunction<Q[P]>}
  

  Alongside the change I made above, making each query's type generic, I changed Query in get-queries-for-element.d.ts:

  export type Query = <T extends HTMLElement>(
      container: HTMLElement,
      ...args: any[]
  ) => Error | Promise<T[]> | Promise<T> | T[] | T | null;
  

  I'm nearly certain the issue is in BoundFunction or getQueriesForElement(), as when I made these changes (which I am like 37% confident are right), I get an error:

  Type 'typeof import(".../node_modules/@testing-library/dom/types/queries")' does not satisfy the constraint 'Queries'.
    Property 'getByLabelText' is incompatible with index signature.
      Type 'GetByText' is not assignable to type 'Query'.
        Type 'HTMLElement' is not assignable to type 'T | Error | T[] | Promise<T[]> | Promise<T>'.
          Type 'HTMLElement' is not assignable to type 'T'.
            'HTMLElement' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'HTMLElement'. ts(2344)
  

  There might be another problem in @testing-library/react (and thus, the other testing-library packages), but fixing this is the first step.

  Part of my problem is that I don't actually understand what BoundFunction is doing. What do I need to do to make make typeof queries satisfy the Queries constraint?

  TS Playground
• React testing library test window opens with correct URL

  I have the following test, that's working fine, but I want to be able to test that when "Contact" is clicked a new window opens and contains the correct URL. I thought to use spyOn but I'm not sure that's the best option.

  let queryByText: any, helpURL: string, contactURL: string;
  
  beforeEach(() => {
    helpURL = "https://www.google.com";
    contactURL = "https://www.yahoo.com";
  
    ({ queryByText } = render(
      <MockContext config={{ helpURL, contactURL }}>
        <ToolsMenu />
      </MockContext>
    ));
  });
  
  afterEach(() => {
    queryByText = null;
  });
  
  test("After clicking Tools Menu ellipsis and then Contact confirm call uses correct URL", () => {
    userEvent.click(screen.getByRole("button"));
  
    window.open = jest.fn();
    fireEvent.click(screen.getByText("Contact"));
  
    expect(window.open).toHaveBeenCalledWith(contactURL, "_blank");
  });
  
• How to test Context file using Jest or testing Library

  I am new to testing, can anyone guide me on how to test context. I have called an API inside a function how do I test response or a function using jest or a react testing library.

  CodesandBox Link: Code

  context API file

  where I have called the API in userDataFunc, I would like to test the function exist or not and its response both bor success response and catch response

  import React, { Component, createContext } from "react";
  import axios from "axios";
  
  export const globalC = createContext();
  
  export class Gprov extends Component {
    state = {
      authLogin: null,
      authLoginerror: null,
      count: 1,
      user: null
    };
    componentDidMount() {}
  
    userDataFunc = async () => {
      await axios(`https://jsonplaceholder.typicode.com/users`)
        .then((res) => {
          if (res.status === 200) {
            this.setState({
              userData: res.data
            });
          }
        })
        .catch((err) =>
          this.setState({
            userDataerror: err
          })
        );
    };
  
    handleChange = (e) => {
      this.setState({ [e.target.name]: e.target.value });
    };
    handleSubmit = (e) => {
      e.preventDefault();
      this.setState({
        user: this.state.username
      });
    };
    render() {
      
      return (
        <globalC.Provider
          value={{
            ...this.state,
            loginData: this.loginData,
            handleChange: this.handleChange,
            handleSubmit: this.handleSubmit,
            userDataFunc: this.userDataFunc
          }}
        >
          {this.props.children}
        </globalC.Provider>
      );
    }
  }
  
  
• Testing return value of a custom hook

  I am trying to write a test suit for this custom hook.

  export const useInitialMount = () => {
    const isFirstRender = useRef(true);
  
    // in the very first render the ref is true, but we immediately change it to false.
    // so the every renders after will be false.
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return true;
    }
    return false;
  };
  

  Very simple returns true or false.
  As I saw, I should use "@testing-library/react-hooks" and here is my try:

  test("should return true in the very first render and false in the next renders", () => {
      const {result} = renderHook(() => {
        useInitialMount();
      });
      expect(result.current).toBe(true);
    });
  

  but I got undefined which doesn't make sense it should be either true or false.

  PS: the code works as expected on the project.
• How to validate the fields and the submit button with unit tests?

  I'm still very beginner to the concept of unit testing. I'm doing a project just to improve my knowledge.

  I have a form with two input fields and a button, the input fields are required, and if the user tries to submit with empty or invalid fields, an error appears.

  On my front I managed to do this and it is working, but I have no idea how to test it.

  Any help you can give me thank you very much!!

  My file where has the Form:

  import React from "react";
  import PropTypes from "prop-types";
  import { Button, Input } from "..";
  import { AppContext } from "../../providers/app";
  
  const AddTransaction = ({ testID }) => {
    const { dispatch } = React.useContext(AppContext);
  
    const [transaction, setTransaction] = React.useState({
      account: "",
      amount: 0,
    });
  
    const [transactionError, setTransactionErrors] = React.useState({
      account: "",
      amount: "",
    });
  
    const handleOnChange = (field) => (e) => {
      setTransactionErrors((prev) => ({ ...prev, [field]: undefined }));
      setTransaction((prev) => ({ ...prev, [field]: e.target.value }));
    };
  
    const onTransaction = (e) => {
      e.preventDefault();
      try {
        if (!validateFields()) return;
  
        const newTransaction = {
          account: transaction.account,
          amount: +transaction.amount,
        };
  
        dispatch({
          type: "ADD_TRANSACTION",
          payload: newTransaction,
        });
  
        clearFields();
      } catch (error) {
        setData((prev) => ({
          ...prev,
          loading: false,
          error: error?.response?.data?.error,
        }));
      }
    };
  
    const validateFields = () => {
      if (!transaction.account) {
        setTransactionErrors((prev) => ({
          ...prev,
          account: "Required Field",
        }));
        return false;
      }
  
      if (
        !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/.test(
          transaction.account
        )
      ) {
        setTransactionErrors((prev) => ({
          ...prev,
          account: "Invalid Account ID",
        }));
        return false;
      }
  
      if (transaction.amount === 0) {
        setTransactionErrors((prev) => ({
          ...prev,
          amount: "Enter a valid amount",
        }));
        return false;
      }
      return true;
    };
  
    const clearFields = () => {
      setTransaction((prev) => ({ ...prev, account: "", amount: 0 }));
    };
  
    return (
      <div className="add-transaction" data-testid={`${testID}_Container`}>
        <h1>Account Management App</h1>
        <h3>Submit new transaction</h3>
        <form
          onSubmit={onTransaction}
          className="form"
          data-testid={`${testID}_Form`}
        >
          <div className="form-content">
            <span className="content-label">Account ID:</span>
            <Input
              error={transactionError?.account}
              placeholder="Type your Account ID"
              mask="********-****-****-****-************"
              formatChars={{ "*": "[A-Z, a-z, 0-9]" }}
              required
              type="text"
              value={transaction.account}
              onChange={handleOnChange("account")}
              data-testid={`${testID}_AccountID`}
            />
          </div>
          <div className="form-content">
            <span className="content-label">Amount:</span>
            <Input
              error={transactionError?.amount}
              required
              type="number"
              placeholder="Amount"
              value={transaction.amount.toString()}
              onChange={handleOnChange("amount")}
              data-testid={`${testID}_Amount`}
            />
          </div>
          <div>
            <Button text="Submit" />
          </div>
        </form>
      </div>
    );
  };
  
  AddTransaction.propTypes = {
    testID: PropTypes.string.isRequired,
  };
  
  AddTransaction.defaultProps = {
    testID: "AddTransaction",
  };
  
  export default AddTransaction;

  My file where I have my tests:

  I managed to do just one test on my entire component, this test is working

  import React from "react";
  import { render, screen } from "@testing-library/react";
  import "@testing-library/jest-dom";
  import AddTransaction from "./AddTransaction";
  
  import { AppContextProvider } from "../../providers/app";
  
  describe("Components / AddTransaction", () => {
    beforeEach(() => {
      render(
        <AppContextProvider>
          <AddTransaction />
        </AppContextProvider>
      );
    });
  
    test("Render AddTransaction Component", () => {
      const linkElement = screen.getByTestId("AddTransaction_Container");
      expect(linkElement).toBeInTheDocument();
    });
  });