我正在尝试遵循 React 测试库文档中的本指南来包装我想要测试的所有组件。我这样做是因为我需要访问我正在测试的组件中
_app.js
中定义的各种上下文提供程序。
这是我的
/pages/_app.js
文件:
export class MyApp extends App {
public componentDidMount() {
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
public render() {
const { Component, pageProps, apolloClient } = this.props;
return (
<Container>
<StateProvider>
<ThemeProvider theme={theme}>
<ApolloProvider client={apolloClient}>
<CssBaseline />
<Component {...pageProps} />
<SignUp />
<Snackbar />
</ApolloProvider>
</ThemeProvider>
</StateProvider>
</Container>
);
}
}
export default withApollo(MyApp);
这是我的
/utils/testProviders.js
文件:
class AllTheProvidersWrapped extends App {
public componentDidMount() {
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
public render() {
const { pageProps, apolloClient, children } = this.props;
return (
<Container>
<StateProvider>
<ThemeProvider theme={theme}>
<ApolloProvider client={apolloClient}>
<CssBaseline />
{React.cloneElement(children, { pageProps })}
<SignUp />
<Snackbar />
</ApolloProvider>
</ThemeProvider>
</StateProvider>
</Container>
);
}
}
const AllTheProviders = withApollo(AllTheProvidersWrapped);
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options });
export * from "react-testing-library";
export { customRender as render };
这是我的
/jest.config.js
文件:
module.exports = {
testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
moduleDirectories: ["node_modules", "utils", __dirname]
};
这是我尝试运行的测试的示例:
import React from "react";
import { render, cleanup } from "testProviders";
import OutlinedInput from "./OutlinedInput";
afterEach(cleanup);
const mockProps = {
id: "name",
label: "Name",
fieldStateString: "signUpForm.fields"
};
describe("<OutlinedInput />", (): void => {
it("renders as snapshot", (): void => {
const { asFragment } = render(<OutlinedInput {...mockProps} />, {});
expect(asFragment()).toMatchSnapshot();
});
});
测试输出的错误信息为:
TypeError: Cannot read property 'pathname' of undefined
52 |
53 | const customRender: CustomRender = (ui, options) =>
> 54 | render(ui, { wrapper: AllTheProviders, ...options });
| ^
55 |
56 | // re-export everything
57 | export * from "react-testing-library";
如果我不得不猜测,我会说
<Component {...pageProps} />
中的 /pages/_app.js
组件提供了 pathName 作为 Next.js 路由的一部分。
Next.js 提供的示例并未涵盖如何执行此操作,因此我希望这里有人能够提供帮助。
您是否已尝试从 /utils/testProviders.js 文件中删除上下文:
class AllTheProvidersWrapped extends App {
public componentDidMount() {
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
public render() {
const { pageProps, apolloClient, children } = this.props;
return (
<ApolloProvider client={apolloClient}>
<CssBaseline />
{React.cloneElement(children, { pageProps })}
<SignUp />
<Snackbar />
</ApolloProvider>
);
}
}
const AllTheProviders = withApollo(AllTheProvidersWrapped);
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options });
export * from "react-testing-library";
export { customRender as render };
我认为,Context 提供程序仅适用于 _app.js 文件,它是 Next.js 的东西。