TypeError: prettyFormat.Format不是一个带有jest@26的@ testinglibrary

Question

我一直在尝试升级我的代码库以与测试库/react一起工作，但它每天都变得具有挑战性。我正试图运行一个单元测试，只是检查文本在文档中，但我被困在以下错误:

TypeError: prettyFormat.format is not a function
53 |       </Provider>
54 |     );
> 55 |     expect(screen.getByTestId('attribute-component')).toBeInTheDocument();
|                   ^
56 |   });
57 |
58 |   it('should match snapshot', () => {
at prettyDOM (node_modules/@testing-library/dom/dist/pretty-dom.js:111:37)
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:36:52)
at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/dom/dist/query-helpers.js:95:19
at Object.<anonymous> (src/test/javascript/spec/app/modules/components/account-attributes/attributes2.spec.tsx:55:19)

这是我的软件信息

• 节点:14.15.1 - ~/.nvm/版本/节点/v14.15.1/bin/节点
• npm: 6.14.8 - ~/.nvm/版本/节点/v14.15.1/bin/npm
• jest: ^26.6.3 =>26.6.3
• @testing-library/react@13

这是我正在写的测试:

describe('attributes changes', () => {
const mpProps = {};
const historyMock = createMemoryHistory({ initialEntries: ['/'], keyLength: 0 });
beforeEach(() => {
historyMock.push('/account-attribute');
});
it('should render attribute component', () => {
render(
<Provider store={reduxMockStore}>
<Router history={historyMock}>
<Attributes {...mpProps} />
</Router>
</Provider>
);
expect(screen.getByTestId('attribute-component')).toBeInTheDocument();
});
it('should match snapshot', () => {
const { container } = render(
<Provider store={reduxMockStore}>
<Router history={historyMock}>
<Attributes {...mpProps} />
</Router>
</Provider>
);
expect(container).toMatchSnapshot();
});
});

screen.debug()也输出与上面相同的错误。然而,屏幕上。getByText工作正常

感谢您的帮助。

Answer 1

我已经解决了这个问题这些是我的发现。

原来我的代码库中有多个版本的pretty-format，因此应用程序无法解析到正确的pretty-format库。

要查找使用pretty-format的所有包，可以运行

npm ls pretty-format

这将使用带有版本号的pretty-format打印所有包。您还可以检查包锁。Json，如果你想冒险。

然后我使用console

require.resolve('pretty-format')

来找出@testing-library/dom正在加载哪个版本的pretty-format的路径，正如上面的stacktrace中提到的。

当控制台记录输出时，我发现罪魁祸首是"junit"我在旧版本上有junit，因此我得到了这个错误。一旦我将junit从v10升级到v15，这个问题就解决了，require.resolve()打印了pretty-format的正确位置，我不再遇到这个问题了。