Creé una aplicación React con create-react la semana pasada.
Tengo un formulario simple que muestra un mensaje cuando hago clic en enviar.
Me gustaría probarlo, esta es la prueba que creé SampleForm.test.tsx :
import React from "react"; import { render, fireEvent, screen, waitFor } from "@testing-library/react"; import SampleForm from "./SampleForm"; import "@testing-library/jest-dom/extend-expect" test("renders submits form", async () => { const str = "THIS DIDNT DO ANYTHING"; const { container, getByText, findByText } = render(<SampleForm />); fireEvent.click(screen.getByText("Submit")); await waitFor(() => expect(screen.getByText(str))) }); Recibo un error en waitFor
TypeError: MutationObserver no es un constructor
seguimiento de la pila:
at node_modules/@testing-library/dom/dist/wait-for.js:38:22 at waitFor (node_modules/@testing-library/dom/dist/wait-for.js:31:10) at node_modules/@testing-library/dom/dist/wait-for.js:70:54 at node_modules/@testing-library/react/dist/pure.js:51:22 at node_modules/@testing-library/react/dist/act-compat.js:60:24 at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12) at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14) at node_modules/@testing-library/react/dist/act-compat.js:59:20 at asyncAct (node_modules/@testing-library/react/dist/act-compat.js:38:14) at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:50:35) at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:70:35) at Object.<anonymous> (src/components/SampleForm.test.tsx:18:11)He intentado varias alteraciones diferentes del estilo y la consulta de texto. Derivado de las muestras aquí
Este es el ejemplo directo que estoy tratando de ponerme a trabajar.
Dudo en agregar cuñas y giros porque, según el ejemplo, no debería tener que hacer nada de eso. Me gustaría entender por qué ese ejemplo no funciona.
Mi package.json :
{ "name": "intact", "version": "0.1.0", "private": true, "dependencies": { "@rjsf/core": "^2.0.0-alpha.6", "@testing-library/jest-dom": "^5.3.0", "@testing-library/react": "^10.0.2", "@testing-library/user-event": "^10.0.1", "@types/jest": "^25.1.5", "@types/lodash": "^4.14.149", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@types/react-router-dom": "^5.1.3", "bootstrap": "^4.4.1", "lodash": "^4.17.15", "msal": "^1.2.2", "react": "^16.13.1", "react-aad-msal": "^2.3.4", "react-bootstrap": "^1.0.0", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typescript": "^3.8.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/fs-extra": "^8.1.0", "@types/node": "^13.11.0", "@types/rimraf": "^3.0.0", "fs-extra": "^9.0.0", "rimraf": "^3.0.2", "ts-node": "^8.8.1" } }ediciones: 04-05-2020
¿Está ejecutando la última CRA? Si es así, este problema https://github.com/facebook/create-react-app/pull/8362 podría ser lo que está experimentando. Eso se puede solucionar instalando https://www.npmjs.com/package/jest-environment-jsdom-sixteen , por ejemplo, $ yarn add -D jest-environment-jsdom-sixteen y editando su script de prueba:
... "scripts": { ... - "test": "react-scripts test --env=dom" + "test": "react-scripts test --env=jest-environment-jsdom-sixteen" ... }, ... "devDependencies": { ... "jest-environment-jsdom-sixteen": "^1.0.3", ... }, ...Esencialmente, le dirá a su broma que use jsdom v16 en lugar de v15 (predeterminado para Jest v25).
Tuve este problema cuando estaba ejecutando una versión muy antigua de node.js en Windows. Cuando actualicé a la versión de nodo 12.16.3 , el error desapareció.
También me enfrenté al mismo problema.
Antes de probar la respuesta aceptada, actualicé react-scripts a la versión 4.0.1 .
Eso resolvió el problema, porque react-scripts 4.0.1 usa Jest 26.6.x
Por lo tanto, intente actualizar primero react-scripts .
Esta es mi escena:
jest.config.js :
module.exports = { preset: 'ts-jest/presets/js-with-ts', testEnvironment: 'enzyme', setupFilesAfterEnv: ['jest-enzyme'], setupFiles: ['./jest.setup.js'], testEnvironmentOptions: { enzymeAdapter: 'react16', }, }; package.json :
"@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "jest": "^26.6.3", "jest-environment-enzyme": "^7.1.2", "jest-enzyme": "^7.1.2", "ts-jest": "^26.4.4", "typescript": "^4.1.2" "react": "^16.14.0", "react-dom": "^16.14.0", "react-router-dom": "^5.2.0",Tengo un error:
TypeError: MutationObserver is not a constructor 9 | const { getByTestId } = render(<Login />); 10 | expect(getByTestId('getUrl').getAttribute('href')).toEqual(''); > 11 | const url = await waitFor(() => getByTestId('getUrl')); Pero cuando cambié la configuración de testEnvironment :
module.exports = { preset: 'ts-jest/presets/js-with-ts', // testEnvironment: 'enzyme', setupFilesAfterEnv: ['jest-enzyme'], setupFiles: ['./jest.setup.js'], testEnvironmentOptions: { enzymeAdapter: 'react16', }, };La prueba pasa:
PASS examples/65336283/LoginLink.test.tsx 65336283 ✓ should display loginurl (23 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 3 s, estimated 4 sEn mi caso, estaba actualizando desde una versión anterior de jest y tenía que asegurarme de incluir el entorno de prueba apropiado en package.json ya que no se configuró ninguno:
{ ... "scripts": { ... "test": "jest --env=jsdom" ... }, ... }