标签: msw

我创建了一个内置打字稿模板的 Create React App 应用程序，然后我使用 npm 安装了 MSW 并根据 MSW 安装指南创建了文件。它对于玩笑来说工作得很好，但是对于浏览器来说，当我使用启动脚本时，我收到了一堆警告：

WARNING in ./node_modules/@mswjs/interceptors/lib/utils/uuid.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<ROOT_DIR>\node_modules\@mswjs\interceptors\src\utils\uuid.ts' file: Error: ENOENT: no such file or directory, open '<ROOT_DIR>\node_modules\@mswjs\interceptors\src\utils\uuid.ts'
 @ ./node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js 167:13-40
 @ ./node_modules/msw/lib/esm/index.js 12:0-76 1568:14-28
 @ ./src/mocks/browser.ts 3:0-34 6:22-33
 @ ./src/index.tsx 8:0-41 10:0-12

以及类似的...

我找不到任何答案，所以我向你寻求帮助。

我试图弄清楚在使用 React 测试库测试下一个 js 应用程序时如何模拟对 auth0 身份验证后端的调用。我正在使用auth0/nextjs-auth0来处理身份验证。我的目的是使用MSW为所有 API 调用提供模拟。

我按照 nextjs 文档next.js/examples/with-msw中的示例为客户端和服务器 API 调用设置模拟。auth0/nextjs-auth0包（/api/auth/login、和）生成的所有 API 调用都/api/auth/callback收到模拟响应。/api/auth/logout/api/auth/me

模拟响应/api/auth/me如下所示

import { rest } from 'msw';

export const handlers = [
  // /api/auth/me
  rest.get(/.*\/api\/auth\/me$/, (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        user: { name: 'test', email: 'email@domain.com' },
      }),
    );
  }),
];

当我在浏览器中运行该应用程序时，示例设置工作正常。但是当我运行测试时，模拟没有被拾取。

示例测试块如下所示

import React from 'react';
import {render , screen } from '@testing-library/react'; …

我正在为使用 Redux Toolkit 的 Next.js 应用程序运行笑话测试套件。我使用 msw 来模拟对由 Redux Toolkit 处理的 Next 应用程序之外的另一个 api 的任何必要调用。

我没有模拟所有 RTK 查询端点，仅模拟我当前在测试中使用的那些。

当我在没有通过 生成覆盖范围的情况下运行时，测试运行良好npm run test。

但是，当我通过 运行覆盖率报告时npm run test -- --coverage，所有测试都会失败，并且都有相同的错误：

- Test suite failed to run

    No element indexed by 9
    
     at ArraySet_at [as at] (node_modules/source-map-support/node_modules/source-map/lib/array-set.js:109:9)
      at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (node_modules/source-map-support/node_modules/source-map/lib/source-map-consumer.js:673:30)
      at mapSourcePosition (node_modules/source-map-support/source-map-support.js:214:42)
      at wrapCallSite (node_modules/source-map-support/source-map-support.js:358:20)
      at node_modules/source-map-support/source-map-support.js:399:26
          at Array.map (<anonymous>)
      at Function.prepareStackTrace (node_modules/source-map-support/source-map-support.js:398:30)

我发现如果将 msw 处理程序设置为空数组，则不会出现错误。正如预期的那样，少数需要 API 的测试失败了。然而，除此之外，测试都运行良好。

我不确定从这里该去哪里。任何意见是极大的赞赏。

我有一个正在运行的 React 应用程序，我用它msw来在浏览器和测试中模拟 BE（开玩笑）。使用 msw v1.3.0 一切都工作得很好，我决定更新它 v2.0，但我遇到了问题。由于错误，我所有的测试都失败了ReferenceError: TextEncoder is not defined。在浏览器模式下它工作正常。

我已联系msw支持人员，他们告诉我这个问题与 Jest 有关。我已经尝试了很多解决方法，如何TextEncoder在通常情况下定义可能起作用的地方，但都是徒劳的。

ps所有版本都是新的（node：v18.14.2，npm：v9.5.0，typescript：v4.9.5，react：v18.2.0，jest：v27.5.1）。我运行我的测试craco test

我尝试创建一个单独的jest.config.js文件并TextEncoder如下定义：

module.exports = {
  globals: {
     TextEncoder: require('util').TextEncoder,
     TextDecoder: require('util').TextDecoder,
  }
}

并从文件中：

module.exports = {
  setupFiles: ['<rootDir>/setupFiles.js'],
}

我尝试从 'util' 和 'node:util' 导入 TextEncoder：

const { TextDecoder, TextEncoder } = require('node:util');

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder, writable: true },
  TextEncoder: { value: TextEncoder, writable: true },
});

我尝试从不同的外部“文本编码”库导入它。并添加 …

我有一个 RTK 查询突变端点拒绝应用程序，它使 getApplication 查询无效。这些都在同一个 API 中。

rejectApplication: builder.mutation<RejectResponse, string>({
  query: (applicationId) => ({
    url: `/applications/${applicationId}`,
    method: "DELETE",
  }),
  invalidatesTags: (_result, _error, applicationId) => [
    "Status",
    { type: "Application", id: "LIST" },
    { type: "Application", id: applicationId },
  ],
}),

getApplication: builder.query<ApplicationResponse, string>({
  query: (applicationId: string) => ({
    method: "GET",
    url: `/applications/${applicationId}`,
  }),
  providesTags: (_result, _error, id) => [{ type: "Application", id: id }],
}),

