Resumen
Estoy usando Next.js para crear tanto la API como la aplicación Frontend. Los usos frontend reaccionan. Para las pruebas unitarias, estoy usando next/jest preset y jest como una biblioteca de pruebas unitarias. Estoy usando @tenstack/react-query para administrar el estado y cuando quiero probar la página, arroja un error. En las pruebas en las que estoy usando el entorno jsdom , agrego
/** * @jest-environment jsdom */ en las pruebas a la API estoy usando babel-jest que es predeterminado y no necesita nada
error que arroja
/path/to/project/node_modules/@tanstack/react-query/src/QueryClientProvider.tsx:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import * as React from 'react' ^^^^^^ SyntaxError: Cannot use import statement outside a module El error aparece en la prueba en la que quiero mostrar una página que usa react-query
jest.config.js
// jest.config.js const nextJest = require('next/jest'); const createJestConfig = nextJest({ dir: './' }); const customJestConfig = { moduleDirectories: ['node_modules', '<rootDir>/'], transform: { '^.+\\.[t|j]sx?$': 'ts-jest' } }; module.exports = createJestConfig(customJestConfig);.babelrc
{ "presets": ["next/babel","@babel/preset-env", "@babel/preset-typescript"], "plugins": [ "babel-plugin-transform-typescript-metadata", ["@babel/plugin-proposal-decorators", { "legacy": true }], "babel-plugin-parameter-decorator" ] }Probé estas respuestas , pero desafortunadamente no ayudó.
Resolví un problema burlándome de la biblioteca @tenstack/react-query . Aquí hay un código de muestra
jest.mock('@tanstack/react-query/src/QueryClientProvider', () => ({ QueryClientProvider: ({ children }) => children })); jest.mock('@tanstack/react-query', () => ({ QueryClient: jest.fn(), useQueryClient: jest.fn(), useQuery: jest.fn(), useMutation: jest.fn().mockReturnValue({ mutate: jest.fn(), isLoading: false }) }));