0

Пытаюсь настроить react testing library на стандартной ts сборке next.js. Установил пакеты по докам:

@testing-library/jest-dom"
@testing-library/react"
@testing-library/user-event

Написал пробный тест:

import '@testing-library/jest-dom'
import * as React from 'react'
import {render} from '@testing-library/react'
import { TodosContainer } from './TodosContainer'


test('Checking TodosContainer', () => {
  let component

  beforeAll(() => {
    component = render(<TodosContainer />)
  })

  test('should render', () => {
    expect(component).toBeInTheDocument()
  })

})

И даже не могу запустить его, ибо команда test не воспринимается:

Executing task: npm run test 


> [email protected] test
> test

"test" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.

Также не подхватываются типы, если сделать тест tsx.

Мой package.json:

{
  "name": "todo-2023",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "test"
  },
  "dependencies": {
    "@types/node": "20.6.2",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.3",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.5.1"
  }
}

Upd:

После запуска через jest, получил конфликт типа модулей, ошибка на скрине:

Скрин

Добавил babel конфиг:

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    "@babel/preset-react",
    '@babel/preset-typescript'
  ]
};

И jest конфиг:

module.exports = {
  testEnvironment: "jsdom",
  transform: {
    ["^.+\\.[js|ts]x$"]: "babel-jest"
  },
}

Ситуация не меняется и ошибка к слову явно указывается на импорт стайл модуля, что я делаю не так?

2
  • Наверное у вас в scripts.test должно быть указано что то вида 'jest' или 'npx jest'
    – SwaD
    18 сен в 16:47
  • @SwaD т.е. правильно я понимаю, что rtl зависима от jest? Если да, то какой смысл вообще в этой либе? К слову попробовал через jest, теперь ругается на тип модулей, перепробовал кучу всего из гугла с бабелем и ничего из этого не помогает
    – MrYogurt
    18 сен в 17:37

2 ответа 2

1

Проблема, с которой вы сталкиваетесь, связана с отсутствием скрипта для запуска тестов в вашем package.json. По умолчанию, если вы хотите использовать Jest для запуска тестов, вам нужно добавить соответствующий скрипт.

Вам нужно обновить ваш файл package.json и добавить скрипт для запуска тестов. Вот как это можно сделать:

package.json

{
  "name": "todo-2023",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest" // Обновите эту строку, чтобы запускать Jest
  },
  // ... остальной контент вашего package.json
}

После этого вы можете запустить ваши тесты с помощью команды:

Terminal

npm run test

Теперь Jest должен быть воспринят как команда для запуска ваших тестов, и тесты, написанные с использованием @testing-library/react, должны выполняться без проблем.

Если у вас возникнут проблемы с типами TypeScript, убедитесь, что у вас установлены TypeScript и @types/jest, а также что в вашем tsconfig.json есть настройки для Jest, чтобы TypeScript мог правильно обрабатывать ваши тестовые файлы.

1
  • Я просто не понимаю при чем тут jest, если я решил попробовать testing library. Но в принципе ваш ответ отвечает на мой изначальный вопрос и я его приму. Я добавил апдейт в этот вопрос, если есть идеи, как это решить, было бы хорошо
    – MrYogurt
    18 сен в 23:04
1

jest.config.js

{
  "moduleNameMapper": {
    "\\.(css)$": "identity-obj-proxy"
  },
  // ...

А также заранее скачай библу "identity-obj-proxy". Там у них как раз вроде бы описывается такой кейс: For instance, you can tell Jest to mock this object as imported CSS modules; then all your className lookups on the imported styles object will be returned as-is.

1
  • Ошибка с подхватом css решена, благодарю, а вот с преобразованием модулей нет
    – MrYogurt
    19 сен в 0:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.