在 beforeAll/beforeEvery 中呈现相同的组件：testing-library/react

Question

我在单独的测试中测试单个组件中的不同内容。我不想在每个 test 中编写渲染，但下面的代码不起作用。

我了解到清理函数会在每次测试后清除渲染的组件，这样很好。

import React from "react";
import { Router } from "react-router-dom";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import myComp from './myComp'

const renderComponent = () => {
  return render(<myComp />);
};

describe("desc", () => {
  beforeEach(() => {
   const {getAllByText, getByText, getByRole} = renderComponent()
  });

  test("1", () => {
      console.log(getAllByText) // not defined
  });

  test("2", () => {
      console.log(getAllByText) // not defined

  });

})

以上设置导致错误：

ReferenceError: getAllByText is not defined

我目前的解决方法是在每个 test 中包含 renderComponent() 函数调用，但这看起来不太干净。

test("1", () => {
    const {getAllByText, getByText, getByRole} = renderComponent()
});

尝试：

let result;
beforeEach(() => {
    result = renderComponent();
    }
test("renders success state", () => {
    const { getByText } = result;
    expect(getByText(noAccess)).toBeInTheDocument();
    expect(getByText(applyForAccessButton)).toBeInTheDocument();});

我得到的错误是：

    TypeError: Cannot read property 'getByText' of undefined

Answer 1

getAllByText 是 beforeEach 函数的本地函数，它未在访问它的测试范围内定义。为了以这种方式可行，它应该是：

  let getAllByText, getByText, getByRole;

  beforeEach(() => {
   ({getAllByText, getByText, getByRole} = renderComponent());
  });
  ...

在 beforeAll/beforeEvery 中呈现相同的组件：testing-library/react

Render same component in beforeAll/beforeEvery: testing-library/react

components

reactjs

jestjs

react-testing-library

尝试：