使用模拟服务工作者 (MSW)、节点和 React 对删除方法进行单元测试的问题

Question

我使用 React 和 Typescript 设置了 MSW，代码在浏览器中工作，即它删除了员工，但在测试中则不然，其他测试工作正常。我很困惑，我可能正在做一些愚蠢的事情，任何帮助将不胜感激
github 仓库 https://github.com/cherry15/cc2022react
处理程序.ts

  rest.delete(`${url}/:employeeId`, (req, res, ctx) => {  
    const { employeeId } = req.params
    if (employeeId) {
      const employeeIndex = EmployeesData.findIndex(
        (employee) => employee.id === employeeId.toString()
      )
      if (employeeIndex !== -1) {
        EmployeesData.splice(employeeIndex, 1)
        return res(ctx.status(200))
      } else {
        return res(ctx.status(404))
      }
    }
    return res(ctx.status(400))
  }),

employees.test.tsx

describe('Delete employee', () => {
  test('clicking on the OK button deletes the employee', async () => {
    renderWithProviders(<EmployeeList />)
    await screen.findByRole('heading', { name: /ada lovelace/i })
    await screen.findAllByRole('button', { name: 'Delete employee' })

    fireEvent.click(screen.getAllByRole('button', { name: 'Delete employee' })[0])
    fireEvent.click(await screen.findByText('OK'))
    expect(screen.getByText(/ada lovelace/i)).not.toBeInTheDocument()
  })
})

Answer 1

这不完全是 MSW 或 RTK 查询问题。由于您正在执行异步操作，因此您需要等待目标元素消失。

test("clicking on the OK button deletes the employee", async () => {
renderWithProviders(<EmployeeList />);

// Wait for ada lovelace to show up to the party!
await screen.findByRole("heading", { name: /ada lovelace/i });
await screen.findAllByRole("button", { name: "Delete employee" });

fireEvent.click(
  screen.getAllByRole("button", { name: "Delete employee" })[0]
);
fireEvent.click(await screen.findByText("OK"));

// Let's wait to make sure she's gone!
await waitForElementToBeRemoved(() =>
  screen.queryByRole("heading", { name: /ada lovelace/i })
);
});