Тестирование приложения Next.js с помощью специального файла /pages/_app.js в React-Testing-Library - PullRequest
Новая
       37

Тестирование приложения Next.js с помощью специального файла /pages/_app.js в React-Testing-Library

0 голосов
/ 06 мая 2019

Я пытаюсь следовать этому руководству в документации Reat-Testing-Library , чтобы обернуть все компоненты, которые я хочу протестировать. Я делаю это, потому что мне нужен доступ к различным поставщикам контекста, которые определены в _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, не описывают, как это сделать, поэтому я надеюсь, что кто-то здесь сможет помочь.

...