import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
// @ts-ignore (works with .tsx)
import Astronaut from '../Astronaut.tsx';
describe('<Astronaut /> component', () => { describe('should render', () => { const wrapper = shallow(<Astronaut showLogo={true} />); it ('should render a component matching the snapshot', () => { const tree = toJson(wrapper); expect(tree).toMatchSnapshot(); expect(wrapper).toHaveLength(1); }); });
});

"jest": { "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js", "testPathIgnorePatterns": [ "<rootDir>/.next/", "<rootDir>/node_modules/" ], "transform": { "\\.(gql|graphql)$": "jest-transform-graphql", ".*": "babel-jest", "^.+\\.js?$": "babel-jest" }, "moduleFileExtensions": [ "js", "json", "ts", "tsx" ], "modulePaths": [ "<rootDir>/components/", "<rootDir>/pages/", "<rootDir>/shared/" ]
}

import React from 'react';
import { moonHoldings } from '../../shared/models'; // <-- The problem
import { astronaut } from '../../styles'; // <-- This works
const { AstronautContainer, Heading } = astronaut;
interface LogoCheck { showLogo: boolean;
}
export default (showLogo: LogoCheck) => ( <AstronautContainer> { showLogo.showLogo === true ? <Heading>{moonHoldings}</Heading> : null } <img src="static/astronaut.png" alt="astronaut" /> </AstronautContainer>
);