when i run jest test
/Users/app_name/node_modules/react-native-toast-message/lib/index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){export { Toast as default } from './src/Toast';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import {useEffect} from 'react';
> 2 | import Toast from 'react-native-toast-message';
| ^
3 |
4 | export const useToastHide = () => {
5 | return () => Toast.hide();
anyone can help me?
Related
import { run } from "#mdx-js/mdx";
import * as runtime from "react/jsx-runtime";
const mdxToJsx = async (value) => {
const { default: Content } = await run(value, runtime);
return Content
};
export default mdxToJsx;
Here as per mdx library, I want to convert mdx to jsx but I got Uncaught (in promise) SyntaxError: Unexpected identifier 'Promise'
at new AsyncFunction ()
at run (run.js:15:1)
Kindly help me. Thanks Happy coding.
import React, { Fragment, useEffect, useState } from "react";
import { run } from "#mdx-js/mdx";
import * as runtime from "react/jsx-runtime";
export default function MdxToJsx({code}) {
const [mdxModule, setMdxModule] = useState()
const Content = mdxModule ? mdxModule.default : Fragment
useEffect(() => {
(async () => {
setMdxModule(await run(code, runtime))
})()
}, [code])
return <Content />
}
I tried this one also but got the same error.
I am making a component that should transfer the data in file controllers/hello.js(backend) to App.js(frontend in React.js app) which is imported from the router/collector components/hello.js
My components/hello.js looks like this:
import { React } from 'react'
import { useEffect, useState } from 'react';
export const Hello = ()=>{
const[initialState, setInitialState] = useState([], )
useEffect(()=> {
fetch('http://localhost:3001/api/', {mode: "no-cors"})
.then(response => response.json()).then(data => console.log(JSON.parse(data)))
// if (res.ok){
// return res.json()
// }
// }).then(jsonResponse => console.log(jsonResponse))
},[])
// console.log(initialState)
console.log("should work ")
return (<div>Hello</div>)
}
And I get this error:
Uncaught (in promise) SyntaxError: Unexpected end of input
at hello.js:9:1
when I check the API the only response I get is this
but it should be matching what's in localhost:3001/api/ or what's in controllers/hello.js which is
Do you have any idea how I can solve this? Any help is appreciated.
I'm new to test driven development, I'm trying to implement my simple testing but jest always finds my dayjs as not a function. Also i'm not using typescrcipt so my problem would be similar to this.
I can't seem to find how to setup my jest environment to recognise it as not default export.
Here's my simple test with failed mocking?:
import React from "react";
import { shallow } from "enzyme";
import MainDashboardApp from "../MainDashboard";
jest.mock("dayjs", () => {
return () => jest.requireActual("dayjs")("2020-01-01T00:00:00.000Z");
});
describe("Inititate main dashboard", () => {
it("renders without crashing", () => {
┊ shallow(<MainDashboardApp />);
});
});
Error:
FAIL src/app/main/apps/dashboards/main/__tests__/dashboard.test.js
● Test suite failed to run
TypeError: dayjs is not a function
9 | import { tableData } from "../helpers";
10 |
> 11 | const defaultStart = dayjs().startOf("month").format("YYYY-MM-DD");
| ^
12 | const defaultEnd = dayjs().endOf("month").format("YYYY-MM-DD");
13 |
14 | function IncidentList({
at Object.<anonymous> (src/app/main/apps/operations/incidents/IncidentList.js:11:22)
at Object.<anonymous> (src/app/main/apps/index.js:1:1)
at Object.<anonymous> (src/app/main/apps/dashboards/main/MainDashboard.js:22:1)
at Object.<anonymous> (src/app/main/apps/dashboards/main/__tests__/dashboard.test.js:3:1)
Failed component (which actually renders in chrome):
import React, { useEffect, useCallback, useState } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import * as incidents from "app/store/ducks/incident.duck";
import MaterialTable, { MTableToolbar } from "material-table";
import { useHistory } from "react-router-dom";
import * as dayjs from "dayjs";
import { DatePicker } from "#material-ui/pickers";
import { tableData } from "../helpers";
const defaultStart = dayjs().startOf("month").format("YYYY-MM-DD");
const defaultEnd = dayjs().endOf("month").format("YYYY-MM-DD");
function IncidentList({
incidentsList,
requestIncidents,
selectedLoc,
startDate,
endDate,
}) {
const history = useHistory();
const [selectedEndDate, handleEndDateChange] = useState(defaultEnd);
const [selectedStartDate, handleStartDateChange] = useState(defaultStart);
// Deps are ok because history constantly updates, and this handleclick does not need
// to be updated as well
const handleClick = useCallback((event, rowData) => {
history.push({
pathname: `/operation/incident-details/${rowData.id}`,
state: { detail: "testing" },
});
}, []);
useEffect(() => {
if (startDate && endDate) {
handleEndDateChange(endDate);
handleStartDateChange(startDate);
}
}, [startDate, endDate]);
MockDate works great for this, no intense mocking code required.
https://www.npmjs.com/package/mockdate
import MockDate from 'mockdate'
import dayjs from 'dayjs'
MockDate.set('2020-01-01')
console.log(dayjs.format())
// >>> 2019-12-31T18:00:00-06:00
Remember to clear the mock after your test with:
MockDate.reset();
Also for your situation you probably want to use DayJS UTC to avoid unexpected date math results
https://day.js.org/docs/en/plugin/utc
here is my class file in 'App.js'
import CardList from './CardList';
export default class App {
constructor() {
this.cards = [];
this.addCard = this.addCard.bind(this);
}
addCard(data) {
this.cards = [...this.cards, data];
CardList(this.cards);
}
}
My Spec file :
import App from './App';
describe('app tests goes here', () => {
beforeEach(() => {})
})
But as soon as I run the test 'yarn test', getting an error as:
TypeError: _App.default is not a constructor
3 |
4 |
> 5 | const app = new App();
| ^
how to fix this? what is the issue here? any one help me to understand please?
my spec file: I am not yet to start to work..
import App from './App';
describe('app tests goes here', () => {
beforeEach(() => {})
})
I am trying to test with Jest my vue Component in witch is implemented bootstrap.
This is my test for VoteComponent:
`
import VoteComponent from '../../src/components/VoteComponent.vue'
import BootstrapVue from 'bootstrap-vue/src/index'
import { mount, createLocalVue } from '#vue/test-utils';
const localVue = createLocalVue();
localVue.use(BootstrapVue);
describe('VoteComponent', () =>
{
test('is a Vue instance', () =>
{
const wrapper = mount(VoteComponent, {localVue})
expect(wrapper.isVueInstance()).toBeTruthy()
})
})
`
This is what terminal shows when I run my test:
Details:
C:\...\...\...\...\...\node_modules\bootstrap\dist\css\bootstrap.css:7
:root {
^
SyntaxError: Unexpected token :
72 |
73 | <script>
> 74 | import 'bootstrap/dist/css/bootstrap.css'
| ^
75 | import 'bootstrap-vue/dist/bootstrap-vue.css'
76 | import VueFlip from 'vue-flip';
77 | import fontawesome from "#fortawesome/fontawesome";