expect(...).toBeInTheDocument設定后不是函式-有解無憂

我已經'@testing-library/jest-dom'安裝了，所以它應該在那里。還有以下匯入，我的配置有什么問題嗎？

TypeError: expect(...).toBeInTheDocument is not a function

      52 |     renderIt(onSubmit);
      53 |
    > 54 |     expect(screen.getByText(/alberta/i)).toBeInTheDocument();

我的測驗：

import { render, screen } from '@testing-library/react';
import { Formik, Form } from 'formik';

import { Select } from '.';

const options = [
  'Alberta',
  'British Columbia',
  'Manitoba',
  'New Brunswick',
  'Newfoundland & Labrador',
  'Northwest Territories',
  'Nova Scotia',
  'Nunavut',
  'Ontario',
  'Prince Edward Island',
  'Quebec',
  'Saskatchewan',
  'Yukon',
];

const renderIt = (onSubmit: () => void) => render(
  <Formik
    initialValues={{ province: '' }}
    onSubmit={onSubmit}
  >
    <Form>
      <Select name="province" options={options} />
    </Form>
  </Formik>,
);

describe('Select component', () => {
  test('It renders', () => {
    const onSubmit = jest.fn();
    renderIt(onSubmit);

    expect(screen.getByText(/alberta/i)).toBeInTheDocument();
  });
});

我的src/setupTests.ts檔案：

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';

package.json：

  "devDependencies": {
    "@testing-library/dom": "8.11.3",
    "@testing-library/jest-dom": "5.16.2",
    "@testing-library/react": "^13.0.0-alpha.6",
    "@testing-library/react-hooks": "7.0.2",
    "@testing-library/user-event": "13.5.0",
    "@types/jest": "27.4.1",
    "jest": "27.5.1",
    "ts-jest": "27.1.3",
    "typescript": "4.6.2"
  },

jest.config.js：

module.exports = {
  testEnvironment: 'jsdom',
  preset: 'ts-jest',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};

uj5u.com熱心網友回復：

您應該使用setupFilesAfterEnv屬性setupTests.ts在您的笑話配置中宣告。

jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  preset: 'ts-jest',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/447822.html

標籤：反应开玩笑的反应测试库形式开玩笑

上一篇：確認按鈕有問題。按鈕不起作用

下一篇：如何在具有組件的ReactJS中呈現字串？