问题是我有两个使用 useRejectApplicationMutation 挂钩的组件，但由于某种原因，只有其中一个组件似乎在查询结果失效后正确地将其从缓存中删除。我可以通过 Redux 开发工具观察这一点，在其中我可以看到在一个组件中完成拒绝突变后调度的removeQueryResult 操作，但在另一个组件中没有触发。这导致组件中的 getApplication 数据没有改变，从而破坏了应用程序的流程。

const {
  data,
  isLoading: getApplicationIsLoading,
  isError: getApplicationIsError, …

我正在使用MSW和OpenAPI 后端包。我想模拟展位浏览器服务器和测试服务器。我有 OpenAPI 定义可用的形式，我为 RTK 查询生成 generated.ts （超出了这个问题的范围）。我想使用 OpenAPI 规范将其与 OpenAPI 后端一起使用，并为浏览器和测试生成 MSW 休息工作人员。

接下来是设置：

索引.tsx

import worker from './mocks/browser';

if (process.env.NODE_ENV === 'development') {
    worker.start();
}

模拟/浏览器.ts

import { setupWorker, rest } from 'msw';

import { OpenAPIBackend } from 'openapi-backend';
import type { Document } from 'openapi-backend';
import definition from './api.json';


// create our mock backend with openapi-backend
const api = new OpenAPIBackend({ definition: definition as Document });
api.register('notFound', (c, res, ctx) => res(ctx.status(404)));
api.registerHandler('notImplemented', …

我使用msw来模拟自动化 FE 测试的后端响应。

我想为用户创建的数据创建导出功能。我正在POST向所需的路线发出请求，并希望返回带有 .csv 的响应；.pdf ；.xls 文件应自动下载。

我一直在寻找合适的方法来做到这一点，并遇到了Content-Disposition响应标头。

遗憾的是，响应没有触发保存对话框，也没有开始下载，但我找不到错误。

编辑：经过几次对话和一些独特的情况后，我决定为生成的 Blob 数据创建一个 ObjectURL，并通过调用强制下载window.open()。

我更改了处理程序中的预期响应，并在 FE 中添加了相应的调用。

处理程序.js

rest.post('/mock/things/:thingId/export', async (req, res, ctx) => {
  const docType = req.headers.get('Content-type');
  const startDate = req.url.searchParams.get('startDate');
  const endDate = req.url.searchParams.get('endDate');
  const selected = req.body;

  const resDataString = 'testName,testLastName,\r\nDaniel,Schaller';
  const blob = new Blob([resDataString], { type: docType });
  const buffer = await blob.arrayBuffer();

  return res(
    ctx.status(200),
    ctx.set({
      'content-type': `${docType}`,
      'Content-length': buffer.byteLength.toString(),
    }),
    ctx.body(buffer),
    ctx.delay(), …

Run Code Online (Sandbox Code Playgroud)

我有一个使用 RTK 查询挂钩生成的简单家庭列表，其中可以将项目标记为最喜欢的，并根据标签失效自动重新获取数据。虽然当我在测试中运行项目时一切正常，但 msw 无法匹配在突变成功通过标签失效触发后第二次调用的相同 GET 请求。

服务：

export const homesApi = createApi({
reducerPath: 'homesApi',
baseQuery: fetchBaseQuery({
  baseUrl: API_URL,
  prepareHeaders: (headers, { getState }) => {
    headers.set('Accept', `application/json`);
    return headers;
  },
}),
tagTypes: [
  'Homes',
],
endpoints: (builder) => ({
  getHomes: builder.query({
    query: (params) => {
      
      const url = qs.stringifyUrl(
        { url: '/homes', query: params },
        { skipEmptyString: true, skipNull: true }
      );

      return url

    },
    providesTags: (result) =>
      result?.data
        ? [
            ...result.data.map(({ id }) => ({ type: 'Homes', id …

我将 msw 与 Next js 一起使用。但在第一次渲染时，无法连接 api 这是index.tsx

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const Home = () => {
  const getFruit = async () => {
    const { data } = await axios.get("/api");

    return data;
  };

  const { data } = useQuery(["dfa"], getFruit);
  console.log("data: ", data);

  return <div>Hello world</div>;
};

export default Home;

我在开发工具中捕获日志

在终端编译 /_error （客户端和服务器）..中显示错误。我在mocks/index.ts中编写代码，例如

async function initMocks() {
  if (typeof window === "undefined") {
    const { server } = await …

我正在集成一个模拟 API，它基本上发送一个响应对象，其中包含一组应该显示在 UI（聊天框）中的消息以及用户名、用户图片等。

由于重大更改，我在设置msw 1.1.0with Next JS 13.2.1 （带有布局的实验应用程序目录）时遇到了一些麻烦。然而这是我的代码。

到目前为止我的代码是这样设置的

src/app/(用户)/live-view/page.tsx

import React from "react";
import ThreadPostList from "../../components/threadList";
 import { worker } from '../../../mocks/browser';

if (process.env.NODE_ENV === 'development') {
  worker.start();
}

async function getMessages() {
  const response = await fetch("http://localhost:3000/api/messages");
  // const data = await response.json();
  return response;
}


async function LiveViewPage() {
  const messages = await getMessages();
  const convertedMessages = Object.keys(messages);
  // console.log(convertedMessages, "ConvertedMessages");
  
  Object.values(messages).forEach(val => console.log(val));

  
  return (
    <div className="border-t border-gray-200 py-4 divide-y divede-gray-200"> …