I am trying to write a simple test for logging in.
The error message:
TypeError: The "options.agent" property must be one of Agent-like Object, undefined, or false. Received an instance of Object
The test:
import { QueryClient, QueryClientProvider } from 'react-query';
import SignIn from '../SignIn';
import { setupServer } from 'msw/node'
import { render, screen, fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
import { rest } from 'msw';
// set up server to mock API login requests
let server = setupServer();
beforeAll(() => server.listen())
// afterEach(() => server.resetHandlers())
afterAll(() => server.close())
const queryClient = new QueryClient();
const onSubmit = jest.fn();
beforeEach(() => {
//onSubmit.mockClear();
render(
<QueryClientProvider client={queryClient}>
<SignIn onSuccess={onSubmit} />
</QueryClientProvider>
);
})
describe('SignIn Domain', () => {
test('Successful login', async () => {
server.use(
rest.post('/api/Auth/Login', (req, res, ctx) => {
return res(ctx.json([{ token: 'myToken' }]));
}),
);
await waitFor(() => {
fireEvent.change(getEmail(), {
target: {
value: "myemail@gmail.com"
}
})
});
// click the button
await waitFor(() => {
fireEvent.click(screen.getByText('Continue'));
});
await waitForElementToBeRemoved(screen.getByText('Processing...'));
)}
)}
Test test steps should be as follows:
- Enter email
- Click Next (This will grey out and a Spinner will appear while it loads)
- Re-render page to display password entry
- Enter password
- Click Sign In
I have looked deeply but can't find a resolution to the error that I am getting. Any help would be appreciated.
Thank you.
package.json
{
"name": "airdrop-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fluentui/react": "^8.104.5",
"@fluentui/react-icons": "^1.1.145",
"@fluentui/react-icons-mdl2": "^1.3.29",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/d3": "^6.7.5",
"@types/file-saver": "^2.0.5",
"@types/filesaver": "^0.0.30",
"@types/geojson": "^7946.0.10",
"@types/mapbox-gl": "^2.7.10",
"@types/node": "^12.20.55",
"@types/react": "^17.0.52",
"@types/react-dom": "^17.0.18",
"@types/react-motion": "0.0.29",
"@types/react-router-dom": "^5.3.3",
"axios": "^0.21.4",
"d3": "^6.7.0",
"d3-hexbin": "^0.2.2",
"d3-svg-legend": "^2.25.6",
"enzyme": "^3.11.0",
"file-saver": "^2.0.5",
"fluent": "^0.13.0",
"formik": "^2.2.9",
"mapbox-gl": "^2.12.0",
"msw": "^0.28.2",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-map-gl": "^6.1.21",
"react-motion": "^0.5.2",
"react-query": "^3.39.2",
"react-rnd": "^10.4.1",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"sprintf-js": "^1.1.2",
"typescript": "^4.9.4",
"web-vitals": "^1.1.2",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"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/d3-hexbin": "^0.2.3",
"@types/enzyme": "^3.10.12",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/sprintf-js": "^1.1.2",
"enzyme-adapter-react-15": "^1.4.4",
"enzyme-adapter-react-16": "^1.15.7",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"ts-jest": "^29.0.3",
"whatwg-fetch": "^3.6.2"
}
}