Comment tester si le composant enfant du composant parent est appelé correctement avec les accessoires appropriés lorsque le composant enfant est simulé. J'obtiens l'erreur :
RangeError: Maximum call stack size exceeded
Ma configuration vitest :
import svgr from 'vite-plugin-svgr'
import { defineConfig } from 'vitest/config'
import type { UserConfig } from 'vitest/config'
import { resolve } from 'path'
export default defineConfig({
test: {
environment: 'jsdom',
setupFiles: ['./tests/setup.ts'],
environmentMatchGlobs: [['./src/**/*.tsx', 'jsdom']],
globals: true,
},
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, './src') }],
},
plugins: [svgr()],
} as UserConfig)
Mon code de test :
import { render, screen } from '@testing-library/react'
import { vi } from 'vitest'
import Input from '@/components/Input/Input'
import Login from './Login'
vi.mock('@/components/Input/Input', () => ({
default: vi.fn(),
}))
describe('ConfirmEmail', () => {
it('renders correctly', () => {
render(<Login />)
expect(screen.getByRole('heading', { name: /Login to your account/i }))
expect(Input).toHaveBeenCalledWith({
label: 'email',
}) //error: RangeError: Maximum call stack size exceeded
})
})
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
C'est comme tester des accessoires de composants pour plaisanter. J'ai fait référence à cet article comme ma solution : https://robertmarshall.dev/blog/react-component-props-passed-to-child-jest-unit-test/
Comme vous n'avez pas inclus le composant d'origine, je ne peux pas vérifier le correctif. J'essaierais quelque chose comme ceci :
const mockInput = vi.fn() vi.mock('@/components/Input/Input', () => ({ default: (props) => { mockInput(props) return <div>Input</div> }, })) describe('Confirm Email', () => { it('renders correctly', () => { render(<Login />) expect(screen.getByRole('heading', { name: /Login to your account/i })) expect(mock Input).toHaveBeenCalledWith( expect.objectContaining({ label: 'email' }) ) }) })