2

我正在使用 Jest 作为测试运行程序编写测试，尝试使用 Mock Server Library ( https://mswjs.io/ ) 来模拟服务器。出于某种原因，Jest 似乎没有等待 Axios 调用的承诺。

为了隔离他的问题，我创建了一个简单的示例：一个 Vue 组件，它向测试 api 触发 axios 发布请求，然后使用响应中的值更新模板。

<template>
    <div data-testid="test-page">
        <h1>Test Page</h1>
        <div data-testId="result-div" v-if="result_id">RESULT {{ result_id }}</div>
        <form>
          <button @click.prevent="submitForm()">Test Axios</button>
        </form> 
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
    data() {
        return {
          result_id: null
        } 
    },
    methods: {
        submitForm() {
           axios.post('https://jsonplaceholder.typicode.com/posts',{
              title: 'foo 2',
              body: 'bar 2',
              userId: 2,
            }).then(
              (response) => { 
                  this.result_id = response.data.id;
              }
            );  
        }
    }   
    }
</script>
<style scoped></style>

jsonplaceholder.typicode.com 发布请求文档在此处描述： https ://jsonplaceholder.typicode.com/guide/

它返回此输出

{
  id: 101,
  title: 'foo 2',
  body: 'bar 2',
  userId: 2
}

因此，一旦返回响应并且“result_id”的值为 101，屏幕上就会出现“RESULT 101”。在浏览器中它可以完美运行。

但在 Jest 中却没有。这是失败的 Jest 测试：

import TestPage from './TestPage.vue';
import { render, screen } from '@testing-library/vue';
import "@testing-library/dom";
import "@testing-library/jest-dom"
import userEvent from '@testing-library/user-event';
import { setupServer } from 'msw/node'
import { rest } from "msw"

describe("Test Page", () => {
    it("Tests axios", async () => {
        const server = setupServer(
            rest.post("https://jsonplaceholder.typicode.com/posts", (req, res, ctx) => {
               return ctx.status(200);
            })
        );
        server.listen();
        render(TestPage);
        const button = screen.queryByRole("button", { "name": "Test Axios" });
        await userEvent.click(button);
        await server.close();

        const text = screen.queryByText("RESULT");   
        expect(text).toBeInTheDocument();
        
        //const result_div = screen.queryByTestId("result-div");
        //expect(result_div).toBeInTheDocument();
        
    });
});

所以我使用 msw 模拟服务器并返回 200 状态，然后渲染页面，模拟按钮单击，并尝试查询包含“RESULT 101”的 div（使用 queryByText 或 queryByTestId），但 v-if指令永远不会被触发并且 'result_id' 没有被设置。因此，Jest 似乎没有等待 axios 承诺，并且“result_id”保持为空，而不是从响应中接收 101 值。

不确定我的代码是否有问题，或者是 Jest 甚至是 mswjs 错误。

4

0 回答 0