如何在Reactjs中测试非导出函数

Question

我看过很多关于测试的教程视频，但通常这些测试测试通过组件的道具或使用data-testid=""。是否有一种方法来测试非导出函数?我读到过rewire模块，它可以做到这一点，但问题是Jest不会在覆盖率报告中考虑从rewire调用的函数。

// Random.js
import React from 'react'
export function sayHi() {
return '👋';
}
function ListBox() {
function saySecret() {
return '🤫';
}

return (
<div>ListBox</div>
)
}
export default ListBox

第一个有export的是:

// Random.test.js
import { sayHi } from './Random.js';
describe('sayHi', () => {
it('returns wave emoji', () => {
expect(sayHi()).toBe('👋');
});
});

如何测试saySecret?

Answer 1

简短的回答是你不能单独测试这些函数到ListBox组件本身。

更好的答案是你不应该。至少反应测试库的理念是:

您希望您的测试避免包含组件的实现细节

https://testing-library.com/docs/react-testing-library/intro/

. .而只存在于组件内部的函数会被视为实现细节。

如果你需要增加你的代码覆盖率，那么使用react-testing-library以调用函数的方式"使用"组件。

如果函数是可重用的代码，那么将它们移出组件，并导出它们。然后你可以用通常的方法测试它们。