Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

default.mockReturnValue is not a function

Meu arquivo de teste contendo o código abaixo está retornando TypeError: _useList.default.mockReturnValue is not a function ao executar npm test

import { render, screen } from "@testing-library/react";
import React from "react";
import { RecoilRoot } from "recoil";
import useList from "../../state/hooks/useList";
import List from "./List";

jest.mock("../../state/hooks/useList", () => {
  return {
    useList: jest.fn()
  }
})

describe("empty list", () => {
  beforeEach(() => {
    (useList as jest.Mock).mockReturnValue([])
  })

  test("should be rendered", () => {
    render(
      <RecoilRoot>
        <List />
      </RecoilRoot>
    )

    const items = screen.queryAllByRole("listitem")
    expect(items).toHaveLength(0)
  })

})

describe("not empty list", () => {
  const participants = ["Ana", "Beatriz"]
  beforeEach(() => {
    (useList as jest.Mock).mockReturnValue(participants)
  })
  test("should be rendered", () => {
    render(
      <RecoilRoot>
        <List />
      </RecoilRoot>
    )

    const items = screen.queryAllByRole("listitem")
    expect(items).toHaveLength(participants.length)
  })

})
1 resposta
solução!

Opa, tranquilo ?

Eu estava com exatamente a mesma dúvida, mas depois de muito procurar encontrei esse site aqui Mock Your Hooks to Make Testing Simpler, que acabou me ajudando.

Resumidamente, a gente remover o segundo parâmetro do jest.mock deixando apenas o caminho para o hook, sendo que a impletação do valor que desejamos a gente implementa no próprio teste.

Ficaria algo assim:

import { render, screen } from "@testing-library/react";
import React from "react";
import { RecoilRoot } from "recoil";
import useList from "../../state/hooks/useList";
import List from "./List";

/* Mudança apenas aqui */
jest.mock("../../state/hooks/useList");

describe("empty list", () => {
  beforeEach(() => {
    (useList as jest.Mock).mockReturnValue([])
  })

  test("should be rendered", () => {
    render(
      <RecoilRoot>
        <List />
      </RecoilRoot>
    )

    const items = screen.queryAllByRole("listitem")
    expect(items).toHaveLength(0)
  })

})

describe("not empty list", () => {
  const participants = ["Ana", "Beatriz"]
  beforeEach(() => {
    (useList as jest.Mock).mockReturnValue(participants)
  })
  test("should be rendered", () => {
    render(
      <RecoilRoot>
        <List />
      </RecoilRoot>
    )

    const items = screen.queryAllByRole("listitem")
    expect(items).toHaveLength(participants.length)
  })

})

Espero que tenha ajudado.