开玩笑--coverage测试错误:“渲染未返回任何内容。”

时间:2020-09-14 09:38:21

标签: reactjs jestjs react-testing-library test-coverage

当我运行纱线测试或纱线测试[filename]时,我所有的组件都通过了测试。但是,当我使用--coverage标志运行测试时,出现以下错误,指向我创建的自定义渲染函数的包装器。自定义渲染功能或多或少是从react-testing-library文档中复制/粘贴的:https://testing-library.com/docs/react-testing-library/setup

到目前为止,我尚未尝试使用以下命令:纱线测试-覆盖率,纱线测试-覆盖率--watchAll = false,纱线测试--collectCoverage,npm运行测试--coverage,npm运行测试- coverage --watchAll = false

错误:

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 => {`

自定义渲染功能:

    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('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"
    ]
  }
}

0 个答案:

没有答案