0

好的，我想用 fetching（反应测试库）测试 redux 工具包。我有一点麻烦。

我已经模拟了商店（fetchedMockedState）并对其进行了测试（就像一个魅力，不包括在内）。然后我想测试向商店添加另一个注释。它包括以下内容：

  1. 测试点击添加（浮动操作按钮）
  2. 表格出现
  3. 测试填充两个输入
  4. 测试点击按钮添加注释
  5. 它应该隐藏表单并执行模拟提取（不起作用，表单仍在文档中，期望两个 id 元素listItemElement（从存储映射）的查询失败，同时显示长度结果为 1）
import {
  render,
  screen,
} from '@testing-library/react';
import { Provider } from 'react-redux';
import React from 'react';
import { rest } from 'msw';
import { setupServer } from 'msw/node';

import { StorePosts } from './StorePosts';
import { store } from '../store/store';
import {
  fireEvent, render as render2, screen as screen2,
} from '../../../test-utils/testUtils';

const fetchedMockedState = [
  {
    author: 'someauthor',
    id: 1,
    title: 'sometitle',
  },
];

const newPostMockedData = {
  author: 'someNewAuthor',
  id: 2,
  title: 'someNewTitle',
};

export const handlers = [
  rest.get('http://localhost:3001/posts', (req, res, ctx) => res(ctx.json(fetchedMockedState), ctx.delay(150))),
  rest.post('http://localhost:3001/posts', (req, res, ctx) => res(ctx.json(newPostMockedData), ctx.delay(150))),
];

const server = setupServer(...handlers);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('fetches & receives post', async () => {
  render2(<StorePosts />);
  fireEvent.click(screen2.getByTestId('fabElement'));
  const titleInput = screen2.getByTestId('titleInput').querySelector('input');
  const authorInput = screen2.getByTestId('authorInput').querySelector('input');

  fireEvent.change(titleInput, { target: { value: '2a3' } });
  expect(titleInput?.value).toBe('2a3');
  fireEvent.change(authorInput, { target: { value: '2a3' } });
  expect(authorInput?.value).toBe('2a3');
  fireEvent.click(screen2.getByTestId('addButton'));

  expect(await screen2.findByTestId('titleInput')).not.toBeInTheDocument(); (FAILS)
  expect(await screen2.findAllByTestId('listItemElement')).toHaveLength(2); (FAILS)
});
4

0 回答 0