在 beforeAll/beforeEvery 中渲染相同的组件：testing-library/react

Question

我在单独的测试中在单个组件中测试不同的东西。我不想在每个单独的内部编写 render 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

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

ReferenceError: getAllByText is not defined

试图：

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

抱歉，聚会迟到了，但我会指出肯特·多德 (kent c dodd) 的一个很好的做法

import { render, screen } from '@testing-library/react';

describe('Your Page',() => {
    beforeEach(() => {
        render(
            <YourComponent />
        );
    })
   test("renders success state", () => {
        expect(screen.getByText(noAccess)).toBeInTheDocument();
   })
})

这里的文章提到使用 screen.getByText 而不是破坏它。

使用 screen 的好处是，在添加/删除所需的查询时，您不再需要使渲染调用解构保持最新。您只需要输入 screen 即可。让你的编辑器神奇的自动完成功能来处理剩下的事情。

文章链接：https://kentcdodds.com/blog/common-mistakes-with-react-testing-library