All of my components pass their tests when I run yarn test or yarn test [filename]. However, when I run tests with the --coverage flag I am getting the following error, pointing to the Wrapper of the custom render function I created. The custom render function is more or less copy/pasted from the react-testing-library documentation: https://testing-library.com/docs/react-testing-library/setup
None of the following commands I have tried so far worked: yarn test --coverage, yarn test --coverage --watchAll=false, yarn test --collectCoverage, npm run test --coverage, npm run test --coverage --watchAll=false
Error:
Error: Uncaught [Error: Wrapper(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
82 | );
83 | };
> 84 | return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
| ^
85 | };
86 |
87 | const render = (ui: ReactElement, { store = createStore(appReducer, initialState as AppApiStore), ...renderOptions } = {}): RenderResult => {`
Custom render function:
const Wrapper: React.FC = ({ children }): ReactElement => {
return (
<MemoryRouter>
<Provider store={store}>
<IntlProvider messages={messagesEn} locale="en">
{children}
</IntlProvider>
</Provider>
</MemoryRouter>
);
};
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
Test:
test('App', () => {
render(<App />);
fireEvent.click(screen.getByText(/Startpage/));
expect(screen.getByText('Start page')).toBeInTheDocument();
});
package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@formatjs/intl-pluralrules": "^3.2.4",
"@types/pubsub-js": "^1.8.0",
"@types/yup": "^0.26.36",
"axios": "^0.19.2",
"formik": "^2.1.4",
"less": "^3.11.3",
"moment": "^2.24.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-intl": "^5.4.1",
"react-media": "^1.10.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "^1.1.3",
"yup": "^0.27.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^11.0.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.4",
"@types/react-router-dom": "^5.1.3",
"@typescript-eslint/eslint-plugin": "^2.18.0",
"@typescript-eslint/parser": "^2.18.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-prettier": "^3.1.2",
"husky": "^1.3.1",
"jest-environment-jsdom-sixteen": "^1.0.3",
"lint-staged": "^8.2.1",
"prettier": "^1.19.1",
"pretty-quick": "^1.11.1",
"redux-logger": "^3.0.6",
"typescript": "~3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jest-environment-jsdom-sixteen",
"eject": "react-scripts eject",
"lint:ts": "eslint --ext=jsx,ts,tsx src",
"eslint-check": ".eslintrc",
"lint-staged": "lint-staged",
"pretty-quick": "pretty-quick",
"build:check": "tsc --noEmit"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,tsx}": [
"pretty-quick --staged",
"eslint --fix --config .eslintrc --fix",
"git add --patch"
]
}
}