Jest Проблема для тестирования сопоставления компонентов по структуре json - PullRequest
Новая
       66

Jest Проблема для тестирования сопоставления компонентов по структуре json

0 голосов
/ 01 марта 2019

Я создал следующий функциональный компонент, который в основном отображает файл json, используя значения в рамках создания загрузки значений тегов, как показано ниже. 

import FooterCerts from "constants/json/FooterCerts.json";
import { NextFunctionComponent } from "next";
import * as React from "react";
import styles from "./index.scss";

export const FooterLogos: NextFunctionComponent = () => (
  <React.Fragment>
    <style jsx={styles.toString()}>{styles}</style>
    <ul>
      {FooterCerts.map((logo) => (
        <a
          href={logo.HREF}
          title={logo.TITLE}
          rel="noopener external"
          target="_blank"
          data-qa={logo.DATA_QA}
          key={logo.KEY}
        >
          <li>
            <img src={logo.FILE_PATH} alt={logo.ALT} />
          </li>
        </a>
      ))}
    </ul>
  </React.Fragment>
);

Моя проблема возникает при создании модульного теста для этогосоставная часть.Это базовый тест, просто пытающийся создать моментальный снимок. 

import * as React from "react";
import { cleanup, render } from "react-testing-library";
import { FooterLogos } from ".";

afterEach(cleanup);

it("renders as expected", () => {
  const { container } = render(<FooterLogos />);

  expect(container).toMatchSnapshot();
});

Это вызывает проблему при запуске этого теста 

TypeError: Cannot read property 'map' of undefined

Я использую последнюю версию Jest 24.1.0,ts-jest 24.0.0 с конфигурацией jest: 

module.exports = {
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex: "(/src/.*)\\.(test.tsx?)$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  roots: ["<rootDir>/src"],
  moduleNameMapper: {
    "^.*\\.scss$": __dirname + "/jest.stub.ts",
    "^components(.*)$": "<rootDir>/src/components$1",
    "^helpers(.*)$": "<rootDir>/src/helpers$1",
    "^pages(.*)$": "<rootDir>/src/pages$1",
    "^services(.*)$": "<rootDir>/src/services$1",
    "^state(.*)$": "<rootDir>/src/state$1",
    "^fixtures(.*)$": "<rootDir>/src/fixtures$1",
    "^constants(.*)$": "<rootDir>/src/constants$1",
  },
  setupFilesAfterEnv: ["./jest.setup.ts"],
};

Любой совет о том, как решить эту проблему, был бы полезен, или, если требуется какая-либо другая информация, чтобы помочь, пожалуйста, дайте мне знать.Спасибо

1 Ответ

0 голосов
/ 11 марта 2019

Исправлено это путем изменения конфигурации jest с: 

transform: {
    "^.+\\.tsx?$": "ts-jest",
  },

на: 

transform: {
    "^.+\\.tsx?$": "babel-jest",
  },
...