如何解决“更新未包装在act()中".在测试库反应中发出警告? [英] How to solve the "update was not wrapped in act()" warning in testing-library-react?
问题描述
我正在使用一个具有副作用的简单组件.我的测试通过了,但出现警告Warning: An update to Hello inside a test was not wrapped in act(...).
.
I'm working with a simple component that does a side effect. My test passes, but I'm getting the warning Warning: An update to Hello inside a test was not wrapped in act(...).
.
我也不知道waitForElement
是否是编写此测试的最佳方法.
I'm also don't know if waitForElement
is the best way to write this test.
我的组件
export default function Hello() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
setPosts(response.data);
}
fetchData();
}, []);
return (
<div>
<ul>
{
posts.map(
post => <li key={post.id}>{post.title}</li>
)
}
</ul>
</div>
)
}
我的组件测试
import React from 'react';
import {render, cleanup, act } from '@testing-library/react';
import mockAxios from 'axios';
import Hello from '.';
afterEach(cleanup);
it('renders hello correctly', async () => {
mockAxios.get.mockResolvedValue({
data: [
{ id: 1, title: 'post one' },
{ id: 2, title: 'post two' },
],
});
const { asFragment } = await waitForElement(() => render(<Hello />));
expect(asFragment()).toMatchSnapshot();
});
推荐答案
更新后的答案:
请参阅下面的@mikaelrs评论.
Updated answer:
Please refer to @mikaelrs comment below.
不需要waitFor或waitForElement.您可以只使用findBy *选择器,这些选择器返回可以等待的promise.例如,等待findByTestId('list');
No need for the waitFor or waitForElement. You can just use findBy* selectors which return a promise that can be awaited. e.g await findByTestId('list');
已弃用的答案:
从文档中使用waitForElement
是正确的方法:
Deprecated answer:
Use waitForElement
is a correct way, from the docs:
等待直到模拟的
get
请求承诺解决,并且组件调用setState并重新渲染.waitForElement
等待,直到回调未引发错误
Wait until the mocked
get
request promise resolves and the component calls setState and re-renders.waitForElement
waits until the callback doesn't throw an error
这是您的案例的有效示例:
Here is the working example for your case:
index.jsx
:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function Hello() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
setPosts(response.data);
};
fetchData();
}, []);
return (
<div>
<ul data-testid="list">
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
index.test.jsx
:
import React from 'react';
import { render, cleanup, waitForElement } from '@testing-library/react';
import axios from 'axios';
import Hello from '.';
jest.mock('axios');
afterEach(cleanup);
it('renders hello correctly', async () => {
axios.get.mockResolvedValue({
data: [
{ id: 1, title: 'post one' },
{ id: 2, title: 'post two' },
],
});
const { getByTestId, asFragment } = render(<Hello />);
const listNode = await waitForElement(() => getByTestId('list'));
expect(listNode.children).toHaveLength(2);
expect(asFragment()).toMatchSnapshot();
});
单元测试结果覆盖率100%:
Unit test results with 100% coverage:
PASS stackoverflow/60115885/index.test.jsx
✓ renders hello correctly (49ms)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.jsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 4.98s
index.test.jsx.snapshot
:
// Jest Snapshot v1
exports[`renders hello correctly 1`] = `
<DocumentFragment>
<div>
<ul
data-testid="list"
>
<li>
post one
</li>
<li>
post two
</li>
</ul>
</div>
</DocumentFragment>
`;
源代码: https://github .com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60115885
这篇关于如何解决“更新未包装在act()中".在测试库反应中发出警告?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!