在beforeAll/beforeEvery:测试库/rect中渲染相同的组件

Question

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

我已经理解了cleanup函数在每次测试后都会清除渲染的组件，所以这很好。

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

很抱歉聚会迟到，但我会指出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的好处是，在添加/删除所需查询时，您不再需要保持渲染调用析构函数的最新状态。您只需要键入屏幕即可。让你的编辑神奇的自动完成处理剩下的。

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

Answer 2

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

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