无法在反应测试库中使用模拟服务人员
Posted
技术标签:
【中文标题】无法在反应测试库中使用模拟服务人员【英文标题】：Unable use mock servise worker in react testing library 【发布时间】：2021-08-26 08:56:18 【问题描述】：我没有模拟 axios 请求，而是尝试使用 msw 测试组件，但是在请求之后我没有获得组件中内容的可见性，我做错了什么？
我的组件
import React, useEffect, useState from 'react'
import axios from "axios";
export default function TestPage()
const [testData, setTestData] = useState('')
useEffect(() =>
const getSomeData = async () =>
const data = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
setTestData(data.data.title)
getSomeData()
, [])
return (
<div className='test'>
<h1>testData</h1>
</div>
)
我的测试文件
import React from 'react'
import rest from 'msw';
import setupServer from 'msw/node';
import render, act, screen from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import TestPage from "../testPage";
const allUsers = [
title:'User'
]
const server = setupServer(
rest.get('https://jsonplaceholder.typicode.com/todos/1', async (req, res, ctx) =>
return res(ctx.json( data: allUsers ));
)
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers())
afterAll(() => server.close());
test('loads and displays greeting', async () =>
await act(async () =>
await render(<TestPage/>)
)
await screen.findByText('User') //I have no response content here
screen.debug()
)
【问题讨论】：
【参考方案1】：你不需要为ctx.json()定义data字段，axios.get()方法的解析值有一个data字段。见Response schema
另外，API返回的data是一个数组。
您不需要使用act 辅助函数，通过使用async utilities 之一（如waitFor 或find* 查询）在您的测试中等待API 调用操作的结果就足够了。
例如
TestPage.tsx:
import React, useEffect, useState from 'react';
import axios from 'axios';
export default function TestPage()
const [testData, setTestData] = useState('');
useEffect(() =>
const getSomeData = async () =>
const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
console.log(res.data);
setTestData(res.data[0]?.title);
;
getSomeData();
, []);
return (
<div className="test">
<h1>testData</h1>
</div>
);
TestPage.test.tsx:
import React from 'react';
import rest from 'msw';
import setupServer from 'msw/node';
import render, screen from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import TestPage from './TestPage';
const allUsers = [ title: 'User' ];
const server = setupServer(
rest.get('https://jsonplaceholder.typicode.com/todos/1', async (req, res, ctx) =>
return res(ctx.json(allUsers));
)
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
describe('67902700', () =>
test('loads and displays greeting', async () =>
render(<TestPage />);
await screen.findByText('User');
screen.debug();
);
);
测试结果：
PASS examples/67902700/TestPage.test.tsx (7.499 s)
67902700
✓ loads and displays greeting (65 ms)
console.log
[ title: 'User' ]
at examples/67902700/TestPage.tsx:10:15
console.log
<body>
<div>
<div
class="test"
>
<h1>
User
</h1>
</div>
</div>
</body>
at logDOM (node_modules/@testing-library/dom/dist/pretty-dom.js:82:13)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 7.978 s
【讨论】：
以上是关于无法在反应测试库中使用模拟服务人员的主要内容，如果未能解决你的问题，请参考以下文章
使用 cypress.io 模拟 s-s-r 反应应用程序 e2e 测试的服务器